传单:在 GeoJSON 层中使用动态过滤器 [英] Leaflet: Use dynamic filters in GeoJSON layer

查看:34
本文介绍了传单:在 GeoJSON 层中使用动态过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I've got this pretty close but I'm struggling to understand how to pass multiple user submitted form checkbox values through to the Leaflet geoJSON filter function and only display those points.

到目前为止我所拥有的......

What I have so far...

$('#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 示例...

And an example of my 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
  }
}

如果用户只提交了一个复选框,这很好用,地图过滤器正是我想要的.但是我如何将多个值传递给这个?

This works fine if the user has only submitted one checkbox, the map filters exactly how I want. But how would I pass multiple values to this?

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

I've seen people suggest using...

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

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

But how would I pass multiple values into a return statement like that, as the user could select 1 or 20 checkboxes.

推荐答案

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

If I understand correctly, you should just loop through all your submittedValues array items and perform your test.

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

E.g. you could use submittedValues.every() to test that every checked box value is true for the given feature:

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

当然,你可以用经典的 for 循环做同样的事情:

Of course you could do exactly the same with a classic for loop:

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

这篇关于传单:在 GeoJSON 层中使用动态过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