如何调用插件并实现功能

首先说明下本篇博文的环境，本篇博文利用了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>&copy; <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>