TimeSlider 插件和传单 - 标记未按顺序显示

2022-01-12 00:00:00 leaflet javascript ui-leaflet

更新了 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/

相关文章