clear cache when source reset

clear cache if view projection changed
test source reset

src/ol/layer/WebGLTile.js

@@ -392,6 +392,9 @@ class WebGLTileLayer extends BaseTileLayer {
    * @private
    */
   handleSourceUpdate_() {
+    if (this.hasRenderer()) {
+      this.getRenderer().clearCache();
+    }
     if (this.getSource()) {
       this.setStyle(this.style_);
     }

src/ol/renderer/webgl/TileLayer.js

@@ -247,6 +247,12 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
      * @type {import("../../Map.js").FrameState|null}
      */
     this.frameState_ = null;
+
+    /**
+     * @private
+     * @type {import("../../proj/Projection.js").default}
+     */
+    this.projection_ = undefined;
   }
 
   /**
@@ -299,6 +305,14 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
    * @return {boolean} Layer is ready to be rendered.
    */
   prepareFrameInternal(frameState) {
+    this.projection_ =
+      this.projection_ === undefined
+        ? frameState.viewState.projection
+        : this.projection_;
+    if (frameState.viewState.projection !== this.projection_) {
+      this.clearCache();
+      this.projection_ = frameState.viewState.projection;
+    }
     const layer = this.getLayer();
     const source = layer.getRenderSource();
     if (!source) {
@@ -817,13 +831,17 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     return covered;
   }
 
-  removeHelper() {
-    if (this.helper) {
+  clearCache() {
     const tileTextureCache = this.tileTextureCache_;
     tileTextureCache.forEach((tileTexture) => tileTexture.dispose());
     tileTextureCache.clear();
   }
 
+  removeHelper() {
+    if (this.helper) {
+      this.clearCache();
+    }
+
     super.removeHelper();
   }
 

test/rendering/cases/webgl-data-tile-reset-source/main.js

@@ -0,0 +1,66 @@
+import DataTile from '../../../../src/ol/source/DataTile.js';
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import View from '../../../../src/ol/View.js';
+
+const size = [81, 99];
+
+const canvas = document.createElement('canvas');
+canvas.width = size[0];
+canvas.height = size[1];
+
+const context = canvas.getContext('2d');
+context.strokeStyle = 'white';
+context.textAlign = 'center';
+const lineHeight = 16;
+context.font = `${lineHeight}px sans-serif`;
+
+const sourceRed = new DataTile({
+  loader: function (z, x, y) {
+    const halfWidth = size[0] / 2;
+    const halfHeight = size[1] / 2;
+    context.fillStyle = '#FF0000';
+    context.fillRect(0, 0, size[0], size[1]);
+    context.fillStyle = 'white';
+    context.fillText(`z: ${z}`, halfWidth, halfHeight - lineHeight);
+    context.fillText(`x: ${x}`, halfWidth, halfHeight);
+    context.fillText(`y: ${y}`, halfWidth, halfHeight + lineHeight);
+    context.strokeRect(0, 0, size[0], size[1]);
+    return context.getImageData(0, 0, size[0], size[1]).data;
+  },
+  tileSize: size,
+});
+
+const sourceBlue = new DataTile({
+  loader: function (z, x, y) {
+    const halfWidth = size[0] / 2;
+    const halfHeight = size[1] / 2;
+    context.fillStyle = '#00AAFF';
+    context.fillRect(0, 0, size[0], size[1]);
+    context.fillStyle = 'white';
+    context.fillText(`z: ${z}`, halfWidth, halfHeight - lineHeight);
+    context.fillText(`x: ${x}`, halfWidth, halfHeight);
+    context.fillText(`y: ${y}`, halfWidth, halfHeight + lineHeight);
+    context.strokeRect(0, 0, size[0], size[1]);
+    return context.getImageData(0, 0, size[0], size[1]).data;
+  },
+  tileSize: size,
+});
+
+const layer = new TileLayer({
+  source: sourceRed,
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 4,
+  }),
+});
+
+map.once(`rendercomplete`, function () {
+  layer.setSource(sourceBlue);
+  render({tolerance: 0.03});
+});