【问题标题】:Leaflet.js time slider/animation with Mapbox TileLayersLeaflet.js 时间滑块/动画与 Mapbox TileLayers
【发布时间】:2017-05-21 14:37:54
【问题描述】:

我有一个 RESTful API 推送基于 .png 的 TileLayers 和相关元数据(日期时间、纬度/经度等)

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

什么是好的起点?我看到一些似乎不支持 TileLayers/raster 叠加的库。谁能推荐一个更好的选择?

【问题讨论】:

标签: leaflet mapbox


【解决方案1】:

阅读文献后,这是我选择开始的解决方案:

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

【讨论】:

    猜你喜欢
    • 2021-02-26
    • 2013-07-19
    • 1970-01-01
    • 1970-01-01
    • 2012-02-19
    • 2017-03-11
    • 1970-01-01
    • 2016-10-18
    相关资源
    最近更新 更多