Повторно применить фильтр для GeoJSON в Leaflet - PullRequest
Новая
       6

Повторно применить фильтр для GeoJSON в Leaflet

0 голосов
/ 24 мая 2018

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

Но я вижу, что возвращается только последнее состояние (в данном случае, «плохо»).

Полагаю, мне нужно повторно применить фильтр или что-то подобное, поскольку Leaflet не запоминает его.

Как заставить работать кнопки фильтра?

1 Ответ

0 голосов
/ 24 мая 2018

Имейте в виду, что функция обратного вызова filter запускается один раз , когда создается экземпляр L.GeoJson.Leaflet не повторно применяет фильтр на L.GeoJson, когда слой (повторно) добавляется на карту.Это по замыслу.Вы можете проверить это, посмотрев исходный код для 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);
...