leaflet加载wfs

要在 Leaflet 中加载 WFS（Web Feature Service），需要先使用适当的 WFS 插件。这里推荐使用 leaflet-wfst 插件。

首先，在 HTML 中引入以下文件：

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />

<!-- Leaflet JS -->
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- Leaflet WFST -->
<script src="https://unpkg.com/leaflet-wfst"></script>

接下来，创建一个 Leaflet map 对象并添加一个 WFS 图层：

// 创建 Leaflet map 对象
var map = L.map('map').setView([39.91, 116.38], 12);

// 创建 WFS 图层
var wfstLayer = L.WFS.source({
  url: 'http://localhost:8080/geoserver/wfs',
  typeName: 'myworkspace:mylayer',
  crs: L.CRS.EPSG4326,
  style: {
    color: 'red',
    weight: 2
  }
}).addTo(map);

在上面的代码中，需要修改以下参数：

- `url`：WFS 服务器的 URL 地址。
- `typeName`：WFS 服务中的图层名称。
- `crs`：地图的坐标系。
- `style`：图层的样式。

最后，记得在 CSS 中设置地图容器的大小：

#map {
  height: 400px;
}

这样就可以在 Leaflet 中加载 WFS 了。如果需要进一步的定制化配置，可以参考 leaflet-wfst 的文档。