基于openlayers扩展添加天地图背景组件

最近公司有个需求，直接在地图上可以切换天地图的地图和卫星图作为背景图，撇开ol自带的layerswitcher(天地图的标注和底图是分开的,因此算两个layer,切换不方便)，自己扩展了一个mapswitcher，将天地图的卫星图和地图做了封装，先来个封装好的效果图  :

卫星图：

 

地图：

 
 

注意在地图右上角的位置 多了一个单选框,可以选择 “卫星图”或者“地图”。

 

 

OK，画不多说，先看一下天地图对外的的地图服务：http://www.tianditu.com/service/query.html  我这里选取的全是是选取经纬度系，没有采用墨卡托。

 

贴一个ol调用天地图wmts的demo作为后续的参考：

 var l1 = new OpenLayers.Layer.WMTS({
						 		    name: "ditu", //layername
						 		    url: "http://t0.tianditu.com/vec_c/wmts", 
						 		    layer: "vec", //参考规范
						 		    style: "default",
						 		    matrixSet: "c", //参考规范
						 			format:"tiles",
						 			isBaseLayer: true 
						 			})

 

 

 

,剩下的废话不多说直接贴写好的control

 OpenLayers.Control.MapSwitcher = OpenLayers
		.Class(
				OpenLayers.Control,
				{

					/**
					 * APIProperty: autoActivate {Boolean} Activate the control
					 * when it is added to a map. Default is true.
					 */
					autoActivate : true,

					/**
					 * Property: element {DOMElement}
					 */
					element : null,
 
 
					/**
					 * Method: destroy
					 */
					destroy : function() {
						this.deactivate();
						OpenLayers.Control.prototype.destroy.apply(this,
								arguments);
					},
					imgbutton : null,
					vecbutton : null,
					/**
					 * APIMethod: activate
					 */
					activate : function() {
						 
						this.map.events.register("buttonclick_vec_",
								this, this.onVecClick);
						this.map.events.register("buttonclick_img_",
								this, this.onImgClick);
						 
						this.map.events.register("zoomend",this, this.zoom_);
					},

					/**
					 * APIMethod: deactivate
					 */
					deactivate : function() {
						this.map.events.unregister("buttonclick_vec_",
								this, this.onVecClick);
						this.map.events.unregister("buttonclick_img_",
								this, this.onImgClick);
					 
					},
					
					 
					/**
					 * Method: draw {DOMElement}
					 */
					draw : function() {
						OpenLayers.Control.prototype.draw
								.apply(this, arguments);

						this.div.left = "";
						this.div.top = "";
						this.div.style.right="15ex" ;
						this.div.style.background="#ddd";

						imgbutton = document.createElement("input");/* 生成input对象*/
						imgbutton.type = "radio"; /* 生成input属性value*/
						imgbutton.value = "卫星";
						imgbutton.name = "1";
						imgbutton.id =  "buttonclick_img_" ;


						vecbutton = document.createElement("input"); /* 生成input对象*/
						vecbutton.type = "radio"; /* 生成input属性value */
						vecbutton.value = "地图";
						vecbutton.name = "1";
						vecbutton.id =  "buttonclick_vec_" ;
						
						
						//<label for="male">Male</label>
						var lab1 = document.createElement("label"); /* 生成input对象*/
						lab1.innerHTML="卫星" ;
						lab1["for"] = imgbutton.id;
						
						var lab2 = document.createElement("label"); /* 生成input对象*/
						lab2.innerHTML="地图" ;
						lab2["for"] = vecbutton.id;
						 
						this.div.appendChild(lab1);  
						this.div.appendChild(imgbutton);  
						this.div.appendChild(lab2);  
						this.div.appendChild(vecbutton);  
					 

						
						var _map = this.map ;
						
						imgbutton.onclick = function() {
							 
							 _map.events.triggerEvent("buttonclick_img_");
							 
						};
						
						vecbutton.onclick = function() {
							 
							 _map.events.triggerEvent("buttonclick_vec_");
							 
						};
						//默认地图
						this.setBackLayerType('vec');
						vecbutton.checked = true ;
					 
						return this.div;
					},

					 
					 

					onVecClick : function() {

						this.setBackLayerType('vec');
						
					},

					onImgClick : function() {
						 //alert("卫星");
						this.setBackLayerType('img');
 
					},

					clearBackgroupLayer : function(){
						
						//清理掉当前的背景图层 
						
						//获取背景图层 包含tms和wmts 
						var layers = this.map.layers;
						 
						var rmLayers = new Array();
						
						for(var i in layers) {
							
							var layer = layers[i];
							//console.log("i:%" + i);
							//判断图层属性
							 if(layer.name.indexOf('tdt_') >= 0 && ( layer instanceof OpenLayers.Layer.TMS 
									|| layer instanceof OpenLayers.Layer.WMTS)) {
								
								//去掉图层
								//this.map.removeLayer(layer);
								rmLayers.push(layer);
							} 
							
						}
						
						
						for(var i in rmLayers) {
							
							this.map.removeLayer(rmLayers[i]);
							
						}
						
					},
					
					setBackLayerType:function (e) {
						 this. clearBackgroupLayer();
							
						if(e == 'img') {
							
							  var l1 = new OpenLayers.Layer.WMTS({
						 		    name: "tdt_weix",
						 		    url: "http://t0.tianditu.com/img_c/wmts", 
						 		    layer: "img",
						 		    style: "default",
						 		    matrixSet: "c",
						 			format:"tiles",
						 			isBaseLayer: true 
						 			})
							 var l2 = new OpenLayers.Layer.WMTS({
						 		    name: "tdt_weixbz",
						 		    url: "http://t0.tianditu.com/cia_c/wmts", 
						 		    layer: "cia",
						 		    style: "default",
						 		    matrixSet: "c",
						 			format:"tiles",
						 			isBaseLayer: false
						 		}) ;
							 this.map.addLayer(l1);
							 this.map.addLayer(l2);
							 
							// this. map.setBaseLayer(l1);
							 this.map.setLayerIndex(l1,1);
							 this.map.setLayerIndex(l2,2);
							 
							  if(this.imgbutton && !this.imgbutton.checked) {
								 
								  this.imgbutton.checked = true;
							  }
							
						} else if(e == 'vec'){
							 //添加地图
							  var l1 = new OpenLayers.Layer.WMTS({
						 		    name: "tdt_ditu",
						 		    url: "http://t0.tianditu.com/vec_c/wmts", 
						 		    layer: "vec",
						 		    style: "default",
						 		    matrixSet: "c",
						 			format:"tiles",
						 			isBaseLayer: true 
						 			})
							 var l2 = new OpenLayers.Layer.WMTS({
						 		    name: "tdt_ditubz",
						 		    url: "http://t0.tianditu.com/cva_c/wmts", 
						 		    layer: "cva",
						 		    style: "default",
						 		    matrixSet: "c",
						 			format:"tiles",
						 			isBaseLayer: false
						 		}) ;
							 
							 this.map.addLayer(l1);
							 this.map.addLayer(l2);
							 
							// this. map.setBaseLayer(l1);
							 this. map.setLayerIndex(l1,1);
							 this.map.setLayerIndex(l2,2); 
							 
							  if(this.vecbutton && !this.vecbutton.checked) {
								 
								  this.vecbutton.checked = true;
							  }
						}
						
						
					},

					CLASS_NAME : "OpenLayers.Control.MapSwitcher"
				});
					 

 ：代码比较烂，但写的应该比较清晰。lalala

 

 

