Как отфильтровать кластерные маркеры на Leaflet.js с помощью слайдера от nouislider - PullRequest
Новая
       32

Как отфильтровать кластерные маркеры на Leaflet.js с помощью слайдера от nouislider

1 голос
/ 03 июля 2019

У меня есть кластерные маркеры на карте, и я использую библиотеку nouislider для своего слайдера.Я использую это, чтобы показать определенные маркеры, основанные на диапазоне указанного расстояния.

Я получил эту работу для маркеров, но не повезло с кластерными маркерами.Он удаляет все мои кластерные маркеры, а не фильтрует их.Я не уверен, как подойти к этому.Буду признателен, если кто-то может направить меня в правильном направлении.

Вот ссылка на мой код.Пожалуйста, помните, что я не могу заставить слайдер отображаться на Jfiddle, а также там есть ошибка - «L.geoJson - это не функция»

Jifiddle

это мой фильтр, который работает для маркеров, но не для кластерных маркеров, я думаю, проблема в том, что я не фильтрую кластерные маркеры, и я не уверен, как это сделать.


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

1 Ответ

0 голосов
/ 03 июля 2019

Возможно, вам будет интересен мой плагин Leaflet.MarkerCluster.LayerSupport :

Подплагин для плагина Leaflet.markercluster (MCG вкратце); обеспечивает совместимость с L.Control.Layers и другими плагинами Leaflet. То есть все, что использует прямые звонки на map.addLayer и map.removeLayer.

См. Также Как использовать слайдер для листовок вместе с markercluster в Javascript?

В вашем случае вы должны проверить свою surfSpotsGeoJSON Leaflet GeoJSON Layer Group, а плагин должен позаботиться обо всем остальном.

...