Leaflet中GeoJSON过滤器重新应用问题：按钮切换过滤状态失效

我明白你遇到的问题了——你修改了过滤变量stareInt后，重新添加图层却没生效，这是因为Leaflet的L.geoJSON在初始化时就已经执行了一次filter函数，之后修改变量不会自动重新过滤要素。下面给你两种可行的解决方案：

方法一：每次切换时重新创建GeoJSON图层（简单直观） #

把创建GeoJSON图层的逻辑封装成一个函数，每次点击按钮时先移除旧图层，再根据最新的stareInt值创建新图层并添加到地图上。

步骤1：封装创建图层的函数 #

// 保留原有全局变量
var stareInt = "start"; 
var elements; 
var geojsonStyle = { 
  radius: 6, 
  fillColor: "#6bad9f", 
  color: "#FFF", 
  className: 'point', 
  pane: "pointPanel", 
  weight: 1, 
  opacity: 0.9, 
  fillOpacity: 0.8 
};

// 封装更新图层的函数
function updateGeoJSONLayer() {
  // 如果已有图层，先移除
  if (elements) {
    map.removeLayer(elements);
  }
  // 根据当前stareInt创建新的GeoJSON图层
  elements = L.geoJSON(elem_build, {
    pointToLayer: function (feature, latlng) {
      return new L.circleMarker(latlng, geojsonStyle).on('click', function() {
        this.bindPopup(feature.properties.grad_int).openPopup();
      });
    },
    filter: function(feature) {
      if (stareInt === "01") {
        return feature.properties.grad_int === "very good";
      } else if (stareInt === "02") {
        return feature.properties.grad_int === "good";
      } else {
        return feature.properties.grad_int === "bad";
      }
    },
    onEachFeature: onEachFeature
  }).addTo(map);
}

步骤2：修改按钮点击事件 #

// 按钮A：切换到"very good"过滤
$("#buttonA").click(function() {
  stareInt = "01";
  updateGeoJSONLayer();
});

// 按钮B：切换到"good"过滤（示例）
$("#buttonB").click(function() {
  stareInt = "02";
  updateGeoJSONLayer();
});

// 按钮C：切换到"bad"过滤（示例）
$("#buttonC").click(function() {
  stareInt = "start";
  updateGeoJSONLayer();
});

这种方法逻辑简单易懂，适合数据量不大的场景。

方法二：使用setFilter方法（高效推荐） #

Leaflet 1.0及以上版本支持setFilter方法，它可以直接更新GeoJSON图层的过滤器，不需要重新创建整个图层，性能更优，尤其适合大数据量的情况。

步骤1：初始化图层并封装过滤器函数 #

var stareInt = "start"; 
var geojsonStyle = { 
  radius: 6, 
  fillColor: "#6bad9f", 
  color: "#FFF", 
  className: 'point', 
  pane: "pointPanel", 
  weight: 1, 
  opacity: 0.9, 
  fillOpacity: 0.8 
};

// 封装过滤器函数，避免重复代码
function getCurrentFilter() {
  return function(feature) {
    if (stareInt === "01") {
      return feature.properties.grad_int === "very good";
    } else if (stareInt === "02") {
      return feature.properties.grad_int === "good";
    } else {
      return feature.properties.grad_int === "bad";
    }
  };
}

// 初始化GeoJSON图层并添加到地图
var elements = L.geoJSON(elem_build, {
  pointToLayer: function (feature, latlng) {
    return new L.circleMarker(latlng, geojsonStyle).on('click', function() {
      this.bindPopup(feature.properties.grad_int).openPopup();
    });
  },
  onEachFeature: onEachFeature
}).addTo(map);

// 设置初始过滤器
elements.setFilter(getCurrentFilter());

步骤2：修改按钮点击事件 #

$("#buttonA").click(function() {
  stareInt = "01";
  elements.setFilter(getCurrentFilter()); // 直接更新过滤器
});

$("#buttonB").click(function() {
  stareInt = "02";
  elements.setFilter(getCurrentFilter());
});

$("#buttonC").click(function() {
  stareInt = "start";
  elements.setFilter(getCurrentFilter());
});

这种方法不需要反复创建和销毁图层，只需要更新过滤器规则，Leaflet会自动重新渲染符合条件的要素，效率更高。

你可以根据自己的项目需求选择其中一种方法，两种都能解决你遇到的过滤状态切换失效问题~

内容的提问来源于stack exchange，提问作者Cezar B