Leaflet Slider 和 Marker Cluster - 时间未排序
Leaflet Slider and Marker Cluster - time not sorted
我将 leaflet markercluster 与 ui 滑块一起使用(修改后它可以将 markercluster 组作为入口层处理,请参阅 )。
除了 "time" 未在我的滑块中排序外,我设法让它工作。我不知道 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 © 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 组。
不幸的是 LeafletSlider 插件不会自动对图层进行排序,即使它确实读取并显示了时间戳。
这就是为什么在与您提到的 JSFiddle 相关的 post 中,作者建议 sort
输入 GeoJSON 功能。
(相关post:)
但实际上,一旦创建 sliderControl
,您应该 sort
options.markers
数组,因为 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();
注:我更新了 with a new method to make LeafletSlider compatible with Leaflet.markercluster. There is no longer need to modify LeafletSlider code, you just use an extra plugin called Leaflet.MarkerCluster.LayerSupport(我是作者)
我将 leaflet markercluster 与 ui 滑块一起使用(修改后它可以将 markercluster 组作为入口层处理,请参阅
除了 "time" 未在我的滑块中排序外,我设法让它工作。我不知道 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 © 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 组。
不幸的是 LeafletSlider 插件不会自动对图层进行排序,即使它确实读取并显示了时间戳。
这就是为什么在与您提到的 JSFiddle 相关的 post 中,作者建议 sort
输入 GeoJSON 功能。
(相关post:
但实际上,一旦创建 sliderControl
,您应该 sort
options.markers
数组,因为 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();
注:我更新了