好的，我了解了你的问题。
使用leaflet.wmts插件加载
geoserver发布的wmts服务，需要按照以下步骤进行操作：
1. 在 HTML 文件中引入
leaflet、
leaflet.wmts插件以及
geoserver发布的wmts服务的地址，例如：
```
<!DOCTYPE html>
<html>
<head>
<title>Load WMTS service with
Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
leaflet@1.7.1/dist/
leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/
leaflet@1.7.1/dist/
leaflet.js"></script>
<script src="https://unpkg.com/
leaflet.wmts@1.0.2/dist/
leaflet-wmts.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([0, 0], 2);
var wmtsLayer = L.tileLayer.wmts('http://localhost:8080/
geoserver/gwc/service/wmts', {
layer: 'workspace:layername',
style: '',
tilematrixSet: 'EPSG:3857',
format: 'image/png',
maxZoom: 20,
minZoom: 0,
attribution: '© <a href="http://www.opengeospatial.org/standards/wmts">OGC WMTS</a> ' +
'| © <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</body>
</html>
```
2. 在代码中创建一个
leaflet地图对象，并设置
地图的中心点和缩放级别。
3.
使用leaflet.wmts插件的L.tileLayer.wmts方法创建一个WMTS
图层，并指定
geoserver发布的wmts服务的地址和参数，其中layer参数为
geoserver发布的
图层名称，tilematrixSet参数为瓦片矩阵集名称，format参数为瓦片格式，maxZoom和minZoom参数为最大和最小缩放级别，attribution参数为
图层的属性信息。
4. 将WMTS
图层添加到
leaflet地图对象中，即可加载
geoserver发布的wmts服务。
需要注意的是，
geoserver发布的wmts服务的地址和参数需要根据实际情况进行修改。另外，需要确保
geoserver发布的wmts服务的地址可以在浏览器中正常访问。
本文介绍了如何在Leaflet地图中利用CQL表达式过滤从Geoserver发布的图层，提供了完整的代码示例和运行效果展示，并提供相关资料下载链接。
订阅专栏 解锁全文
565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
