欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用OpenLayers叠加天地图

程序员文章站 2022-07-02 08:55:19
...

用到的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即可。