問題描述
更新了 JSFIDDLE 鏈接
我正在使用 LeafletJS 構建一個帶有時間軸滑塊的 web 地圖.我正在使用 LeafletSlider 插件 來顯示一組基于名為 DATE_START<的 GEOJSON 屬性的標記/代碼>.這是我的數據對象的示例:
var camps = {"type": "FeatureCollection",特征": [{類型":特征"，特性": {狀態":無人居住"，"DATE_START": "2015-06-23",DATE_CLOSED":2016-01-23"},幾何學": {類型":點"，坐標":[64.6875, 34.97600151317591]}}, {類型":特征"，特性": {狀態":占用"，"DATE_START": "2014-01-21",DATE_CLOSED":2015-05-25"},幾何學": {類型":點"，坐標":[65.335693359375, 36.26199220445664]}}, {類型":特征"，特性": {狀態":無人居住"，"DATE_START": "2015-09-13",DATE_CLOSED":"},幾何學": {類型":點"，坐標":[67.587890625, 35.969115075774845]}}]};我的代碼示例:
//創建標記層(在示例中通過 GeoJSON FeatureCollection 完成)var testlayer = L.geoJson(營地，{onEachFeature:函數(特征，層){layer.bindPopup(feature.properties.DATE_START);}});var sliderControl = L.control.sliderControl({位置:右上角"，層:測試層，時間屬性:'DATE_START'});//確保將滑塊添加到地圖;-)map.addControl(sliderControl);//并初始化滑塊滑塊控制.startSlider();我已將時間滑塊插件添加到我的地圖中，盡管它正在運行，但我似乎無法讓滑塊按時間順序顯示標記.例如，具有 2014-01-21 的 DATE_START 值的標記顯示在第二位，而實際上它應該首先顯示，因為它是具有最早日期的標記.
如何讓我的時間滑塊/標記以正確的順序從最早到最晚出現?謝謝.
正如 ghybs 在下面提到的(并在an example中顯示)，確保滑塊在正確的順序是對sliderControl的options.markers數組進行排序:
sliderControl.options.markers.sort(function(a, b) {返回(a.feature.properties.DATE_START > b.feature.properties.DATE_START)；});我的原始答案(如下)對 GeoJSON 的功能進行了排序，但這并不能保證 Leaflet 會以正確的順序返回它們.
<小時>原答案:
您可以使用 array.sort 方法 對 features 數組進行排序:
camps.features.sort(function(a, b) {返回(a.properties.DATE_START > b.properties.DATE_START)；});http://jsfiddle.net/nathansnider/ngeLm8c0/4/p>
Updated with a JSFIDDLE link
I am using LeafletJS to build a web map with a timeline slider. I am using the LeafletSlider plugin to show a group of markers based on a GEOJSON property named DATE_START. Here's an example of what my data object looks like:
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]
}
}]
};
An example of my code:
//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();
I've added the timeslider plugin to my map, and although it's functioning, I can't seem to get the slider to show the markers in a temporal order. For example, the marker with the DATE_START value of 2014-01-21 is shown second when in fact it should be shown first because it's the marker with the earliest date.
How can I get my timeslider/markers to appear in the correct order from earliest to latest? Thanks.
EDIT:
As ghybs mentions below (and shows in an example), the proper way to ensure that the slider returns data in the correct order is to sort the options.markers array of the sliderControl:
sliderControl.options.markers.sort(function(a, b) {
return (a.feature.properties.DATE_START > b.feature.properties.DATE_START);
});
My original answer (below) sorts the features of the GeoJSON, but this does not guarantee that Leaflet will return them in the correct order.
Original answer:
You can use the array.sort method to sort the features array in place:
camps.features.sort(function(a, b) {
return (a.properties.DATE_START > b.properties.DATE_START);
});
http://jsfiddle.net/nathansnider/ngeLm8c0/4/
這篇關于TimeSlider 插件和傳單 - 標記未按順序顯示的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！