我有一个RESTful API推送基于.png的TileLayers和相关元数据(datetime,lat / lon等)
我想创建一个时间滑块或动画,以根据用户的输入显示它们。
什么是好的起点?我看到一些似乎不支持TileLayers /栅格叠加的库。任何人都可以推荐更好的选择吗?
答案 0 :(得分:0)
在仔细阅读文献后,这是我选择的解决方案:
http://fiddle.jshell.net/nathansnider/260hffor/
我们基本上构建了一个tile图层字符串数组,然后使用滑块动态加载它们。
.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));