利用 Leaflet 实现 GeoJSON 图层按属性过滤显示-js教程-PHP中文网

利用 Leaflet 实现 GeoJSON 图层按属性过滤显示

碧海醫心

发布： 2025-08-17 16:32:18

原创

621人浏览过

利用 leaflet 实现 geojson 图层按属性过滤显示

本文将指导你如何在 Leaflet 地图中，针对包含多个 GeoJSON 特征的图层，实现基于属性的动态过滤功能。通过创建一个过滤函数，并将其绑定到按钮点击事件，用户可以根据指定的属性值（例如 epoch 和 year）筛选并显示特定的 GeoJSON 特征，从而实现地图数据的交互式展示。

核心思路：

创建 GeoJSON 图层： 将 GeoJSON 数据加载到 Leaflet 地图中，并添加到 LayerGroup 或 FeatureGroup 中。
定义过滤函数： 创建一个函数，该函数接收 GeoJSON 特征作为输入，并根据特征的属性值返回 true 或 false，决定是否显示该特征。
绑定事件： 将过滤函数绑定到按钮点击事件或其他交互事件上。当事件触发时，清除现有图层，然后使用过滤函数重新创建 GeoJSON 图层。

具体步骤：

加载 GeoJSON 数据:

首先，你需要加载你的 GeoJSON 数据。假设你已经将 GeoJSON 数据存储在变量 loadedData 中。
创建 LayerGroup (可选):

如果你希望将多个 GeoJSON 图层组合在一起进行管理，可以使用 L.layerGroup() 创建一个图层组。
```
var ciclList = L.layerGroup([DaisyLData, .....]);
```
登录后复制
定义过滤函数：

AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

创建一个名为 filterData 的函数。该函数接收 GeoJSON 特征作为输入，并根据 feature.properties 中的 epoch 和 year 属性值进行过滤。如果 epoch 等于 '2021' 且 year 等于 '2022'，则返回 true，否则返回 false。
```
function filterData() {
    markers.clearLayers(); // 清除现有图层
    let filteredData = new L.GeoJSON(loadedData, {
        onEachFeature: function (feature, layer) {
            layer.bindTooltip(feature.properties.NAME+' ('+feature.properties.year+')');
        },
        pointToLayer: ptl, // 使用自定义 pointToLayer 函数 (如果需要)
        filter: function(feature) {
            if(feature.properties['epoch'] == '2021' && feature.properties['year'] == '2022'){
                return true;
            }
            return false; // 默认情况下，不显示该特征
        }
    }).addTo(markers);
}
```
登录后复制
- markers.clearLayers(): 确保在添加新的过滤后的数据之前，先清除地图上已有的图层，避免重复显示。
- onEachFeature: 这个函数允许你对每个 feature 进行额外的操作，例如绑定 tooltip。
- pointToLayer: 这个函数允许你自定义如何将 GeoJSON 点数据转换为 Leaflet 图层。如果你的 GeoJSON 数据包含点数据，并且你想自定义点的样式，可以使用 pointToLayer 选项。
- filter: 这是核心的过滤函数。它接收每个 feature 作为参数，并返回 true 或 false，决定是否显示该 feature。
绑定事件到按钮：

找到你的按钮元素，并为其添加点击事件监听器。当按钮被点击时，调用 filterData 函数。
```
lnk6162.addEventListener("click", filterData);
```
登录后复制
- lnk6162 是你的按钮元素。你需要根据你的 HTML 结构找到对应的元素。

完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet GeoJSON Filter</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obscpJjvU=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <style>
        #map { height: 400px; }
    </style>
</head>
<body>
    <h1>Leaflet GeoJSON Filter Example</h1>
    <button id="filterButton">Filter Epoch 2021 and Year 2022</button>
    <div id="map"></div>

    <script>
        // 模拟 GeoJSON 数据
        var loadedData = {
            "type": "FeatureCollection",
            "features": [
                { "type": "Feature", "properties": { "NAME": "Point 1", "epoch": "2021", "year": "2022" }, "geometry": { "type": "Point", "coordinates": [116.4, 39.9] } },
                { "type": "Feature", "properties": { "NAME": "Point 2", "epoch": "2022", "year": "2023" }, "geometry": { "type": "Point", "coordinates": [116.5, 40.0] } },
                { "type": "Feature", "properties": { "NAME": "Point 3", "epoch": "2021", "year": "2022" }, "geometry": { "type": "Point", "coordinates": [116.6, 39.8] } }
            ]
        };

        var map = L.map('map').setView([39.9, 116.5], 11);

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

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

        function ptl(feature, latlng) { // 默认的 pointToLayer 函数
            return L.marker(latlng);
        }

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

        document.getElementById("filterButton").addEventListener("click", filterData);

        // 初始加载所有数据
        filterData();
    </script>
</body>
</html>

登录后复制

注意事项：

数据类型： 确保 feature.properties['epoch'] 和 feature.properties['year'] 的值是字符串类型。如果它们是数字类型，你需要将比较条件修改为 feature.properties['epoch'] == 2021 和 feature.properties['year'] == 2022。
性能： 如果你的 GeoJSON 数据非常大，频繁地清除和重新创建图层可能会影响性能。可以考虑使用其他方法，例如隐藏或显示现有图层，而不是重新创建它们。
错误处理： 在实际应用中，你应该添加错误处理机制，以处理 GeoJSON 数据加载失败或属性不存在的情况。
自定义样式: 你可以使用 style 选项自定义 GeoJSON 图层的样式。

总结：

通过以上步骤，你就可以在 Leaflet 地图中实现基于属性的 GeoJSON 图层过滤功能。这种方法可以用于创建交互式地图应用，允许用户根据自己的需求筛选和显示地图数据。记住，根据你的具体需求调整代码，并添加适当的错误处理和性能优化措施。

以上就是利用 Leaflet 实现 GeoJSON 图层按属性过滤显示的详细内容，更多请关注php中文网其它相关文章！