根据Checkbox状态过滤Leaflet Geojson对象

时间:2016-08-09 08:06:09

标签: javascript checkbox leaflet

我一直在尝试调整此example以根据复选框ID过滤传单图层。它可以在启用的对象被填充并且相应的特征被过滤并添加到地图中时起作用。

然而,当我取消选中框对象变空时,该功能仍保留在地图上,因为没有什么可以判断是否要删除。

我需要在此处执行哪些操作才能删除该功能?

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

1 个答案:

答案 0 :(得分:3)

每当您的脚本执行update()功能时,它都会创建一个新的L.geoJson组并将其添加到地图中。

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

可能类似于:

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