最近公司有个需求,直接在地图上可以切换天地图的地图和卫星图作为背景图,撇开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在附件中。
相关推荐
如题,基于开源的gis框架(openlayers)设计的js组件,支持异步加载,可扩展。同时也提供了webgis操作的相关案例和代码,无论是学习还是工作需要均可满足。纯前端框架,下载后无需配置,可直接运行。
openlayers 加载天地图示例
此代码采用开源的openlayers5,显示天地图的注记图层,天地图路网图层,欢迎下载使用。
使用openlayers5加载天地图影像,可以供参考使用,希望可以改进代码,重新使用。
基于Openlayers的地图应用Vue组件非常强大且灵活。它内置了百度、高德、天地图瓦片,并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接,为用户提供了丰富的地图数据选择。组件库中包含了文本、图形、html、...
webgis开发,文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码,很全很实用。
刚刚使用openlayers做了一个简单的小例子,注释很全,很简单,将本地的图片作为背景,能够按照坐标添加任意个标记
基于Openlayers的地图应用Vue组件。内置了百度、高德、天地图瓦片,并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接。 包含文本、图形、html、热力图、轨迹回放等20个组件,支持与ECharts结合实现散点、飞行...
Openlayers扩展插件ol-ext ,2022年4月版本
里面是教学视频,共五章,基于OpenLayers实战地理信息系统教程,基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程
基于openlayers的局域网地图开发第8课基本图形绘制源码(为了减少文件大小,文件中不包含地图文件,如需要地图文件可下载第7课源码或自行下载地图文件,并将其命名为simpleMap并将其放入项目根目录),课程基于...
基于openlayers和canvas绘制海量数据的实现
基于openlayers的局域网地图开发第7课地图控件源码,代码包含地图文件(simpleMap文件夹),基于openlayers开发局域网地图开发课程,可以实现地图显示、地点标注、绘制图形、添加图片与文字、地图保存与恢复、地点...
接天地图影像、地形等基础地理信息服务;各类数据的服务器地址,瓦片下载url拼接方法等等
可直接运行,简易的openlayers发布离线瓦片数据的DEMO,压缩包中包含了一部分地区的街道地图瓦片数据。
使用openlayers加载离线地图实例,可通过mui打包成app。简单,易上手
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290
openlayers 调用百度地图
基于openlayers实现如下功能: 1、实现图片地图,图片地图比例尺 2、绘制点的路径 3、绘制多边形,定位不规则多边形中心点,显示名称 4、多边形编辑 5、地图全屏,地图截图 6、点是否在区域中判定 7、暂停,播放,...