`
jjxliu306
  • 浏览: 156035 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

    博客分类:
  • GIS
阅读更多

最近公司有个需求,直接在地图上可以切换天地图的地图和卫星图作为背景图,撇开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在附件中。

 

 

 

 

  • 大小: 541.7 KB
  • 大小: 210.2 KB
  • 大小: 8.6 KB
1
3
分享到:
评论

相关推荐

    openlayers5加载天地图影像.zip

    OpenLayers 是一个流行的开源JavaScript库,用于在网页上创建交互式...OpenLayers 5提供了丰富的API和扩展功能,可以满足各种复杂的地图应用场景。不断探索和学习,你会发现OpenLayers是一个强大且灵活的地图开发工具。

    基于Openlayers的GIS组件设计

    如题,基于开源的gis框架(openlayers)设计的js组件,支持异步加载,可扩展。同时也提供了webgis操作的相关案例和代码,无论是学习还是工作需要均可满足。纯前端框架,下载后无需配置,可直接运行。

    openlayers5加载天地图.zip

    在"openlayers5加载天地图.zip"这个压缩包中,我们可以期待找到一个示例项目,展示了如何利用OpenLayers 5来加载和展示天地图的数据。天地图是中国的一个官方基础地理信息服务平台,提供了丰富的地图服务,包括地形...

    openlayers 加载天地图示例

    在这个文件中,我们将创建OpenLayers地图实例,并添加天地图图层。天地图的图层通常包括WMTS(Web Map Tile Service)服务,我们可以使用`ol.layer.Tile`类来创建这些图层。下面是一个可能的示例代码片段: ```...

    openlayers实现本地图片作为背景,添加marker标记

    在这个例子中,我们将讨论如何利用OpenLayers将本地图片作为地图背景,并添加marker标记。 首先,为了将本地图片用作背景,我们需要创建一个OpenLayers的图层实例。这通常通过`ol.source.ImageStatic`类来实现。你...

    基于Openlayers的地图应用Vue组件内置了百度高德天地图瓦片并支持与方正超图山海经纬航天精一等PGIS厂商

    基于Openlayers的地图应用Vue组件非常强大且灵活。它内置了百度、高德、天地图瓦片,并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接,为用户提供了丰富的地图数据选择。组件库中包含了文本、图形、html、...

    openlayers加载在线天地图.zip

    5. 添加图层到地图:将天地图图层添加到地图实例中。 ```javascript map.addLayer(tdtLayer); ``` 四、高级功能 1. 自定义地图样式:可以通过修改图层参数来自定义地图的样式,例如更改颜色、透明度等。 2. 图层...

    openlayers3添加各种地图资源

    下面将详细阐述如何使用OpenLayers 3 添加这些地图资源。 一、OpenLayers 3 简介 OpenLayers 3 是一个完全重写版本,相比早期的OpenLayers 2,它具有更好的性能、更简洁的API和更强的灵活性。其核心特性包括矢量...

    读天地图影像地形-使用Openlayers调用天地图在线服务数据

    在本文中,我们将探讨如何利用OpenLayers库来调用天地图的在线服务数据。天地图是由国家测绘局推出的中国地理信息公共服务平台,提供丰富的地图、地形等基础地理信息服务。其公开的服务接口允许开发者无需授权即可...

    基于OpenLayers实战地理信息系统教程(教学视频)

    里面是教学视频,共五章,基于OpenLayers实战地理信息系统教程,基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程

    openlayers发布简易离线地图DEMO

    离线地图的实现主要依赖于将在线地图数据预先下载并存储在本地,然后通过OpenLayers来读取和渲染这些存储的数据。在这个DEMO中,我们重点关注两个关键点:地图瓦片的组织和OpenLayers的配置。 1. **地图瓦片的组织*...

    基于Openlayers的地图应用Vue组件 内置百度、高德、天地图瓦片,支持与方正、超图、山海经纬、航天精一等PGIS厂商对接

    基于Openlayers的地图应用Vue组件。内置了百度、高德、天地图瓦片,并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接。 包含文本、图形、html、热力图、轨迹回放等20个组件,支持与ECharts结合实现散点、飞行...

    基于openlayers的局域网地图开发第8课基本图形绘制源码

    基于openlayers的局域网地图开发第8课基本图形绘制源码(为了减少文件大小,文件中不包含地图文件,如需要地图文件可下载第7课源码或自行下载地图文件,并将其命名为simpleMap并将其放入项目根目录),课程基于...

    openlayers 中自定义扩展简单引用

    扩展是为OpenLayers添加新功能或修改现有功能的一种方式,它可以是新的图层类型、新的交互方式,甚至是新的投影支持。通过扩展,我们可以让OpenLayers更好地适应我们的项目需求。 创建一个自定义扩展通常包括以下...

    基于openlayers和canvas绘制海量数据的实现

    在"ol-canvaslayer-main"这个文件中,可能包含了一个OpenLayers的扩展模块,用于在地图上创建一个基于Canvas的图层。CanvasLayer允许开发者利用Canvas的高性能特性来绘制大量点、线、面等几何对象,这对于实时更新...

    Openlayers扩展右键菜单

    "OpenLayers扩展右键菜单"是一个项目,旨在帮助开发者为他们的OpenLayers地图应用添加自定义的右键上下文菜单。这个扩展允许用户在地图上点击右键时触发特定的操作,例如测量距离、添加图层、获取地图坐标等。 开发...

    使用openlayers加载离线地图实例

    在IT行业中,前端开发是构建Web应用程序的关键部分,而OpenLayers是一个流行的JavaScript库,用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图,并通过mui将其打包成移动应用...

    openlayers 调用百度地图

    在OpenLayers中调用百度地图是一项常见的需求,特别是在构建Web GIS应用时,用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库,用于创建交互式的地图应用,而百度地图...

    openlayers5加载百度地图.zip

    OpenLayers 是一个流行的开源...同时,这个示例也是一个很好的起点,可以进一步扩展到更复杂的地图应用,如叠加自定义矢量数据、添加标记、热力图等功能。在实践中不断探索和改进,可以加深对WebGIS开发的理解。

Global site tag (gtag.js) - Google Analytics