Leaflef笔记-使用leaflet-tilelayer-wmts插件获取地图及坐标（含错误分析思路）
目錄
?
?
如何調用插件并實現功能
對WMTS服務的進一步了解及可能會遇到的問題
?
如何調用插件并實現功能
首先說明下本篇博文的環境，本篇博文利用了Geoserver，搭建了一個中國地圖的WMTS服務，地圖層級為4-9級。
詳細搭建過程請參考這篇博文：https://blog.csdn.net/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="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /><script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> <script src="https://rawgithub.com/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='https://github.com/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服務后，可以根據自己的需要，調整參數！
?
?
總結
以上是生活随笔為你收集整理的Leaflef笔记-使用leaflet-tilelayer-wmts插件获取地图及坐标（含错误分析思路）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OllyDbg笔记-初识PE文件（nag
- 下一篇： Arduino笔记-流水点灯