[编辑] 我修改了这个问题以反映我的问题的当前状态。
我正在努力可视化一些随时间变化的空间数据。我正在使用 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比较陌生,所以如果有人能指出一些有用的起点,我将不胜感激。