如何在Javascript中使用传单滑块和markercluster？

Question

我正在制作一个使用滑块来显示或隐藏标记的地图，并且我想要添加群集功能，每个人都能够完美地工作，但我希望滑块显示标记，并且在标记非常接近使用的情况下一个集群。问题是，这两个，个人和集群显示标志，我想显示标记集群没有集群在那里所有的时间

<script type="text/javascript"> 
 
\t \t 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] 
 
        }); 
 
\t \t \t \t \t 
 
\t \t 
 
        //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 
 
\t \t \t \t \t var mymark; 
 
        for (var t = 0; t < len; t++) { 
 
\t \t \t \t \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; 
 
      } 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark);          
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); 
 
\t mymark = new L.marker([33.8,35.5]); 
 
\t markers.addLayer(mymark); \t 
 
      //add cluster to map 
 
      // map.addLayer(markers); 
 
        //baseLayers for the map 
 
        var baseLayers = { 
 
        "Grayscale": grayscale, 
 
          "streets": streets 
 
        }; 
 
\t \t \t \t \t layerGroup = L.layerGroup(markers); 
 
\t // $.getJSON("data.geojson", function(data) { 
 

 
    // var testlayer = L.geoJson(data); 
 
     var sliderControl = L.control.sliderControl({ position: "topright", layer: markers, range: false , follow: 3}); 
 
\t \t \t \t \t \t \t \t \t \t \t \t // ({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(); 

披露：我该插件的作者。

---

原来的答复：从添加

副歌直接（从）地图，当它们被一个MarkerClusterGroup其是在地图上同时处理（除去）单独标记以。

MCG预计将管理标志的唯一群体，如果你想显示/隐藏了一些标记，你必须使用markers.addLayer(myMarker);（或removeLayer），其中markers是您的MCG。

Leaflet Time-Slider（sliderControl）插件因此与MCG原样不兼容：它直接向地图添加（移除）标记。它不了解你的MCG。

尽管如此，您应该可以通过在插件代码中替换任何map.addLayermarkers.addLayer（与removeLayer相同）使其与MCG兼容。不要忘记将MCG添加到地图中。