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服务：
成功后
