如何在 Javascript 中使用 leaflet slider 和 markercluster？

Question

我正在制作一个使用滑块显示或隐藏标记的地图，我想添加聚类功能，每个单独的功能都很好，但我希望滑块显示标记，如果标记非常接近使用集群。问题是，个人和标记集群都在显示，我希望显示的标记集群而不是一直存在的集群

 <script type="text/javascript">
  var sliderControl = null;
                    //creating layers
                    var cities = new L.LayerGroup();
                    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenstreetMap</a> contributors, ' +
                    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
                    mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';
                    var grayscale = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {id: 'remote-sensing.n8k508ak', attribution: mbAttr, accessToken: 'pk.eyJ1IjoicmVtb3RlLXNlbnNpbmciLCJhIjoiYWNiYzg0ZWU2Mjk3ZTU5NjE4MmQyZWEzZTY2ZWNlYjIifQ.U7mp4MXdcjaIwW_syAqriQ'})
                    , streets = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {id: 'remote-sensing.84f6c85a', attribution: mbAttr, accessToken: 'pk.eyJ1IjoicmVtb3RlLXNlbnNpbmciLCJhIjoiYWNiYzg0ZWU2Mjk3ZTU5NjE4MmQyZWEzZTY2ZWNlYjIifQ.U7mp4MXdcjaIwW_syAqriQ'});
                    //create and add the layers to the map
                    var map = L.map('map', {
                    center: [33.9, 35.877],
                            zoom: 10,
                            layers: [ streets, cities]
                    });
     
  
                    //get length of the entries array
                    var len = "{{events|length}}";
                    var date = 1;
                    var time = 2;
                    var lat = 4;
                    var lon = 5;
                    //get events from database
                    var stri = "{% for event in events %} {{event.timestamp|date:"Y-m-d H"}}  {{event.lat}} {{event.lon}} <br>  {% endfor %}";
                    var entry =  stri.split(" ");
                    //create the clustermarker object
                    var markers = new L.markerClusterGroup();
                    //create markers and add to cluster
     var mymark;
                    for (var t = 0; t < len; t++) {
     mymark = new L.marker([entry[lat], entry[lon]], {time: "\"" + entry[date] + entry[time] + "+01\""});
                    mymark.bindPopup("<b>Accident</b><br>this is marker number " + (t + 1) + " with coordinates :[" + entry[lat] + "," + entry[lon] + "]").openPopup();
                    markers.addLayer(mymark);
                    date += 8;
                    time += 8;
                    lat += 8;
                    lon += 8;
            }
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);                                       
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);  
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);  
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);  
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);  
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);  
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);  
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);  
 mymark = new L.marker([33.8,35.5]);
 markers.addLayer(mymark);   
            //add cluster to map
          // map.addLayer(markers);
                    //baseLayers for the map
                    var baseLayers = {
                    "Grayscale": grayscale,
                            "streets": streets
                    };
     layerGroup = L.layerGroup(markers);
 // $.getJSON("data.geojson", function(data) {

    //  var testlayer = L.geoJson(data);
      var sliderControl = L.control.sliderControl({  position: "topright",   layer: markers,  range: false , follow: 3});
            // ({position: "topright", layer: testlayer, follow: 3});
map.addControl(sliderControl);
sliderControl.startSlider();//});
        </script>

抱歉有些评论，有些只是作为 debuggung 评论的实际代码

Answer 1

2016 年 3 月编辑：

您现在可以简单地使用插件 Leaflet.MarkerCluster.LayerSupport 来实现这一点，而无需更改 Leaflet Slider 插件代码。

查看演示 LayerSupport with LeafletSlider plugin。

在你的情况下，你会这样做：

var markers = L.layerGroup();

// Add all your markers into `markers` Layer Group.

// Check into MCG Layer Support!
// Add to map first before checking in.
L.markerClusterGroup.layerSupport().addTo(map).checkIn(markers);

var sliderControl = L.control.sliderControl({
  position: "topright",
  layer: markers,
  range: false,
  follow: 3
});

map.addControl(sliderControl);
sliderControl.startSlider();

Disclosure: I am the author of that plugin.

原回答：

当它们由地图上的 MarkerClusterGroup 同时处理时，避免直接向（从）地图添加（删除）单个标记。

MCG 预计是唯一管理标记的组，如果要显示/隐藏某些标记，则必须使用 markers.addLayer(myMarker);（或 removeLayer），其中 markers 是你的 MCG。

Leaflet Time-Slider (sliderControl) 插件因此与 MCG 不兼容：它直接向（从）地图添加（删除）标记。它对您的 MCG 一无所知。

尽管如此，您应该能够通过将插件代码中的任何 map.addLayer 替换为 markers.addLayer（removeLayer 也是如此）来使其与 MCG 兼容。不要忘记将您的 MCG 添加到地图中。

如何在 Javascript 中使用 leaflet slider 和 markercluster？

How to use leaflet slider along with markercluster in Javascript?

html

javascript

openstreetmap

leaflet