方法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>
再来备份一个“注意事项”示例,满屏图层会覆盖其他图层(纵使顺序调整也没用)。
<!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: [24.5,102.4],
zoom: 5,
minZoom: 0,
maxZoom: 18,
crs: L.CRS.EPSG4326,
});
var url2="https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// L.supermap.imageMapLayer(url2).addTo(map);//该方法满屏绘制会覆盖WMTS图层,不要用该方法加载。
L.supermap.tiledMapLayer(url2).addTo(map);
//设置坐标系左上角坐标,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:8888/geowebcache/service/wmts',
{
layer: "yunnan4326",
style: "",
tilematrixSet: "EPSG:4326_yunnan4326",//EPSG:4326_yunnan4326 "EPSG%3A4326_yunnan4326%3A7"
format: "image/png",
minZoom: 5,//避免1级就开始加载,1级没瓦片会疯狂报错。5级才有数据。
maxZoom: 18,
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);
L.marker([24.5,102.4]).addTo(map);
map.on('click',function (e){
let mzoom=map.getZoom();
console.log(mzoom)
console.log(e)
})
</script>
</body>
</html>
其他方法
leaflet管网用其他插件或者esri-leaflet插件。
OpenLayers加载geowebcache的WMTS服务
https://blog.csdn.net/weixin_40184249/article/details/84615192