方法1：leaflet.TileLayer.WMTS插件
插件地址https://github.com/alexandre-melard/leaflet.TileLayer.WMTS
用法示例https://hanbo.blog.csdn.net/article/details/80768710
我的示例代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title data-i18n="resources.title_wmtsLayer"></title><script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script src="../js/leaflet-tilelayer-wmts.js"></script>
<script type="text/javascript">var map = L.map('map', {attributionControl: false,logoControl: false,center: [0, 0],zoom: 1,minZoom: 0,maxZoom: 18,crs: L.CRS.EPSG4326,});//设置坐标系左上角坐标，3857坐标系可以默认不用设置，插件里已默认带有const matrixIds = [];for (let i = 0; i < 19; ++i) {matrixIds[i] = {identifier: "" + i,topLeftCorner: new L.LatLng(90, -180)};}var ign = new L.TileLayer.WMTS('http://localhost:8090/geowebcache/service/wmts',{layer: "arcgis_com",style: "",tilematrixSet: "EPSG:4326_arcgis_com",format: "image/jpeg",minZoom: 0,maxZoom: 5,matrixIds: matrixIds,attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>© <a href='http://www.ign.fr'>IGN</a>"});map.addLayer(ign);
</script>
</body>
</html>
其他方法
leaflet管网用其他插件或者esri-leaflet插件。
OpenLayers加载geowebcache的WMTS服务
https://blog.csdn.net/weixin_40184249/article/details/84615192
