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

如果用户只提交了一个复选框,地图会过滤我想要的内容,这样可以正常工作.但是我如何将多个值传递给它？

我见过人们建议用...

return (feature.properties[value] && feature.properties[value])

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

Answer 1

如果我理解正确,您应该遍历所有submittedValues数组项并执行测试.

例如,您可以submittedValues.every()用来测试每​​个选中的框值是否true为给定的feature:

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