使用jquery滑块显示传单圆圈标记？

[编辑]我已修改此问题以反映问题的当前状态

我正在研究可视化一些随时间变化的空间数据。我用的是传单，我有一个GeoJSON中的数据。我想让我的地图包含一个滑块，使用户能够根据时间动态显示标记

[编辑]我已经尝试过实施。但是，这只显示标准的传单标记，我需要能够显示可以根据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中的每个功能，并一次添加一个

下面是我正在使用的Dennis Wilhelm的滑块代码：

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

startSlider:函数（）{
options=this.options；
$（“#传单滑块”）.滑块({
值：options.minValue+1，
min:options.minValue，
最大值：options.maxValue+1，
步骤：1，
幻灯片：功能（e、ui）{
if（！！options.markers[ui.value]）{
if（options.markers[ui.value]）$（“#滑块时间戳”）.html（options.markers[ui.value].feature.properties.time.substr（0,16））；
for（var i=options.minValue；i对于（var i=ui.value；i将其添加到
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>


$（文档）.ready（函数（）{
变量圆=L圆（[51.508，-0.11]，500{
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5
}).addTo（地图）；
});

并使用GeoJSON数据更改坐标。
将其添加到
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>


$（文档）.ready（函数（）{
变量圆=L圆（[51.508，-0.11]，500{
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5
}).addTo（地图）；
});

并使用GeoJSON数据更改坐标。
很高兴看到有人在使用我的滑块。
遗憾的是，我现在才发现这个问题。
但是，如果这个问题仍然没有解决，这可能会有帮助：

可以定义一次执行的多个步骤。
因此，如果您知道在进一步拖动滑块时要显示的功能数量，可以在滑块属性中简单地定义此数量

例如

startSlider:函数（）{
options=this.options；
$（“#传单滑块”）.滑块({
值：options.minValue+1，
min:options.minValue，
最大值：options.maxValue+1，
步骤：500，
幻灯片：功能（e、ui）{
if（！！options.markers[ui.value]）{
if（options.markers[ui.value]）$（“#滑块时间戳”）.html（options.markers[ui.value].feature.properties.time.substr（0,16））；
for（var i=options.minValue；i对于（var i=ui.value；i很高兴看到有人在使用我的滑块。
遗憾的是，我现在才发现这个问题。
但是，如果这个问题仍然没有解决，这可能会有帮助：

可以定义一次执行的多个步骤。
因此，如果您知道在进一步拖动滑块时要显示的功能数量，可以在滑块属性中简单地定义此数量

例如

startSlider:函数（）{
options=this.options；
$（“#传单滑块”）.滑块({
值：options.minValue+1，
min:options.minValue，
最大值：options.maxValue+1，
步骤：500，
幻灯片：功能（e、ui）{
if（！！options.markers[ui.value]）{
if（options.markers[ui.value]）$（“#滑块时间戳”）.html（options.markers[ui.value].feature.properties.time.substr（0,16））；
for（var i=options.minValue；i对于（var i=ui.value；对于我们这些a/V受损的人，JSFIDLE如何？对于我们这些a/V受损的人，JSFIDLE如何？如果我不清楚，很抱歉。我正在尝试使用L.circleMarker功能显示数据，该功能允许我根据geojson属性动态设置圆的样式。我遇到的问题是jquery是使用L.circleMarker实现滑块的一部分。你能发布jqury部分吗？现在不行。我对jquery不太熟悉，不知道从哪里开始。我已经知道如何创建滑块，但是，我不知道如何使用它生成的内容来子集我加载的geojson。谢谢。这很有帮助。我已经修改了问题to更好地反映我的困境。如果我不清楚，很抱歉。我正在尝试使用L.circleMarker功能显示数据，该功能允许我根据geojson属性动态设置圆的样式。我遇到的问题是使用L.circleMarker实现滑块的jquery部分。你能发布jqury部分吗？现在，不。我是我是jquery新手，不知道从哪里开始。我已经知道如何创建滑块，但是，我不知道如何使用它生成的内容来子集我加载的geojson。谢谢。这很有帮助。我已将问题修改为