传单在URL中自动重新加载具有更新时间的层

Question

我有一张传单地图，上面显示了澳大利亚的降雨雷达覆盖图。

地图正确加载并显示了最新的降雨雷达，但我希望它每10分钟自动更新一次，而无需重新加载整个页面。我尝试在层上使用setUrl，但没有成功。我已经包含了我的工作地图的JSFiddle，没有自动重新加载。

我用定义层

var RainRadarAus = L.tileLayer('https://api.weather.bom.gov.au/v1/rainradar/tiles/{time}/{z}/{x}/{y}.png', {
attribution: 'Rain data © Bureau of Meteorology',
time: getRadarTime(),
maxZoom: 10,
minZoom: 5,
tileSize: 256,
})

我使用这个函数来获取时间参数

function getRadarTime() {
d = new Date();
d.setTime((Math.trunc(d.valueOf() / 600000) * 600000) - 600000);
console.log(d.toString());
return d.getUTCFullYear().toString() + (d.getUTCMonth() + 1).toString().padStart(2, '0') + d.getUTCDate().toString().padStart(2, '0') + d.getUTCHours().toString().padStart(2, '0') + d.getUTCMinutes().toString().padStart(2, '0');
}

我想重新加载图层，并每10分钟从getRadarTime获得一个新的时间值。

JSFiddle：https://jsfiddle.net/ghLzykqx/

感谢

Answer 1

您可以使用setInterval创建一个每隔x毫秒调用一次的计时器。然后你需要更新瓷砖选项时间并重新绘制：

// MINUTES * SECONDS * MILLISECONDS
var TIME = 10 * 60 * 1000
setInterval(function(){
RainRadarAus.options.time = getRadarTime();
RainRadarAus.redraw();
}, TIME);