javascript - 传单 GeoJSON 过滤器

Question

我已经设法在人们的帮助下完成了以下工作，但遇到了 JS 问题。目前，我的问题是地图现在只显示 GeoJSON 中鲤鱼和丁鱼都 = 1 的两个标记。我想做的是更动态的事情：

1. 我想将复选框默认关闭
2. 我还想解决只有匹配 carp = 1 和 tench = 1 的结果才显示在地图上的问题。我希望过滤器对每个选择都是动态的，而不是限制关闭的结果

https://jsfiddle.net/chrisjenner/0ez7k8um/

过滤器代码：

<div class="input" id="carp">
      <input type="checkbox" class="carp" name="1" value="1" checked="true">
      <label for="1">Carp</label>
    </div>

    <div class="input" id="tench">
      <input type="checkbox" class="tench" name="2" value="1" checked="true">
      <label for="2">Tench</label>
    </div>

const lakes = L.geoJSON(null, {
  style: function(feature) {
    return {
      color: feature.properties.color
    };
  },
  filter: (feature) => {
    const isCarpChecked = checkboxStates.carp.includes(feature.properties.carp)
    const isTenchChecked = checkboxStates.tench.includes(feature.properties.tench)
    return isCarpChecked && isTenchChecked //only true if both are true
  }
}).bindPopup(function(layer) {
  return layer.feature.properties.name;
}).addTo(map);

function updateCheckboxStates() {
  checkboxStates = {
    carp: [],
    tench: []
  }

for (let input of document.querySelectorAll('input')) {
    if (input.checked) {
      var numValue = parseInt(input.value);
      switch (input.className) {
        case 'carp':
          checkboxStates.carp.push(numValue);
          break
        case 'tench':
          checkboxStates.tench.push(numValue);
          break
      }
    }
  }
}

for (let input of document.querySelectorAll('input')) {
    input.onchange = (e) => {
    lakes.clearLayers()
    updateCheckboxStates()
    lakes.addData(lakes_data)
  }
}


updateCheckboxStates()
lakes.addData(lakes_data)

标签： javascriptjsonfilterleafletfiltering