使用jquery滑塊來顯示單張圓圈標記？

Question

[編輯]我修改了這個問題，以反映我的問題的當前狀態。

我正在研究一些隨時間變化的空間數據。我正在使用Leaflet，並且我擁有GeoJSON中的數據。我想讓我的地圖包含一個滑塊，使用戶能夠根據時間動態顯示標記。

[編輯] 我試過用this實現。但是，這隻顯示標準的Leaflet標記，我需要能夠顯示可以根據geojson中指定的屬性動態樣式化的圓形標記。

的樣式以GeoJSON並轉換到小葉圓標記的工作原理用下面的代碼按預期：

var geojson = L.geoJson(data, { 
style: myStyle, 
onEachFeature: onEachFeature, 
pointToLayer: function(feature, latlng) { 
    return L.circleMarker(latlng) 
} 
}) 

隨着myStyle和onEachFeature處理轉化爲L.circleMarker併產生提示。

但是，我現在處理的問題是生成的滑塊每次只添加一個特徵，而不是一組。目前我有一個geojson與約。 600個特徵和4個不同的時間點（例如150個特徵的子組，每個具有相同的時間戳）。我想要的是每組150個同時添加。目前，滑塊遍歷geojson中的每個特徵，並一次添加一個特徵。

這裏是我使用從丹尼斯維廉LeafletSlider滑塊代碼：

startSlider: function() { 
     options = this.options; 
     $("#leaflet-slider").slider({ 
      value: options.minValue + 1, 
      min: options.minValue, 
      max: options.maxValue +1, 
      step: 1, 
      slide: function (e, ui) { 
       if(!!options.markers[ui.value]) { 
       if(options.markers[ui.value]) $('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 16)); 

       for (var i = options.minValue; i < ui.value ; i++) { 
        if(options.markers[i]) map.addLayer(options.markers[i]); 
       } 
       for (var i = ui.value; i <= options.maxValue; i++) { 
        if(options.markers[i]) map.removeLayer(options.markers[i]); 
       } 
      } 
     } 
    }); 
    map.addLayer(options.markers[options.minValue]); 
} 

什麼我不清楚是，如果我需要修改這個滑塊功能放置特徵組中這些功能和如果是的話，該怎麼做。我對JavaScript比較陌生，所以如果有人能指點我一些有用的起點，我會非常感激。

Answer 1

很高興看到有人在使用我的滑塊。不幸的是，我現在才發現這個問題。 但是，如果這個問題仍然沒有解決，也許這可以提供幫助：

可以定義一次執行的步驟數。 因此，如果您知道拖動滑塊一步時要顯示的功能數量，則可以簡單地在滑塊屬性中定義此數字。

E.g.

startSlider: function() { 
    options = this.options; 
    $("#leaflet-slider").slider({ 
     value: options.minValue + 1, 
     min: options.minValue, 
     max: options.maxValue +1, 
     step: 500, 
     slide: function (e, ui) { 
      if(!!options.markers[ui.value]) { 
      if(options.markers[ui.value]) $('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 16)); 

      for (var i = options.minValue; i < ui.value ; i++) { 
       if(options.markers[i]) map.addLayer(options.markers[i]); 
      } 
      for (var i = ui.value; i <= options.maxValue; i++) { 
       if(options.markers[i]) map.removeLayer(options.markers[i]); 
      } 
     } 
    } 
}); 
map.addLayer(options.markers[options.minValue]); 
} 

Answer 2

添加到您的html文件：

<script type="text/javascript"> 
$(document).ready(function() { 
var circle = L.circle([51.508, -0.11], 500, { 
    color: 'red', 
    fillColor: '#f03', 
    fillOpacity: 0.5 
}).addTo(map); 
}); 
</script> 

並改變你的GeoJSON的數據座標。