Leaflet.js时间滑块/动画与Mapbox TileLayers

时间:2017-05-21 14:37:55

标签: leaflet mapbox

我有一个RESTful API推送基于.png的TileLayers和相关元数据(datetime,lat / lon等)

我想创建一个时间滑块或动画,以根据用户的输入显示它们。

什么是好的起点?我看到一些似乎不支持TileLayers /栅格叠加的库。任何人都可以推荐更好的选择吗?

1 个答案:

答案 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));