时间滑块插件和传单 - 标记未按顺序显示

TimeSlider Plugin and Leaflet - Markers not appearing in order

本文关键字：显示 顺序 插件 时间      更新时间：2023-09-26

使用 JSFIDDLE 链接更新

我正在使用 LeafletJS 构建带有时间轴滑块的 web 地图。我正在使用 LeafletSlider 插件来显示一组基于 GEOJSON 属性的标记，名为 DATE_START .下面是我的数据对象的外观示例：

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 的标记显示为第二个，而实际上应该首先显示，因为它是日期最早的标记。

如何让我的时间滑块/标记按从最早到最新的正确顺序显示？谢谢。

编辑：

正如 ghybs 在下面提到的（并在示例中显示），确保滑块以正确的顺序返回数据的正确方法是对 sliderControl 的 options.markers 数组进行排序：

sliderControl.options.markers.sort(function(a, b) {
    return (a.feature.properties.DATE_START > b.feature.properties.DATE_START);
});

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

原答案：

您可以使用 array.sort 方法就地对features数组进行排序：

camps.features.sort(function(a, b) {
  return (a.properties.DATE_START > b.properties.DATE_START);
});

http://jsfiddle.net/nathansnider/ngeLm8c0/4/

相关文章：