如何像mapbox上的雨点查看器一样为雷达栅格制作动画

Question

我在用rainviewer磁贴存储雷达数据。

https://tilecache.rainviewer.com/v2/radar/1568251200/256/{z}/{x}/{y}/3/0_0.png

我想用时间戳更新平铺栅格，以便为雷达制作动画，比如https://rainviewer.com。

我从这个url https://tilecache.rainviewer.com/api/maps.json中获取时间戳。

我为我糟糕的英语道歉

function update_radar(){
    $.getJSON("https://tilecache.rainviewer.com/api/maps.json",     function(data) {
    map.removeLayer("rainviewer");
    map.removeSource("rainviewer");
    map.addSource("rainviewer", {
        type: "raster",
        tiles: [
            getPath(data[data.length - 1])
        ],
        tileSize: 256
    });
    map.addLayer({
        id: "rainviewer",
        type: "raster",
        source: "rainviewer",
        paint: {
            "raster-opacity": 1
        },
        minzoom: 0,
        maxzoom: 12
    });
    });
}

function getPath(time) {
    return "https://tilecache.rainviewer.com/v2/radar/" + time + "/256/{z}/{x}/{y}/3/0_0.png";
}

Answer 1

您可以最初为每个源添加一个层，然后将它们全部设置为隐藏，并根据时间函数逐个启用这些层，例如每2秒。

要显示或隐藏图层，请执行以下操作：

map.setLayoutProperty("layerId", "visibility", "visible");
map.setLayoutProperty("layerId", "visibility", "none");

要使动画更平滑，还应使用：

map.setPaintProperty("layerId", "raster-opacity", opacity);

下面是一个类似于rainviewer的工作示例的代码：

https://codepen.io/manishraj/full/gOYKMjO

Answer 2

您可以运行一个setInterval函数来更新您的URL，这与在this example中的操作类似。你的代码看起来会像这样：

setInterval(function() {
   map.getSource("rainviewer").updateImage({ url: getPath(data[data.length - 1]) });
}, 200);