根据Checkbox状态过滤Leaflet Geojson对象 [英] Filter Leaflet Geojson object based on Checkbox status

问题描述

我一直在尝试改编这个示例根据复选框ID过滤传单图层。它可以在启用的对象被填充并且相应的特征被过滤并添加到地图中。

I've been trying to adapt this example to filter a leaflet layer based on the checkbox ID. It kind of works where the enabled object gets filled and the corresponding feature is filtered and added to the map.

然而，当我取消选中框对象变为空但是该特征留在地图上，因为没有什么可以告诉我是否要删除。

However, when I uncheck the box object becomes empty but the feature remains on the map as there is nothing to tell if to be removed.

我需要在此处删除该功能吗？

What do I need to do here to remove the feature?

   function update() {
        var enabled = {};
        // Run through each checkbox and record whether it is checked. If it is,
        // add it to the object of types to display, otherwise do not.
        for (var i = 0; i < checkboxes.length; i++) {
          if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
         }
        L.geoJson(parishesData, {
        filter: function(feature, layer) {
            return (feature.properties.name in enabled);
            }
        }).addTo(map);
        console.log(enabled)
        };

推荐答案

每当你的脚本执行你的更新（）函数，它会创建一个新的 L.geoJson 组并将其添加到地图中。

Whenever your script executes your update() function, it creates a new L.geoJson group and adds it to the map.

在将新组添加到地图之前，您应该保留对该组的引用并将其从地图中删除。

You should keep a reference to that group and remove it from map before you add the new one to the map.

可能类似于：

var group;

function update() {
  var enabled = {};
  // Run through each checkbox and record whether it is checked. If it is,
  // add it to the object of types to display, otherwise do not.
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
  }
  if (group) {
    map.removeLayer(group);
  }
  group = L.geoJson(parishesData, {
    filter: function(feature, layer) {
      return (feature.properties.name in enabled);
    }
  }).addTo(map);
  console.log(enabled)
};

这篇关于根据Checkbox状态过滤Leaflet Geojson对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！