2016-03-10 77 views
1

我通過使用LeafletSlider plugin在我的地圖上顯示難民營的時間範圍。根據我的GEOJSON對象中名爲DATE_START的屬性,陣營出現在地圖上。正如你可以在我的JSFIDDLE中看到的那樣,滑塊效果很好。使用LeafletSlider隱藏標記?

當我正在清理時間軸時,我想要刪除具有DATE_CLOSED屬性的標記,具體取決於當前時間軸清理的日期和DATE_CLOSED屬性的日期。

它看起來像這個timeslider插件只顯示標記。有沒有人知道如何在日期關閉後隱藏標記?

的樣本數據:

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

LeafletSlider僅適用於一個屬性(在'timeAttribute'選項中設置的屬性),因此無法同時用'DATE_START'和'DATE_CLOSED'進行過濾。您可能需要使用滑塊來創建自己的控件,該滑塊使用[過濾器函數](http://leafletjs.com/reference.html#geojson-filter)過濾您的GeoJSON數據,該過濾器返回'true',用於其「DATE_START」和'DATE_CLOSED'包含滑塊日期。 – nathansnider

+0

謝謝,彌敦道。我不認爲我的技能達到了這個水平還沒有創建一個自定義滑塊,但感謝您的評論! – redshift

回答