Leaflet地图下拉菜单筛选功能搭建遇阻求助

你的筛选功能失效主要有以下几个关键问题：

1. onEachFeature 参数错误 #

在筛选逻辑的L.geoJSON配置中，你写了onEachFeature: layer，这里的layer是之前创建的GeoJSON图层对象，而onEachFeature需要传入一个函数（用来绑定弹窗等操作），不是图层对象。这会导致新创建的筛选图层无法正确绑定弹窗，同时干扰图层的正常初始化。

2. 潜在的字符串匹配问题 #

要确保下拉选择框的选项值（miSelect）和GeoJSON中tematica属性的字符串完全一致（包括大小写、空格，比如"Medio Ambiente"不能写成"medio ambiente"）。

3. 冗余的图层添加操作 #

代码里重复执行了map.addLayer(markers);，属于冗余代码，可移除其中一次。

修复后的完整代码 #

const map = L.map('map').setView([40.382439468640214, -3.745878127504685], 6);

const tileLayer = 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);

const geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#37b18c",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

const markers = L.markerClusterGroup();

// 复用弹窗绑定函数，避免重复代码
function bindPopupToFeature(feature, layer) {
    layer.bindPopup(`<h1>${feature.properties.name}</h1><p>Tematica: ${feature.properties.tematica}</p><p>${feature.properties.bio}</p>`);
}

var initialLayer = L.geoJson(data, {
    onEachFeature: bindPopupToFeature,
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
});
markers.addLayer(initialLayer);
map.addLayer(markers);

function tematicaSelect() {
    var miSelect = document.getElementById("ambito").value;
        
    var filteredLayer = L.geoJSON(data, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        },
        filter: function(feature) {                              
            if(miSelect !== "TODOS") {
                return feature.properties.tematica === miSelect;
            } else {
                return true;
            }
        },  
        onEachFeature: bindPopupToFeature // 使用复用的弹窗绑定函数
    });     

    markers.clearLayers();
    markers.addLayer(filteredLayer);
}

// 给下拉框绑定change事件，确保选择时触发筛选
document.getElementById("ambito").addEventListener("change", tematicaSelect);

额外检查点 #

• 确认下拉选择框（id为ambito）的选项值和GeoJSON中tematica的取值完全一致，示例HTML结构如下：

  <select id="ambito">
      <option value="TODOS">Todos</option>
      <option value="Medio Ambiente">Medio Ambiente</option>
      <!-- 其他对应NGO主题的选项 -->
  </select>
  

• 检查data变量是否正确加载了GeoJSON数据，确保没有作用域或加载顺序问题。

内容的提问来源于stack exchange，提问作者Ed in the Cave