基于 Leaflet 的 GeoJSON 图层过滤教程-js教程-PHP中文网

基于 Leaflet 的 GeoJSON 图层过滤教程

心靈之曲

发布： 2025-08-17 17:48:01

原创

748人浏览过

基于 leaflet 的 geojson 图层过滤教程

本文档旨在指导 Leaflet 用户如何根据 GeoJSON 数据的属性，动态地过滤并显示地图上的图层。通过示例代码，详细讲解如何创建一个过滤函数，并将其与按钮点击事件关联，实现按需显示特定属性的 GeoJSON 图层，提升地图交互性和数据可视化能力。

在 Leaflet 中，经常需要根据 GeoJSON 数据中的属性来控制地图上显示的图层。本教程将介绍如何创建一个过滤函数，并通过按钮点击事件来动态地添加或移除特定属性的 GeoJSON 图层。

实现步骤

定义 GeoJSON 数据和图层组：

首先，你需要有一个包含 GeoJSON 数据的变量（例如 loadedData）和一个用于存放图层的 L.layerGroup 对象（例如 markers）。loadedData 变量包含你的 GeoJSON 数据，它是一个标准的 GeoJSON 对象。markers 对象是一个图层组，用于管理地图上的所有标记。

var ciclList = L.layerGroup([DaisyLData, .....]); // 初始化图层组
var loadedData = yourGeoJSONData; // 你的 GeoJSON 数据
var markers = L.layerGroup(); // 创建一个空的图层组

登录后复制

创建过滤函数：

创建一个名为 filterData 的函数。这个函数将清除当前的 markers 图层组，并使用过滤后的 GeoJSON 数据创建一个新的 L.GeoJSON 图层，并将其添加到 markers 图层组中。

function filterData() {
    markers.clearLayers(); // 清除现有图层

    let filteredData = L.GeoJSON(loadedData, {
        onEachFeature: oef, // 可选：用于绑定弹出窗口或执行其他操作
        pointToLayer: ptl, // 可选：用于自定义标记的样式
        filter: function(feature) {
            // 在这里添加你的过滤条件
            if (feature.properties['epoch'] == '2021' && feature.properties['year'] == '2022') {
                return true; // 返回 true 表示该要素应该显示
            }
            return false; // 返回 false 表示该要素应该隐藏
        }
    }).addTo(markers); // 将过滤后的图层添加到图层组
}

登录后复制

在 filter 函数中，你可以根据 feature.properties 中的任何属性来设置过滤条件。上面的例子中，我们筛选出 epoch 属性值为 '2021' 且 year 属性值为 '2022' 的要素。onEachFeature 和 pointToLayer 是可选的，用于自定义每个要素的行为和样式。

绑定按钮点击事件：

将 filterData 函数绑定到按钮的点击事件上。当用户点击按钮时，filterData 函数将被调用，从而更新地图上的图层。

lnk6162.addEventListener("click", function() {
    filterData(); // 调用过滤函数
});

登录后复制

确保 lnk6162 是你按钮的 DOM 元素。

可选：定义 onEachFeature 和 pointToLayer 函数：

如果需要，你可以自定义 onEachFeature 和 pointToLayer 函数来进一步控制图层的行为和样式。

function oef(feature, layer) {
    layer.bindTooltip(feature.properties.NAME + ' (' + feature.properties.year + ')');
}

function ptl(feature, latlng) {
    // 自定义标记样式
    return L.circleMarker(latlng, {
        radius: 5,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    });
}

登录后复制

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet GeoJSON Filter</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map { width: 600px; height: 400px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <button id="filterButton">Filter Data</button>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        // 示例 GeoJSON 数据
        var loadedData = {
            "type": "FeatureCollection",
            "features": [
                { "type": "Feature", "properties": { "NAME": "Point A", "epoch": "2021", "year": "2022" }, "geometry": { "type": "Point", "coordinates": [ -73.9857, 40.7589 ] } },
                { "type": "Feature", "properties": { "NAME": "Point B", "epoch": "2022", "year": "2023" }, "geometry": { "type": "Point", "coordinates": [ -74.0060, 40.7128 ] } },
                { "type": "Feature", "properties": { "NAME": "Point C", "epoch": "2021", "year": "2021" }, "geometry": { "type": "Point", "coordinates": [ -73.9683, 40.7776 ] } }
            ]
        };

        var map = L.map('map').setView([40.7484, -73.9857], 12);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var markers = L.layerGroup().addTo(map);

        function oef(feature, layer) {
            layer.bindTooltip(feature.properties.NAME + ' (' + feature.properties.year + ')');
        }

        function ptl(feature, latlng) {
            return L.circleMarker(latlng, {
                radius: 5,
                fillColor: "#ff7800",
                color: "#000",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.8
            });
        }

        function filterData() {
            markers.clearLayers();
            let filteredData = L.GeoJSON(loadedData, {
                onEachFeature: oef,
                pointToLayer: ptl,
                filter: function(feature) {
                    if (feature.properties['epoch'] == '2021' && feature.properties['year'] == '2022') {
                        return true;
                    }
                    return false;
                }
            }).addTo(markers);
        }

        var filterButton = document.getElementById("filterButton");
        filterButton.addEventListener("click", function() {
            filterData();
        });

        // 初始加载所有数据
        L.GeoJSON(loadedData, {
            onEachFeature: oef,
            pointToLayer: ptl
        }).addTo(markers);
    </script>
</body>
</html>

登录后复制

注意事项

确保你的 GeoJSON 数据格式正确，并且属性名称与过滤条件中的名称一致。
clearLayers() 方法会移除图层组中的所有图层，包括瓦片图层。如果你只想移除 GeoJSON 图层，需要更精确地管理图层。
如果地图消失，通常是因为 loadedData 变量没有正确加载 GeoJSON 数据，或者过滤条件过于严格导致没有要素显示。检查你的数据和过滤条件。
onEachFeature 和 pointToLayer 函数是可选的，但它们可以让你更灵活地控制图层的行为和样式。

总结

通过本教程，你学会了如何在 Leaflet 中根据 GeoJSON 数据的属性来动态地过滤和显示图层。这种方法可以用于创建交互式地图，让用户根据自己的需求来查看特定的数据。记住，关键在于创建一个正确的过滤函数，并将其绑定到适当的事件上。实践是最好的老师，尝试修改代码，添加更多的过滤条件，来掌握这项技能。

以上就是基于 Leaflet 的 GeoJSON 图层过滤教程的详细内容，更多请关注php中文网其它相关文章！