方法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