10分钟掌握Leaflet GeoJSON数据获取，让地图渲染妙趣横生！

2023-08-10 17:13:59

Leaflet-ajax：解锁GeoJSON数据的强大地图渲染

在当今信息泛滥的时代，地图已成为数据可视化和地理分析中不可或缺的工具。而在地图开发中，GeoJSON数据作为一种常见的地理信息表达格式，承载着丰富的空间信息。要将这些数据呈现到地图上，你需要借助Leaflet-ajax ，一种异步JavaScript和XML技术，它能让你在不刷新整个网页的情况下与服务器通信。

一、踏上Leaflet-ajax之旅

安装Leaflet库：

npm install leaflet

安装Leaflet-ajax插件：

npm install leaflet-ajax

二、获取GeoJSON数据

创建地图容器：

<div id="map" style="width: 100%; height: 400px;"></div>

初始化地图对象：

var map = L.map('map').setView([39.9078, 116.39722], 13);

使用Leaflet-ajax获取GeoJSON数据：

L.geoJson(data, {
    style: function (feature) {
        return {
            color: feature.properties.color,
            weight: 2,
            opacity: 1
        };
    }
}).addTo(map);

三、展示GeoJSON数据

加载数据并解析：

L.geoJson(data).addTo(map);

设置数据样式：

var style = {
    color: "red",
    weight: 2,
    opacity: 0.5
};

应用样式：

L.geoJson(data, {style: style}).addTo(map);

四、代码示例

一个完整的代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-ajax@2.1.0/dist/leaflet.ajax.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 400px;"></div>

    <script>
        var map = L.map('map').setView([39.9078, 116.39722], 13);

        L.geoJson(data, {
            style: function (feature) {
                return {
                    color: feature.properties.color,
                    weight: 2,
                    opacity: 1
                };
            }
        }).addTo(map);
    </script>
</body>
</html>