传单:在 GeoJSON 层中使用动态过滤器 [英] Leaflet: Use dynamic filters in GeoJSON layer
问题描述
我已经很接近了,但我很难理解如何将多个用户提交的表单复选框值传递给 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屋!