westdc-zf1/htdocs/static-sanjy-np/js/map-index.js

var center = [10638261.95370317, 4067978.645337081];
var WESTDC_TILE_SERVER = 'http://210.77.68.221:27011';
var WESTDC_MAP_SERVER = "http://210.77.79.190:8888";

var view = new ol.View({
    projection: 'EPSG:3857',
    center: center,
    loadTilesWhileAnimating: true,
    zoom: 7
});

var map = new ol.Map({
    target: 'map',
    layers: [
        // new ol.layer.Tile({
        //     title: "天地图卫星影像",
        //     source: new ol.source.XYZ({
        //         url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
        //     }),
        //     visible: true
        // }),
        new ol.layer.Tile({
            title: "天地图底图",
            source: new ol.source.XYZ({
                url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}'
            }),
            visible: true
        }),
        new ol.layer.Tile({
            title: "天地图标注",
            source: new ol.source.XYZ({
                url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
            }),
            visible: true
        })
    ],
    controls: [],
    view: view
});

//http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}

map.on('click', function(event) {
    console.log(event.coordinate)
});

var layers = {
    "boundYellowRiver": {
        title: "黄河源园区",
        layer: new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: WESTDC_MAP_SERVER + '/geoserver/sjynp/wms',
                params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    STYLES: '',
                    LAYERS: 'sjynp:yellow_river_park',
                    tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
                }
            }),
            opacity: 0.7,
            visible: true
        }),
        center: [10921790.778184231, 4116205.632870759],
        zoom: 8
    },
    "boundLanCangJiang": {
        title: "澜沧江源园区",
        layer: new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: WESTDC_MAP_SERVER + '/geoserver/sjynp/wms',
                params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    STYLES: '',
                    LAYERS: 'sjynp:lancang_river_park',
                    tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
                }
            }),
            opacity: 0.7,
            visible: true
        }),
        center: [10531515.707271997, 3922706.842925957],
        zoom: 8
    },
    "boundChangjiang": {
        title: "长江源园区",
        layer: new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: WESTDC_MAP_SERVER + '/geoserver/sjynp/wms',
                params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    STYLES: '',
                    LAYERS: 'sj:yangtze_river_park',
                    tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
                }
            }),
            opacity: 0.7,
            visible: true
        }),
        center: [10278745.168478113, 4187177.413633545],
        zoom: 7
    },
};

function pointTextStyle(text, size, color) {
    return new ol.style.Style({
        text: new ol.style.Text({
            font: 'bold '+size+'px "Open Sans", "Arial Unicode MS", "sans-serif"',
            overflow: false,
            fill: new ol.style.Fill({
                color: color
            }),
            text: text
        })
    })
}

function addTextMarker(text, location){
    return new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point(location)
            })]
        }),
        style: pointTextStyle(text, 18, "#246166")
    });
}

for(var i in layers){
    map.addLayer(layers[i].layer);
    map.addLayer(addTextMarker(layers[i].title, layers[i].center))
}