TimeSlider插件和传单 - 标记不按顺序出现 [英] TimeSlider Plugin and Leaflet - Markers not appearing in order

问题描述

更新了 JSFIDDLE链接

我正在使用LeafletJS构建带有时间线滑块的Web地图。我正在使用 LeafletSlider插件显示一组基于名为 DATE_START 。以下是我的数据对象的示例：

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]
        }
    }]
};

我的代码示例：

//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();

我已经将timelider插件添加到我的地图中，虽然它正在运行，但我似乎无法忍受使滑块以时间顺序显示标记。例如， DATE_START 值 2014-01-21 的标记显示在第二位，实际上它应该是首先显示，因为它是最早日期的标记。

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.

如何从最早到最晚使我的时间标记/标记以正确的顺序显示？谢谢。

推荐答案

编辑：

下面的ghybs提及（并在示例中显示），确保滑块返回数据的正确方法按正确的顺序排序sliderControl的 options.markers 数组：

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);
});

我的原始答案（如下）对GeoJSON的功能进行了排序，但这并不保证Leaflet会按正确的顺序退货。

My original answer (below) sorts the features of the GeoJSON, but this does not guarantee that Leaflet will return them in the correct order.

原始答案：

您可以使用 array.sort 方法对要素数组进行排序：

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插件和传单 - 标记不按顺序出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！