1

[编辑] 我修改了这个问题以反映我的问题的当前状态。

我正在努力可视化一些随时间变化的空间数据。我正在使用 Leaflet，并且我在 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 的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比较陌生，所以如果有人能指出一些有用的起点，我将不胜感激。

4

2 回答 2

1

很高兴看到有人实际上在使用我的 Slider。可悲的是，我现在才发现这个问题。但是，如果这个问题仍未解决，也许这会有所帮助：

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

例如

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]);
}
于 2014-01-14T18:09:31.620 回答
0

将此添加到您的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 数据的坐标。

于 2013-10-03T01:17:00.697 回答