javascript - TimeSlider 插件和 Leaflet - 标记未按顺序出现

标签 javascript leaflet ui-leaflet

JSFIDDLE link 更新了

我正在使用 LeafletJS 构建带有时间轴 slider 的网络 map 。我正在使用 LeafletSlider plugin 显示一组基于名为 DATE_START 的 GEOJSON 属性的标记。这是我的数据对象的示例:

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

我已将时间 slider 插件添加到我的 map 中,尽管它可以正常运行,但我似乎无法让 slider 按时间顺序显示标记。例如,DATE_START 值为 2014-01-21 的标记显示在第二位,而实际上它应该首先显示,因为它是最早日期的标记。

如何让我的时间 slider /标记以从早到晚的正确顺序出现?谢谢。

最佳答案

编辑:

作为ghybs mentions below (并在 an example 中显示),确保 slider 以正确顺序返回数据的正确方法是对 slider 控件的 options.markers 数组进行排序:

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

我的原始答案(如下)对 GeoJSON 的特征进行了排序,但这并不能保证 Leaflet 会以正确的顺序返回它们。


原答案:

您可以使用 array.sort method就地对 features 数组进行排序:

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

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

关于javascript - TimeSlider 插件和 Leaflet - 标记未按顺序出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35878087/

相关文章:

javascript - JS 作用域/闭包如何传递参数

javascript - jQuery(附加、分离、重新附加)事件处理程序问题

javascript - 有没有办法使用react-leaflet添加MultiPolyline组件?

javascript - 传单 map 上的固定图像

javascript - 在两个相等的 JSON 对象中,在一种情况下访问 javascript 中的值有效,另一种情况则返回未定义

javascript - 如何使用ui-leaflet和Markercluster来改变markercluster的颜色?

javascript - jQuery .find 需要确保在继续使用 tab through 之前满足这两个要求

javascript - JQuery从ajax加载中获取元素id数据