Question

我使用传单标记集和ui滑块（已修改，因此它可以将标记集团组作为输入图层处理，请参阅How to use leaflet slider along with markercluster in Javascript?）。

我设法让它工作，除了“时间”没有在我的滑块中排序。我不知道SliderControl.js遵循什么规则来对标记进行排序，但它对我来说似乎是随机的。我的数据变量（Data_GL）排序很好，我在SliderControl.js中指定了“timeStrLength：10”。

这是我的代码：

var sliderControl = null;

var map = L.map('map').setView([23, 2], 3);
map.options.maxZoom=13;

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy; OpenStreetMap contributors';
L.tileLayer(osmUrl, {attribution: osmAttrib, id: 'mapbox.streets'}).addTo(map);

var markers = L.markerClusterGroup();
markers.addTo(map);

//Filling layer
var mapdata=Data_GL;

for (var i = 0; i < mapdata.length; i++) {
  var marker = L.marker([mapdata[i].latitude,mapdata[i].longitude],{title: mapdata[i].Platform,icon: cssic0,time: mapdata[i].time});
  marker.bindPopup(mapdata[i].Platform + "<br><b>Type </b>: " + mapdata[i].mtype + "<br><b>Last Update </b>: " + mapdata[i].time);
  console.log(marker.time);
  marker.addTo(markers);};

//Slider
var sliderControl = L.control.sliderControl({layer:markers , range:true});
map.addControl(sliderControl);

sliderControl.startSlider();

Data_GL看起来像这样：

var Data_GL = [
{"latitude":37.783380,"longitude":15.956680,"mtype":"GL","Platform":"61283","time":"2005-02-21"}, 
{"latitude":37.864970,"longitude":15.826730,"mtype":"GL","Platform":"61282","time":"2005-02-25"}, 
{"latitude":47.639170,"longitude":-8.469670,"mtype":"GL","Platform":"62595","time":"2006-03-12"}, 
{"latitude":59.562670,"longitude":-39.745000,"mtype":"GL","Platform":"64556","time":"2006-08-24"},
...

我尝试了这个解决方案（http://jsfiddle.net/nathansnider/ngeLm8c0/4/），但我真的不知道如何将它应用到markercluster组。

Answer 1

不幸的是，LeafletSlider插件不会自动对图层进行排序，即使它确实会读取并显示时间戳。

这就是为什么在你提到的与JSFiddle相关的帖子中，作者建议sort输入GeoJSON功能。

（相关文章：TimeSlider Plugin and Leaflet - Markers not appearing in order）

但实际上，在创建sort之后，您应该options.markers sliderControl数组，因为一旦被GeoJSON读取，它就可能无法遵循。滑块控制。

所以你会做类似的事情：

var sliderControl = L.control.sliderControl({layer:markers , range:true});

sliderControl.options.markers.sort(function (a, b) {
    return (a.properties.time > b.properties.time);
});

map.addControl(sliderControl);

sliderControl.startSlider();

注意：我使用新方法更新了first mentioned post，以使LeafletSlider与Leaflet.markercluster兼容。不再需要修改LeafletSlider代码，只需使用一个名为Leaflet.MarkerCluster.LayerSupport的额外插件（我是作者）。

Leaflet Slider和Marker Cluster - 时间未排序

1 个答案: