我如何像 mapbox 上的rainviewer 一樣為雷達光柵制作動畫

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，類似於本示例中的操作方式。 你的看起來像：

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