TimeSlider 插件和 Leaflet - 标记未按顺序出现
TimeSlider Plugin and Leaflet - Markers not appearing in order
更新为 JSFIDDLE link
我正在使用 LeafletJS 构建带有时间轴滑块的 web 地图。我正在使用 LeafletSlider plugin 显示一组基于名为 DATE_START
的 GEOJSON 属性 的标记。这是我的数据对象的示例:
var camps = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"STATUS": "UNOCCUPIED",
"DATE_START": "2015-06-23",
"DATE_CLOSED": "2016-01-23"
},
"geometry": {
"type": "Point",
"coordinates": [64.6875, 34.97600151317591]
}
}, {
"type": "Feature",
"properties": {
"STATUS": "OCCUPIED",
"DATE_START": "2014-01-21",
"DATE_CLOSED": "2015-05-25"
},
"geometry": {
"type": "Point",
"coordinates": [65.335693359375, 36.26199220445664]
}
}, {
"type": "Feature",
"properties": {
"STATUS": "UNOCCUPIED",
"DATE_START": "2015-09-13",
"DATE_CLOSED": ""
},
"geometry": {
"type": "Point",
"coordinates": [67.587890625, 35.969115075774845]
}
}]
};
我的代码示例:
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(camps, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.DATE_START);
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
timeAttribute: 'DATE_START'
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();
我已将时间滑块插件添加到我的地图中,尽管它可以正常运行,但我似乎无法让滑块按时间顺序显示标记。例如,DATE_START
值为 2014-01-21
的标记显示在第二位,而实际上它应该首先显示,因为它是最早日期的标记。
如何让我的 timeslider/markers 以从早到晚的正确顺序出现?谢谢
编辑:
As (and shows in an example),保证滑块returns数据顺序正确的正确方法是对sliderControl的options.markers
数组进行排序:
sliderControl.options.markers.sort(function(a, b) {
return (a.feature.properties.DATE_START > b.feature.properties.DATE_START);
});
我原来的回答(如下)对 GeoJSON 的特征进行了排序,但这并不能保证 Leaflet 会 return 它们以正确的顺序排列。
原回答:
您可以使用 array.sort
method 对 features
数组进行适当排序:
camps.features.sort(function(a, b) {
return (a.properties.DATE_START > b.properties.DATE_START);
});
更新为 JSFIDDLE link
我正在使用 LeafletJS 构建带有时间轴滑块的 web 地图。我正在使用 LeafletSlider plugin 显示一组基于名为 DATE_START
的 GEOJSON 属性 的标记。这是我的数据对象的示例:
var camps = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"STATUS": "UNOCCUPIED",
"DATE_START": "2015-06-23",
"DATE_CLOSED": "2016-01-23"
},
"geometry": {
"type": "Point",
"coordinates": [64.6875, 34.97600151317591]
}
}, {
"type": "Feature",
"properties": {
"STATUS": "OCCUPIED",
"DATE_START": "2014-01-21",
"DATE_CLOSED": "2015-05-25"
},
"geometry": {
"type": "Point",
"coordinates": [65.335693359375, 36.26199220445664]
}
}, {
"type": "Feature",
"properties": {
"STATUS": "UNOCCUPIED",
"DATE_START": "2015-09-13",
"DATE_CLOSED": ""
},
"geometry": {
"type": "Point",
"coordinates": [67.587890625, 35.969115075774845]
}
}]
};
我的代码示例:
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(camps, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.DATE_START);
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
timeAttribute: 'DATE_START'
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();
我已将时间滑块插件添加到我的地图中,尽管它可以正常运行,但我似乎无法让滑块按时间顺序显示标记。例如,DATE_START
值为 2014-01-21
的标记显示在第二位,而实际上它应该首先显示,因为它是最早日期的标记。
如何让我的 timeslider/markers 以从早到晚的正确顺序出现?谢谢
编辑:
As options.markers
数组进行排序:
sliderControl.options.markers.sort(function(a, b) {
return (a.feature.properties.DATE_START > b.feature.properties.DATE_START);
});
我原来的回答(如下)对 GeoJSON 的特征进行了排序,但这并不能保证 Leaflet 会 return 它们以正确的顺序排列。
原回答:
您可以使用 array.sort
method 对 features
数组进行适当排序:
camps.features.sort(function(a, b) {
return (a.properties.DATE_START > b.properties.DATE_START);
});