使用OpenLayers叠加天地图
用到的js库:
jquery.min.js
OpenLayers.js
HTML关键代码:
js关键代码:
var olMap = { mapCenter:null, changeBaseLayer : function() { $(".changeBaseLayer").bind('click',function(e){ var lyrName = '天地图矢量'; var lyrVec = olMap.map.getLayersByName(lyrName); lyrName = '天地图影像'; var lyrImg = olMap.map.getLayersByName(lyrName); if(olMap.map.baseLayer == lyrVec[0]){ $(".changeBaseLayer").css("background-image", "url(img/vec.png)"); olMap.map.setBaseLayer(lyrImg[0]); }else{ $(".changeBaseLayer").css("background-image", "url(img/img.png)"); olMap.map.setBaseLayer(lyrVec[0]); } }); }, map : null, initMap : function() { olMap.mapCenter = new OpenLayers.LonLat(11536516.407524, 4312888.4378666); if(system.area === '城关区'){ olMap.mapCenter = new OpenLayers.LonLat(11562947.655498, 4314389.2151457); } if(system.area === '安宁区'){ olMap.mapCenter = new OpenLayers.LonLat(11547727.132247, 4317733.3351327); } if(system.area === '七里河区'){ olMap.mapCenter = new OpenLayers.LonLat(11554396.365796, 4293990.557878); } var options = { controls : [], featureEvents: true, projection : "EPSG:900913", center : olMap.mapCenter }; olMap.map = new OpenLayers.Map("map", options); olMap.addTdtLayer(); olMap.addControl(); var format = 'image/png'; var xgqBoundsLayer = new OpenLayers.Layer.WMS( "xgq:"+ system.area, geoserverUrlWMS, { STYLES: '', LAYERS: 'xgq:'+system.area, format: format, transparent:true }, { buffer: 0, displayOutsideMaxExtent: true, isBaseLayer: false, yx : {'EPSG:4326' : true} } ); olMap.map.addLayers([xgqBoundsLayer]); }, addControl : function() { var overMapOption = { projection : "EPSG:900913" }; olMap.map.addControl(new OpenLayers.Control.OverviewMap(overMapOption)); olMap.map.addControl(new OpenLayers.Control.PanZoom()); olMap.map.addControl(new OpenLayers.Control.Navigation()); }, addTdtLayer : function() { var tdtLayerVec = new OpenLayers.Layer.XYZ( "天地图矢量", [ "http://t0.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}", "http://t1.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}", "http://t2.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}", "http://t3.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}", "http://t4.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}", "http://t5.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}", "http://t6.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}", "http://t7.tianditu.com/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}" ], { isBaseLayer : true, visibility : true, sphericalMercator : true }); var tdtLayerImg = new OpenLayers.Layer.XYZ( "天地图影像", [ "http://t0.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}", "http://t1.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}", "http://t2.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}", "http://t3.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}", "http://t4.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}", "http://t5.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}", "http://t6.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}", "http://t7.tianditu.com/DataServer?T=img_w&X=${x}&Y=${y}&L=${z}" ], { isBaseLayer : true, visibility : true, sphericalMercator : true }); var tdtLayerCva = new OpenLayers.Layer.XYZ( "天地图标注", [ "http://t0.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}", "http://t1.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}", "http://t2.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}", "http://t3.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}", "http://t4.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}", "http://t5.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}", "http://t6.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}", "http://t7.tianditu.com/DataServer?T=cva_w&X=${x}&Y=${y}&L=${z}" ], { isBaseLayer : false, visibility : true }); olMap.map.addLayer(tdtLayerVec); olMap.map.addLayer(tdtLayerImg); olMap.map.addLayer(tdtLayerCva); olMap.map.zoomToScale(200000, true); /*licKeys=['西','固','区']; var validateLicenseStr = 'if( lic' +'ense' +'' + '!==' + 'docum'+'ent.ti' +'tle||docu' +'ment.title.' +'index' +'Of(lic' +'Keys.join("")) === -1){do' +'cume' +'nt.ti' +'tle=def' +'aultTi' +'tle;$(".he' +'ader' +'Div h' +'2").ht' +'ml(def' +'ault' +'Title);}'; eval(validateLicenseStr);*/ } }
在html的window.onload函数中调用js的olMap.initMap即可。
转载自:https://blog.csdn.net/eqmaster/article/details/77689406