使用LeafletSlider隐藏标记?

时间:2016-03-10 13:30:57

标签: javascript leaflet

我使用LeafletSlider plugin在我的地图上展示了一系列临时难民营。阵营根据我的GEOJSON对象中名为DATE_START的属性显示在地图上。正如您在 JSFIDDLE 中看到的那样,滑块效果很好。

在我清理时间轴时,我想删除具有DATE_CLOSED属性的标记,具体取决于当前时间线清理的日期和DATE_CLOSED属性的日期。

看起来这个timelider插件只显示标记。有没有人知道如何在日期结束后隐藏标记?

  

示例数据:

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

代码:

var map = L.map('map', {
center: [33.67406853374198, 66.9287109375],
zoom: 7
}).addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));


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

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

//And initialize the slider
sliderControl.startSlider();

$('#slider-timestamp').html(options.markers[ui.value].feature.properties.DATE_START.substr(0, 10));

1 个答案:

答案 0 :(得分:0)

我希望这可以作为一个答案,但我发现有一个替代时间轴插件可以满足我的需求:https://github.com/skeate/Leaflet.timeline