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

核心思路：

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

具体步骤：

1. 加载 GeoJSON 数据:

   首先，你需要加载你的 GeoJSON 数据。假设你已经将 GeoJSON 数据存储在变量 loadedData 中。

2. 创建 LayerGroup (可选):

   如果你希望将多个 GeoJSON 图层组合在一起进行管理，可以使用 L.layerGroup() 创建一个图层组。

   var ciclList = L.layerGroup([DaisyLData, .....]);

3. 定义过滤函数：

   

   陌言AI

   陌言AI是一个一站式AI创作平台，支持在线AI写作，AI对话，AI绘画等功能

   下载

   创建一个名为 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。

4. 绑定事件到按钮：

   找到你的按钮元素，并为其添加点击事件监听器。当按钮被点击时，调用 filterData 函数。

   lnk6162.addEventListener("click", filterData);

   • lnk6162 是你的按钮元素。你需要根据你的 HTML 结构找到对应的元素。

完整示例代码：

    
    
    
    


    
Leaflet GeoJSON Filter Example
    Filter Epoch 2021 and Year 2022
    


    

注意事项：

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

总结：

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