如何使用 nouislider 中的滑块过滤 Leaflet.js 上的聚类标记

Question

我在地图上有集群标记，我正在为我的滑块使用一个名为 nouislider 的库。我正在使用它来根据指定的距离范围显示某些标记。

我得到了这个用于标记的工作，但在集群标记上没有运气。它正在删除我所有的聚类标记而不是过滤它。我不确定如何处理这个问题。如果有人能指导我正确的方向，我将不胜感激。

这是我的代码的 link。请记住，我无法让滑块显示在 Jfiddle 上，并且那里也出现错误 -"L.geoJson is not a function"

这是我的过滤器，它适用于标记，但不适用于聚类标记，我认为问题是我没有过滤聚类标记，我不知道该怎么做。


        var slider = document.getElementById("slider");

        noUiSlider
          .create(slider, {
            start: [min + 1, max - 1],
            tooltips: true,
            connect: true,
            range: {
              min: min,
              max: max
            }
          })
          .on("slide", function(e) {
            console.log("e", e);
            surfSpotsGeoJSON.eachLayer(function(layer) {
              console.log("layer", layer);
              if (
                parseFloat(layer.feature.properties.distance) >=
                  parseFloat(e[0]) &&
                parseFloat(layer.feature.properties.distance) <=
                  parseFloat(e[1])
              ) {
                layer.addTo(map);
              } else {
                map.removeLayer(layer);
              }
            });
          });
      })
      .catch(err => console.log(err.message));
  }

Answer 1

你可能会对我的插件感兴趣Leaflet.MarkerCluster.LayerSupport:

Sub-plugin for Leaflet.markercluster plugin (MCG in short); brings compatibility with L.Control.Layers and other Leaflet plugins. I.e. everything that uses direct calls to map.addLayer and map.removeLayer.

另见

在你的情况下，你会检查你的 surfSpotsGeoJSON Leaflet GeoJSON 图层组，插件应该会处理剩下的事情。

如何使用 nouislider 中的滑块过滤 Leaflet.js 上的聚类标记

How to filter clustered markers on Leaflet.js using slider from nouislider

javascript

leaflet

nouislider

leaflet.markercluster