LeafletJS中的动态可见层标记

Question

我正在尝试在地图上呈现 5 组数据，一次一组，可由用户选择。

我使用层来存储每个集合，我可以在它们之间切换 - 效果很好。

我希望能够根据用户输入过滤每个集合。我正在使用L.layerGroup但尝试在加载时将我的数据重新格式化为 GeoJSON，以便我可以使用内置的过滤器功能。这似乎只有在我删除图层并重新添加每个标记时才有效。

这里的例子：http : //jsfiddle.net/callum/5sunB/

对于 1000 点，在我的系统上大约需要 200 毫秒，这太慢了。

有没有办法仅显示/隐藏基于过滤器功能的图层中已有的标记？

谢谢。

Answer 1

并不真地。您可以保存标记，然后将它们添加到地图中比重新创建它们然后添加它们更快。

例如，

var markers = new Array();
...
// create a marker using some unique id and save it to the markers array
var i = feature.properties.id;
markers[i] = L.circleMarker(latlng, {
        ....
        });
return markers[i];

然后当你过滤（点击或其他事件）时，清除标记层并重新添加匹配的（保存的）标记：

if (map.hasLayer(marker_layer)) {
    map.removeLayer(marker_layer);
}
marker_layer = new L.featureGroup();
// filter criteria here
for (var i = 0; i < src_data.features.length; i++) {
    var feature = src_data.features[i];
    if (feature.properties.hits >= n1 && feature.properties.hits <= n2) {
      marker_layer.addLayer(markers[i]);
    }
}
marker_layer.addTo(map);

我在这里更新了您的 JSFiddle：http : //jsfiddle.net/5sunB/5/，因此您可以比较重新创建过滤标记与仅重新添加它们。