OpenLayers：当源更改时继续显示 WebGl 磁贴

问：

我们使用 OpenLayers 库在前景中显示带有天气相关数据的栅格图块，背景由 OpenStreetMap 图块组成。用户可以为不同的时间戳选择磁贴。切换时间戳会通过 TileImage.setUrl 方法切换 URL。

问题在于，当使用 setUrl 时，与天气相关的图块会立即消失，并且在下载新图块之前只显示 OSM 背景。这与较旧的 OpenLayers 版本相反，在旧的 OpenLayers 版本中，即使在运行 setUrl 之后，旧的 WebGl 瓦片也会显示出来，然后被新瓦片替换。

有没有一种简单的方法可以在加载新瓷砖之前继续显示旧瓷砖，以便某些瓷砖始终在前景中可见？

简化后，代码的工作方式如下：

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import View from 'ol/View.js';
import TileImage from 'ol/source/TileImage.js';

let urlA = "https://www.example.com/temperature.php?tile_x={x}&tile_y={y}&tile_zoom={z}&datetime=now";
let urlB = "https://www.example.com/temperature.php?tile_x={x}&tile_y={y}&tile_zoom={z}&datetime=now+1hour";
let urlC = "https://www.example.com/temperature.php?tile_x={x}&tile_y={y}&tile_zoom={z}&datetime=now+2hours";

const src = new TileImage({url: urlA});


const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    new TileLayer({
         source: src,
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 0,
  }),
});

document.getElementById("tempA").addEventListener("click", e => {
     src.setUrl(urlA);
     e.preventDefault();
})
document.getElementById("tempB").addEventListener("click", e => {
     src.setUrl(urlB);
     e.preventDefault();
})
document.getElementById("tempC").addEventListener("click", e => {
     src.setUrl(urlC);
     e.preventDefault();
})