Использование ползунка jquery для отображения маркеров круга листовки?

Question

[EDIT] Я изменил этот вопрос, чтобы отразить текущий статус моей проблемы.

Я работаю над визуализацией некоторых пространственных данных, которые меняются со временем. Я использую Листовку, и у меня есть данные в GeoJSON. Я хотел бы, чтобы моя карта включала слайдер, который позволяет пользователю динамически отображать маркеры на основе времени.

[EDIT] Я пытался работать с this осуществления. Тем не менее, это только отображает стандартные маркеры листов, и мне нужно иметь возможность отображать маркеры круга, которые могут быть динамически оформлены на основе свойств, указанных в геойзоне.

Стилизация в формате GeoJSON и преобразование в листовке маркеры круга работы, как ожидается, используя следующий код:

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

С myStyle и onEachFeature обработки преобразования в L.circleMarker и создании всплывающих подсказок.

Однако проблема, с которой я сейчас сталкиваюсь, заключается в том, что полученный слайдер добавляет каждую функцию по одному, а не как группу. В настоящее время у меня есть геойсон с ок. 600 функций и 4 отдельных момента времени (например, подгруппы из 150 функций, каждая из которых имеет одну и ту же метку времени). Я хочу, чтобы каждая группа из 150 была добавлена ​​одновременно. В настоящее время слайдер выполняет итерацию по каждой функции в geojson и добавляет их по одному.

Вот код для слайдера от Dennis Вильгельма 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.