Leaflet.js 时间 slider/animation 使用 Mapbox TileLayers
Leaflet.js time slider/animation with Mapbox TileLayers
我有一个 RESTful API 推送基于 .png 的 TileLayers 和关联的元数据（日期时间、lat/lon 等）
我想创建一个时间滑块或动画来根据用户的输入显示它们。
什么是好的起点？我看到一些库似乎不支持 TileLayers/raster 覆盖。谁能推荐更好的选择？
阅读文献后，这是我选择的解决方案：
http://fiddle.jshell.net/nathansnider/260hffor/
我们基本上构建了一个图块图层字符串数组，然后使用滑块动态加载它们。
.ajax({
type: "GET",
url: {{GET ROUTE GOES HERE}},
success: function (data) {
imageLayers = [];
$.each(data, function (k, v) {
imageLayers.push(L.tileLayer(mbUrl, { id: {{TILE LAYER ID GOES HERE}}, token: {{TOKEN GOES HERE}}, format: 'png', time: {{IMAGE
DATE TIME GOES HERE}}.substr(0, 10)}))
});
map.setView([data[0].{{LATITUDE PROPERTY}}, data[0].{{LONGITUDE PROPERTY}}], 14);
layerGroup = L.layerGroup(imageLayers);
var sliderControl = L.control.sliderControl({
layer: layerGroup,
follow: null
});
map.addControl(sliderControl);
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 10));
我有一个 RESTful API 推送基于 .png 的 TileLayers 和关联的元数据（日期时间、lat/lon 等）
我想创建一个时间滑块或动画来根据用户的输入显示它们。
什么是好的起点？我看到一些库似乎不支持 TileLayers/raster 覆盖。谁能推荐更好的选择？
阅读文献后，这是我选择的解决方案：
http://fiddle.jshell.net/nathansnider/260hffor/
我们基本上构建了一个图块图层字符串数组，然后使用滑块动态加载它们。
.ajax({
type: "GET",
url: {{GET ROUTE GOES HERE}},
success: function (data) {
imageLayers = [];
$.each(data, function (k, v) {
imageLayers.push(L.tileLayer(mbUrl, { id: {{TILE LAYER ID GOES HERE}}, token: {{TOKEN GOES HERE}}, format: 'png', time: {{IMAGE
DATE TIME GOES HERE}}.substr(0, 10)}))
});
map.setView([data[0].{{LATITUDE PROPERTY}}, data[0].{{LONGITUDE PROPERTY}}], 14);
layerGroup = L.layerGroup(imageLayers);
var sliderControl = L.control.sliderControl({
layer: layerGroup,
follow: null
});
map.addControl(sliderControl);
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 10));