leaflet加载GeoJson

Leaflet是一个轻量级的JavaScript库，用于创建交互式的地图。在 Leaflet 中加载 GeoJSON 数据非常简单，GeoJSON 是一种基于 JSON 格式的数据，通常用于表示地理空间特征，如点、线和多边形。

以下是使用 Leaflet 加载 GeoJSON 的基本步骤：

1. 首先，在HTML文件中引入 Leaflet 的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

2. 创建一个新的 Leaflet 地图实例，并设置其视口：

<div id="mapid" style="height: 500px;"></div>
<script>
var map = L.map('mapid').setView([51.505, -0.09], 13);
</script>

3. 使用 `L.geoJSON` 方法加载 GeoJSON 数据：

fetch('path_to_your_geojson_file.geojson')
.then(response => response.json())
.then(data => {
    var geojsonData = L.geoJSON(data);
    geojsonDataaddToMap(map);
});

在这里，你需要将 `'path_to_your_geojson_file.geojson'` 替换为实际的 GeoJSON 文件路径。`data.json()` 返回的是一个 Promise，当你获取到数据后，将其解析成 JSON，然后传递给 `L.geoJSON` 构造函数。

4. 最后，将 GeoJSON 添加到地图上：

function geojsonDataaddToMap(map) {
    geojsonData.addTo(map);
}