Leaflet 中 GeoJSON 图层组的动态过滤教程-js教程-PHP中文网

Leaflet 中 GeoJSON 图层组的动态过滤教程

聖光之護

发布： 2025-08-17 16:22:17

原创

344人浏览过

leaflet 中 geojson 图层组的动态过滤教程

本文档旨在提供一种在 Leaflet 地图中动态过滤 GeoJSON 图层组的方法。通过编写 JavaScript 函数，用户可以根据要素属性（如 epoch 和 year）来控制地图上显示的要素。本文将提供详细的代码示例和步骤说明，帮助开发者实现交互式地图过滤功能。

在 Leaflet 地图中，经常需要根据用户的交互动态地过滤 GeoJSON 数据，只显示满足特定条件的要素。例如，根据时间范围、属性值等条件进行筛选。以下介绍一种实现此功能的通用方法。

实现步骤

准备 GeoJSON 数据和 Leaflet 地图:

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

首先，确保你已经加载了 GeoJSON 数据，并创建了一个 Leaflet 地图实例。假设你的 GeoJSON 数据存储在 loadedData 变量中，并且你已经创建了一个名为 markers 的 L.layerGroup 用于存放 GeoJSON 图层。

var markers = L.layerGroup().addTo(map); // 创建图层组并添加到地图
var loadedData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "NAME": "Feature 1",
                "epoch": "2021",
                "year": "2022",
                "SEASON": "2021"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [ -73.9857, 40.7589 ]
            }
        },
         {
            "type": "Feature",
            "properties": {
                "NAME": "Feature 2",
                "epoch": "2022",
                "year": "2023",
                "SEASON": "2022"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [ -73.9857, 40.7589 ]
            }
        }
    ]
};

登录后复制

创建过滤函数:

创建一个 JavaScript 函数，该函数将根据指定的条件过滤 GeoJSON 数据。此函数使用 L.GeoJSON 并利用其 filter 选项。
```
function filterData(epochValue, yearValue){
    markers.clearLayers(); // 清除现有图层

    let filteredData = L.GeoJSON.geometryToLayer(loadedData, {
        onEachFeature: function (feature, layer) {
            layer.bindTooltip(feature.properties.NAME+' ('+feature.properties.year+')');
        },
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng); // 替换 ptl
        },
        filter: function(feature) {
            if(feature.properties['epoch'] == epochValue && feature.properties['year'] == yearValue){
                return true; // 保留满足条件的要素
            }
            return false; // 过滤掉不满足条件的要素
        }
    }).addTo(markers); // 将过滤后的图层添加到图层组
}
```
登录后复制
代码解释:

豆包AI编程
豆包推出的AI编程助手

483

查看详情
- markers.clearLayers(): 在添加新的过滤数据之前，清除图层组中现有的所有图层，避免重复显示。
- L.GeoJSON: 使用 Leaflet 的 L.GeoJSON 类来处理 GeoJSON 数据。
- onEachFeature: 一个函数，将在每个 feature 被添加到地图时调用。你可以在这里设置图层的样式、绑定弹出窗口等。
- pointToLayer: 一个函数，用于将 GeoJSON 中的 Point 特征转换为 Leaflet 图层。这里使用 L.marker 创建一个简单的标记。你可以根据需要自定义标记的样式。
- filter: 这是关键部分。它是一个函数，接收每个 GeoJSON 特征作为参数。如果该函数返回 true，则该特征将被添加到地图上；如果返回 false，则该特征将被过滤掉。在示例中，我们检查 feature.properties['epoch'] 和 feature.properties['year'] 是否等于指定的值。
- .addTo(markers): 将过滤后的 L.GeoJSON 图层添加到 markers 图层组中，使其显示在地图上。
绑定事件监听器:

将过滤函数绑定到 HTML 按钮或其他交互元素。当用户点击按钮时，调用该函数并传递相应的过滤条件。
```
<button id="filterButton">Filter (Epoch 2021, Year 2022)</button>

<script>
    document.getElementById("filterButton").addEventListener("click", function() {
        filterData("2021", "2022"); // 调用过滤函数
    });
</script>
```
登录后复制
代码解释:
- document.getElementById("filterButton"): 获取 HTML 中 id 为 "filterButton" 的按钮元素。
- .addEventListener("click", function() { ... }): 为按钮添加一个点击事件监听器。当按钮被点击时，将执行该函数。
- filterData("2021", "2022"): 在按钮点击事件处理函数中，调用 filterData 函数，并传递 "2021" 作为 epochValue 和 "2022" 作为 yearValue。这将导致地图上只显示 epoch 属性为 "2021" 且 year 属性为 "2022" 的要素。

完整示例

<!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/miZyoHS5obscp+Wnk=" 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>
    <div id="map"></div>
    <button id="filterButton">Filter (Epoch 2021, Year 2022)</button>

    <script>
        var map = L.map('map').setView([40.7589, -73.9857], 12);

        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);

        var loadedData = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        "NAME": "Feature 1",
                        "epoch": "2021",
                        "year": "2022",
                        "SEASON": "2021"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [ -73.9857, 40.7589 ]
                    }
                },
                 {
                    "type": "Feature",
                    "properties": {
                        "NAME": "Feature 2",
                        "epoch": "2022",
                        "year": "2023",
                        "SEASON": "2022"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [ -73.9857, 40.7589 ]
                    }
                }
            ]
        };

        function filterData(epochValue, yearValue){
            markers.clearLayers();

            let filteredData = L.GeoJSON.geometryToLayer(loadedData, {
                onEachFeature: function (feature, layer) {
                    layer.bindTooltip(feature.properties.NAME+' ('+feature.properties.year+')');
                },
                pointToLayer: function (feature, latlng) {
                    return L.marker(latlng);
                },
                filter: function(feature) {
                    if(feature.properties['epoch'] == epochValue && feature.properties['year'] == yearValue){
                        return true;
                    }
                    return false;
                }
            }).addTo(markers);
        }

        document.getElementById("filterButton").addEventListener("click", function() {
            filterData("2021", "2022");
        });

        // 初始化显示所有数据
        filterData(null, null);

    </script>
</body>
</html>

登录后复制

注意事项