以下步骤和代码示例
展示了使用 Esri Leaflet 添加
GeoServer 图层并将其置于最上层的方法。
### 1. 引入必要的库
首先需要引入 Leaflet 和 Esri Leaflet 的相关库文件，可通过 CDN 方式引入。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>Add
GeoServer Layer with Esri Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri
-leaflet@3.0.8/dist/esri
-leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
// 初始化地图
const map = L.map(&
#39;map&
#39;).setView([0, 0], 2);
// 添加一个基础
图层，这里使用 OpenStreetMap
L.tileLayer(&
#39;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&
#39;, {
attribution: &
#39;Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors&
#39;,
maxZoom: 18
}).addTo(map);
// 添加
GeoServer 图层
const
geoserverLayer = L.esri.dynamicMapLayer({
url: &
#39;http://your
-geoserver-url/wms&
#39;,
layers: [1] // 这里根据实际
GeoServer 图层 ID 进行调整
}).addTo(map);
// 将
GeoServer 图层置于最上层
geoserverLayer.bringToFront();
</script>
</body>
</html>
```
### 代码解释
- **引入库文件**：通过 CDN 引入了 Leaflet 和 Esri Leaflet 的 CSS 和 JavaScript 文件。
- **初始化地图**：创建一个 Leaflet 地图实例，并设置初始视图和缩放级别。
- **添加基础
图层**：使用 OpenStreetMap 作为基础
图层。
- **添加
GeoServer 图层**：使用 `L.esri.dynamicMapLayer` 创建一个动态地图
图层，并将其添加到地图上。需要将 `url` 替换为实际的
GeoServer WMS 服务地址，`layers` 数组中的值替换为要
显示的
图层 ID。
- **将
图层置于最上层**：使用 `bringToFront()` 方法将
GeoServer 图层置于地图的最上层。
### 注意事项
- 确保
GeoServer 的 WMS 服务是公开可访问的，或者在代码中添加适当的身份验证信息。
- 根据实际情况调整 `layers` 数组中的
图层 ID，以
显示正确的
GeoServer 图层。
订阅专栏 解锁全文
扫一扫
2309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
