2016-03-15 7 views
0

Я использую листовки markercluster вместе с слайдером ui (изменен таким образом, что он может обрабатывать группу markercluster в качестве входного слоя, см. How to use leaflet slider along with markercluster in Javascript?).Лист слайдера и маркер кластера - время не отсортировано

Мне удалось заставить его работать, за исключением того, что «время» не сортируется в моем слайдере. Я не знаю, какое правило SliderControl.js следует сортировать маркеры, но для меня это кажется случайным. Моя переменная данных (Data_GL) отсортирована по времени и я определил «timeStrLength: 10» в SliderControl.js.

Вот мой код:

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 © 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 группе.

ответ

0

К сожалению, плагин LeafletSlider не сортирует слои автоматически, даже если он читает и показывает временную метку.

Именно поэтому в сообщении, связанном с JSFiddle, вы упомянули, что автор предлагает sort входные функции GeoJSON.

(связанная почта: TimeSlider Plugin and Leaflet - Markers not appearing in order)

Но на самом деле, вы должны скорее sortoptions.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 (я автор).

+1

Также был обновлен мой [ответ на соответствующий пост] (http://stackoverflow.com/a/35881206/5403120), чтобы включить правильный метод сортировки. Надеюсь, это поможет избежать дальнейшей путаницы. – nathansnider

+0

@nathansnider молодец! :-) – ghybs

+0

Большое спасибо, но sliderControl.options.markers.sort (...) не работает для меня. Это сбой приложения с этой ошибкой: «Uncaught TypeError: невозможно прочитать свойство« sort »из null» Возможно, это потому, что маркеры не являются слоем, а кластерной группой? – Quai20