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

134 lines
4.0 KiB
JavaScript

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))
}