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

原答案:

您可以使用 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模板网！