javascript - 根据复选框状态过滤 Leaflet Geojson 对象

Question

我一直在尝试适应这个example根据复选框 ID 过滤传单图层。它的工作原理是启用的对象被填充，相应的功能被过滤并添加到 map 中。

但是，当我取消选中框对象时，该框对象将变为空，但该功能仍保留在 map 上，因为没有任何信息可以判断是否要删除。

我需要在这里做什么才能删除该功能？

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

Answer 1

每当您的脚本执行 update() 函数时，它都会创建一个新的 L.geoJson 组并将其添加到 map 中。

您应该保留对该组的引用，并将其从 map 中删除，然后再将新组添加到 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)
};