目录
如何调用插件并实现功能
对WMTS服务的进一步了解及可能会遇到的问题
如何调用插件并实现功能
首先说明下本篇博文的环境，本篇博文利用了Geoserver，搭建了一个中国地图的WMTS服务，地图层级为4-9级。
详细搭建过程请参考这篇博文：/qq78442761/article/details/100581622
下面来个演示！
当点击地图！
使用这功能需要如下的过程：
1. 下载leaflet-tilelayer-wmts插件；
2. 使用插件发送请求（本博文下一节将会给出这个请求的分析）！
下载其插件！
看看官方给的例子（下面的来自于官方的Github说明）
<html><head><title>Demo leaflet.TileLayer.WMTS</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="/leaflet-0.7.2/leaflet.css" /><script src="/leaflet-0.7.2/leaflet.js"></script> <script src="/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script></head><body><div id="map" style="height: 100%; width: 100%"></div><script>// You can get a key here: http://api.ign.fr/accueil (french)var ignKey = "lqp42l06r6pyp1ll2uuzei4r";/** Define the layer type* GEOGRAPHICALGRIDSYSTEMS.MAPS* GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE* GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD*/var layerIGNScanStd = "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD";// The WMTS URL var url = "http://wxs.ign.fr/" + ignKey + "/geoportail/wmts";var ign = new L.TileLayer.WMTS( url ,{layer: layerIGNScanStd,style: "normal",tilematrixSet: "PM",format: "image/jpeg",attribution: "<a href='/mylen/leaflet.TileLayer.WMTS'>GitHub</a>© <a href='http://www.ign.fr'>IGN</a>"});var map = L.map('map').setView([48.505, 3.09], 13);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);var baseLayers = {"Carte IGN" : ign};L.control.layers(baseLayers, {}).addTo(map); </script></body></html>
从中，可以知道，只要指定layer及url即可完成功能。
所以就有了本人下面的代码
<!DOCTYPE html><html><head><title>Hello World</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="leaflet.css" /><script src="leaflet.js"></script> <script src="leaflet-tilelayer-wmts-src.js"></script><style>html, body {height: 100%;margin: 0;}#map {width: 100%;height: 100%;}</style></head><body><div id='map'></div><script type="text/javascript">var ign = new L.TileLayer.WMTS( "http://xxx.xxx.xxx.xxx:8080/geoserver/gwc/service/wmts" ,{layer: 'GG_9:gg_9',tilematrixset: "EPSG:900913",Format : 'image/png',TileMatrix: 'EPSG:900913:8'});var map = L.map('map', {minZoom: 4,maxZoom: 9}).setView([32, 118], 8);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);map.invalidateSize(true);var popup = L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);}map.on('click', onMapClick);</script></body></html>
这里使用了popup，当点击了地图后，就会响应onMapClick函数，就会探出一个框，这个框里面有其坐标。
对WMTS服务的进一步了解及可能会遇到的问题
这里，先分析下使用Geoserver浏览地图（请求的也是WMTS服务）。
这里一定要对数据敏感！这是成为一名合格的程序员必备的技能。
可以看到，当鼠标拖动，或者滚动转轮的时候就会发送请求（点进去看可以知道是Get请求）
其中200为正常，返回小的瓦片，400为参数错误，通过Type可以知道估计是错误的细节，点进去果然有相关细节！
从中可以知道有个Row9范围不对，应该是10-14之间的数。
来查看下请求！
从中我们就知道这个不对。
所以在自己调用WMTS服务后，可以根据自己的需要，调整参数！
