Leaflet 在 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 &copy; 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);

Leaflet 在 URL 中自动重新加载更新时间的图层

Leaflet Automatically reload layer with updated time in URL

javascript

leaflet