本文将指导你如何在 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, .....]);
-
定义过滤函数：
创建一个名为 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: '© <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 图层过滤功能。 这种方法可以用于创建交互式地图应用，允许用户根据自己的需求筛选和显示地图数据。 记住，根据你的具体需求调整代码，并添加适当的错误处理和性能优化措施。
