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