Javascript 如何为雷达光栅制作动画，如mapbox上的rainviewer

我正在使用rainviewer瓷砖来获取雷达数据

{z} /{x}/{y}/3/0_0.png

我想用时间戳更新栅格，为雷达制作动画，比如

我从这个url获取时间戳

我为糟糕的英语道歉

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";
}

---

您可以运行

setInterval

函数来更新您的URL，类似于在中的操作。你的会看起来像：

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

---

您可以首先为每个源添加一个层，然后将它们全部设置为隐藏，并基于时间函数（例如每2秒）逐个启用层

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

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

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

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

下面是一个代码笔，其工作示例与rainviewer类似：

---

我尝试了您的解决方案，但效果不好，出现了故障，雷达每次都会消失并出现。“updateImage”功能，只使用图像，而不使用我的端点url