javascript - Leaflet:在 GeoJSON 层中使用动态过滤器

Question

我已经很接近了，但我很难理解如何将多个用户提交的表单复选框值传递给 Leaflet geoJSON 过滤器函数并只显示这些点。

到目前为止我有什么......

$('#map-filters').on("submit", function(e){
    e.preventDefault();
    map.spin(true,spinOpts);
    submittedValues = $(this).serializeArray();
    var filteredLocations = L.markerClusterGroup({ chunkedLoading: true }),
        filteredLocationsAjax = new L.GeoJSON.AJAX(Routes.filtered_locations_path({format: 'json'}), {
          style: style,
          pointToLayer: pointToLayer,
          onEachFeature: onEachFeature,
          filter: function(feature, layer) {
            if(submittedValues.length <= 1) {
              return feature.properties[submittedValues[0].value];
            } else {
              How do I return multiple values?
            }
          }
        });
    filteredLocationsAjax.on('data:loaded', function () {
      map.removeLayer(allLocations);
      filteredLocations.addLayer(filteredLocationsAjax);
      map.addLayer(filteredLocations);
      map.spin(false);
    });
  });

还有我的 geoJSON 的例子...

{
  type: "Feature",
  geometry: {
  type: "Point",
  coordinates: [
    "-76.286955",
    "45.335969"
  ]
},
  properties: {
    id: 2,
    name: "Mississippi River",
    body_of_water: null,
    url: "http://0.0.0.0:5000/locations/2",
    observations_count: 1,
    ph: true,
    water_temperature: true,
    oxygen: true,
    phosphates_threshold: true,
    clarity: true,
    nitrites: true,
    nitrates: true,
    issues_count: 3,
    water_quality: true,
    algae: true
  }
}

如果用户只提交了一个复选框，这会很好地工作， map 过滤正是我想要的。但是我如何将多个值传递给它呢？

我看到有人建议使用...

返回 (feature.properties[value] && feature.properties[value])

但是我如何将多个值传递到这样的 return 语句中，因为用户可以选择 1 或 20 个复选框。

Answer 1

如果我没理解错的话，你应该循环遍历所有 submittedValues 数组项并执行测试。

例如你可以使用 submittedValues.every()测试给定 feature 的每个复选框值是否为 true:

filter: function (feature, layer) {
  return submittedValues.every(function (element) {
    return feature.properties[element.value];
  });
}

当然，您可以使用经典的 for 循环执行完全相同的操作:

filter: function (feature, layer) {
  for (var i = 0; i < submittedValues.length; i += 1) {
    if (!feature.properties[submittedValues[i].value]) {
        return false;
    }
  }
  return true;
}