ol重新打包后就可以用了,测试环境下将此js引入到lib/Openlayers.js ,如图：

 

具体代码参考：

.......
"OpenLayers/Control/Split.js",
                "OpenLayers/Control/LayerSwitcher.js",
                "OpenLayers/Control/MapSwitcher.js", //加入
                "OpenLayers/Control/DrawFeature.js",
                "OpenLayers/Control/DragFeature.js",
........

 

OK 来个demo页面：

<body onload="init()">
	<div id="map"  >
	 	 
	</div>

 
 
<script type="text/javascript">
	 
	var lat  = Number('30.4');
	 
	var lon  = Number('120.3');
 
 	var map = null;
 	 
 
 	var mapMaxZoom = 19; 
 
 	function init() {
 		
 		var options = {
				controls : [ new OpenLayers.Control.Navigation(),
								new OpenLayers.Control.Zoom(),
								
							 	new OpenLayers.Control.LayerSwitcher(),
								new OpenLayers.Control.MousePosition() ],
				 
						numZoomLevels : mapMaxZoom,
					 
				   	};
 		
 		 
 		var map  = new OpenLayers.Map('map', options ) ;
 	 
 		var mapswitcher = new OpenLayers.Control.MapSwitcher();
 	 	map.addControl(mapswitcher);
 		 
 		 
 		 
 		 var point = new OpenLayers.LonLat(lon , lat );
 		 	 
 		map.setCenter(point , 15);
 		

 	}
 
	
  
	</script>
 
</html>

 

 

 

demo在附件中。