OpenLayers调用天地图WMTS示例
最近,工作中有需要用OpenLayers脚本库调用天地图的WMTS服务接口,由于这两个都是刚开始接触,所以是摸着石头过河,遇到了地图显示不了的问题。
我也通过用浏览器直接提供的地址打开,来进行参数对比。再看了OpenLayers和天地图的相关文档和网络上的文章,也加入了相关群下载相关资料浏览并询问群友,还是未果。
虽然官网http://www.zjditu.cn/resource/apihelp 有这么一个例子,但是我替换成提供的正式地址,并没有显示地图(每个层级都是需要的,否则只能通过放大或者缩小才能看到,还有layer的值大小写需要匹配)。
最后还是让提供方给了个例子,完成了实现(刚开始要,没给,不知道是忙还是什么情况)。
为了让刚接触这种需求的广大程序猿能够少走点弯路,下面给出示例,有注释。有些参数不懂或者想使用复杂功能的,则查阅下列网址:
OpenLayers官网:https://openlayers.org/
扯淡大叔的教程:http://anzhihun.coding.me/ol3-primer/
示例代码如下:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> </head> <body> <div> 选中的经纬度: <input id="Coordinates" type="text" value="" disabled="disabled" style="width: 350px;" /> </div> <div id="map" class="map" style="height: 493px;"></div> <div id="div_overlay" style="display: none;"> <div id="marker" title=""> <img src="position_orange.png" /> </div> <div id="popup" title=""></div> </div> <script> var projection = ol.proj.get('EPSG:4326');//设置坐标系 var projectionExtent = projection.getExtent(); //分辨率 var resolutions = [ 1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625, 0.000010728836059570312, 0.000005364418029785156, 0.000002682209014892578, 0.000001341104507446289 ]; //瓦片矩阵 var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; var centerXY = "121.54449462890625,29.875946044921875";//地图中心点,默认宁波市 var center = ReturnCenter(centerXY); var emap_attributions = new ol.Attribution({ html: '<span class="span_switch" onclick="ChangeToImgMap()">点击切换地图类型</span>' }); function EMap() { var map = new ol.Map({ controls: ol.control.defaults({ attribution: false }).extend([ new ol.control.MousePosition()//是否显示鼠标所在地图点的经纬度 ]), layers: [ new ol.layer.Tile({ source: new ol.source.WMTS({ attributions: emap_attributions, name: "中国矢量1-14级", url: "http://t{0-6}.tianditu.com/vec_c/wmts", layer: "vec", style: "default", matrixSet: "c", format: "tiles", wrapX: true,//地图缩小后,防止在一个页面出现多个一样的地图 tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions.slice(0, 15),//slice方法不清楚的请百度 matrixIds: matrixIds.slice(0, 15) }) }), maxResolution: resolutions[0], minResolution: resolutions[14] }), new ol.layer.Tile({ source: new ol.source.WMTS({ attributions: emap_attributions, name: "中国矢量注记1-14级", url: "http://t{0-6}.tianditu.com/cva_c/wmts", layer: "cva", style: "default", matrixSet: "c", format: "tiles", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions.slice(0, 15), matrixIds: matrixIds.slice(0, 15) }) }), maxResolution: resolutions[0], minResolution: resolutions[14] }), new ol.layer.Tile({ source: new ol.source.WMTS({ attributions: emap_attributions, name: "浙江矢量15-17级", url: "http://srv{0-6}.zjditu.cn/ZJEMAP_2D/wmts", layer: "TDT_ZJEMAP", style: "default", matrixSet: "TileMatrixSet0", format: "image/png", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions.slice(15, 18), matrixIds: matrixIds.slice(15, 18) }) }), maxResolution: resolutions[14],//指定当前级数的上一级来平滑过渡,否则滚轮缩放当前级数会显示空白 minResolution: resolutions[17] }), new ol.layer.Tile({ source: new ol.source.WMTS({ attributions: emap_attributions, name: "浙江矢量注记15-17级", url: "http://srv{0-6}.zjditu.cn/ZJEMAPANNO_2D/wmts", layer: "ZJEMAPANNO", style: "default", matrixSet: "TileMatrixSet0", format: "image/png", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions.slice(15, 18), matrixIds: matrixIds.slice(15, 18) }) }), maxResolution: resolutions[14],//指定当前级数的上一级来平滑过渡,否则滚轮缩放当前级数会显示空白 minResolution: resolutions[17] }), new ol.layer.Tile({ source: new ol.source.WMTS({ attributions: emap_attributions, name: "XX县矢量18-20级", url: "替换成你需要的wmts服务接口地址", layer: "jsemap", style: "default", matrixSet: "TileMatrixSet0", format: "image/png", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions.slice(18, 21), matrixIds: matrixIds.slice(18, 21) }) }), maxResolution: resolutions[17],//指定当前级数的上一级来平滑过渡,否则滚轮缩放当前级数会显示空白 minResolution: resolutions[20] }), new ol.layer.Tile({ source: new ol.source.WMTS({ attributions: emap_attributions, name: "XX县矢量注记18-20级", url: "替换成你需要的wmts服务接口地址", layer: "jsemapanno", style: "default", matrixSet: "TileMatrixSet0", format: "image/png", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions.slice(18, 21), matrixIds: matrixIds.slice(18, 21) }) }), maxResolution: resolutions[17],//指定当前级数的上一级来平滑过渡,否则滚轮缩放当前级数会显示空白 minResolution: resolutions[21] }) ], target: "map", view: new ol.View({ center: center,//地图中心点 projection: projection,//投影类别 zoom: 10,//默认缩放级别 maxZoom: 20,//最大缩放级别 minZoom: 1//最小缩放级别 }) }); //鼠标点击时设置中心点覆盖物 GetElementId("map").onclick = function () { coordinates = GetElementsByClassName('ol-mouse-position')[0].innerHTML; SetPosition(map, coordinates); }; } EMap();//显示E电子地图 function GetElementId(id) { return document.getElementById(id); } function GetElementsByClassName(className) { return document.getElementsByClassName(className); } //中心点处理 function ReturnCenter(centerXY) { var centerObj = centerXY.split(','); var centerX = centerObj[0]; var centerY = centerObj[1]; return [parseFloat(centerX), parseFloat(centerY)];//一定要转换下类型,否则拖拽后,地图就消失了 } //设置中心点覆盖物 function SetPosition(map, coordinates) { GetElementId("Coordinates").value = coordinates; var newcenter = ReturnCenter(coordinates); // Position marker var marker = new ol.Overlay({ position: newcenter, positioning: 'bottom-center', element: document.getElementById('marker'), stopEvent: false }); map.addOverlay(marker); } </script> </body> </html>
可将上述代码直接复制到txt文件中并保存html,即可成功浏览。点击鼠标可以显示覆盖物并把坐标值显示在上面的文本框中。
附上坐标覆盖物图片和效果图:
如果你踩到坑了,没准在我这会有填坑方法哦,虽然可能只是沧海一粟,O(∩_∩)O