在 Leaflet 中为 GeoJSON 重新应用过滤器

Question

在 Leaflet 中，我使用变量在 GeoJSON 的过滤器中插入条件，如下所示：

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


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, layer) {    
  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);

通过单击按钮激活过滤器，如下所示：

$("#buttonA").click(function() {
 map.removeLayer(elements);
 stareInt= "01";
 map.addLayer(elements);
});

但我看到只返回最后一个状态（在本例中，'bad'）。

我想我必须重新应用过滤器或类似的东西，因为 Leaflet 不记得了。

如何让过滤器按钮起作用？

Answer 1

请记住，当您的 L.GeoJson 被实例化时，filter 回调函数会运行一次。当图层被（重新）添加到地图时，Leaflet 不会在 L.GeoJson 上重新应用过滤器。这是设计使然。您可以通过查看 the source code for L.GeoJson.

来检查这一点

一种方法是拥有三个不同的 L.GeoJson 实例，每个实例应用不同的过滤器：

var elements_verygood = L.geoJson(elem_build, {
    filter: function(feat) { return feat.properties.grad_int == "very good"); }
});

var elements_good = L.geoJson(elem_build, {
    filter: function(feat) { return feat.properties.grad_int == "good"); }
});

var elements_bad = L.geoJson(elem_build, {
    filter: function(feat) { return feat.properties.grad_int == "bad"); }
});

然后您可以使用外部按钮切换内容：

document.getElementById("buttonA").addEventListener('click', function() {
    map.removeLayer(elements_good);
    map.removeLayer(elements_bad);
    map.addLayer(elements_verygood);
});

但这也是使用 L.Control.Layers:

的好场景

L.control.layers({}, {
    "Very good": elements_verygood,
    "Good": elements_good,
    "Bad": elements_bad,
}).addTo(map);

在 Leaflet 中为 GeoJSON 重新应用过滤器

Reapply filter for GeoJSON in Leaflet

javascript

geojson

leaflet