Leaflef笔记-使用leaflet-tilelayer-wmts插件获取地图及坐标（含错误分析思路）
目錄
?
?
如何調(diào)用插件并實(shí)現(xiàn)功能
對WMTS服務(wù)的進(jìn)一步了解及可能會遇到的問題
?
如何調(diào)用插件并實(shí)現(xiàn)功能
首先說明下本篇博文的環(huán)境，本篇博文利用了Geoserver，搭建了一個(gè)中國地圖的WMTS服務(wù)，地圖層級為4-9級。
詳細(xì)搭建過程請參考這篇博文：https://blog.csdn.net/qq78442761/article/details/100581622
下面來個(gè)演示！
當(dāng)點(diǎn)擊地圖！
使用這功能需要如下的過程：
? ? ? ? ? 1. 下載leaflet-tilelayer-wmts插件；
? ? ? ? ? ?2. 使用插件發(fā)送請求（本博文下一節(jié)將會給出這個(gè)請求的分析）！
下載其插件！
看看官方給的例子（下面的來自于官方的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，當(dāng)點(diǎn)擊了地圖后，就會響應(yīng)onMapClick函數(shù)，就會探出一個(gè)框，這個(gè)框里面有其坐標(biāo)。
?
對WMTS服務(wù)的進(jìn)一步了解及可能會遇到的問題
這里，先分析下使用Geoserver瀏覽地圖（請求的也是WMTS服務(wù)）。
這里一定要對數(shù)據(jù)敏感！這是成為一名合格的程序員必備的技能。
可以看到，當(dāng)鼠標(biāo)拖動(dòng)，或者滾動(dòng)轉(zhuǎn)輪的時(shí)候就會發(fā)送請求（點(diǎn)進(jìn)去看可以知道是Get請求）
其中200為正常，返回小的瓦片，400為參數(shù)錯(cuò)誤，通過Type可以知道估計(jì)是錯(cuò)誤的細(xì)節(jié)，點(diǎn)進(jìn)去果然有相關(guān)細(xì)節(jié)！
從中可以知道有個(gè)Row9范圍不對，應(yīng)該是10-14之間的數(shù)。
來查看下請求！
從中我們就知道這個(gè)不對。
所以在自己調(diào)用WMTS服務(wù)后，可以根據(jù)自己的需要，調(diào)整參數(shù)！
?
?
總結(jié)
以上是生活随笔為你收集整理的Leaflef笔记-使用leaflet-tilelayer-wmts插件获取地图及坐标（含错误分析思路）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OllyDbg笔记-初识PE文件（nag
- 下一篇： Arduino笔记-流水点灯