leaflet 使用 wmts

来源：互联网发布：mac下载rayfile 编辑：程序博客网时间：2024/05/09 05:41

leaflet 使用 wmts

一直做地图方面的页面开发，这次接到一个新需求，使用leaflet对接公司的WMTS服务。开始干活，查看leaflet文档

http://leafletjs.com/examples/wms/wms.html，原生只支持WMS接入。于是想到了必然会有大牛添加leaflet编写支持WMTS的插件，在Plugins去找，果然:
leaflet.TileLayer.WMTS

根据插件demo，按需求写入参数

参数设置
layer
必传，服务器约定的wmts图层名;
TileMatrixSet
比例尺集，必须与后台对应；
format服务器提供的瓦片图格式;

对应好参数之后开始接入，结果发现图片获取不到，接口**400**，查询后台文档之后发现是链接生成规则不对，必然涉及到

tilelayer-wmts-src.js源文件。
发现tilelayer-wmts-src.js的url生成规则是拼接参数的方式：

错误原因

而公司需要以链接的方式传参，按照适合公司服务器的url做出修改:
修改后
调试页面，接口返回参数错误，原因是服务器坐标系与leaflet使用的坐标系不匹配。修改leaflet坐标系为EPSG:4326(默认为EPSG:3857)

var map = L.map('allmap',{  minZoom: 4,  maxZoom: 13,  crs: L.CRS.EPSG4326}).setView([48.505, 3.09], 13);

有一点需要注意的是，tilelayer-wmts-src.js默认支持也是ERPS:3857，所以插件中默认的matrixIds参数的topLeftCorner也只支持EPSG:3857。需要自己提供对应的参数:

matrixIds

其实就是使用的坐标系规定的地图边界左上角点的坐标。最后使用如下

var url = 'wmts服务器地址';var matrixIds = [];for (var i=0; i<14; ++i) {  matrixIds[i] = {    identifier:1+i,    topLeftCorner : new L.LatLng(90,-180)  };}var ign = new L.TileLayer.WMTS( url ,                                {                                  name: "",                                  layer: "规定的图层名",                                  style: "使用样式",                                  tilematrixset: "比例尺集",                                  format: "image/png",                                  matrixIds: matrixIds                                }                              );var map = L.map('allmap',{  minZoom: 4,  maxZoom: 13,  crs: L.CRS.EPSG4326}).setView([48.505, 3.09], 13);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);

成功接入WMTS服务：
成功后

2 0