From 9df1a821627b1608dd3732833d7651564b2ff9aa Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Thu, 18 Aug 2022 22:14:49 +0100
Subject: [PATCH] clear cache when source reset

clear cache if view projection changed
test source reset
---
 src/ol/layer/WebGLTile.js                     |   3 +
 src/ol/renderer/webgl/TileLayer.js            |  24 ++++++-
 .../webgl-data-tile-reset-source/expected.png | Bin 0 -> 9387 bytes
 .../webgl-data-tile-reset-source/main.js      |  66 ++++++++++++++++++
 4 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 test/rendering/cases/webgl-data-tile-reset-source/expected.png
 create mode 100644 test/rendering/cases/webgl-data-tile-reset-source/main.js

diff --git a/src/ol/layer/WebGLTile.js b/src/ol/layer/WebGLTile.js
index 5aca739168..2cf948e0ed 100644
--- a/src/ol/layer/WebGLTile.js
+++ b/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_);
     }
diff --git a/src/ol/renderer/webgl/TileLayer.js b/src/ol/renderer/webgl/TileLayer.js
index 5de570b2c8..ae89bd2dd1 100644
--- a/src/ol/renderer/webgl/TileLayer.js
+++ b/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,11 +831,15 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     return covered;
   }
 
+  clearCache() {
+    const tileTextureCache = this.tileTextureCache_;
+    tileTextureCache.forEach((tileTexture) => tileTexture.dispose());
+    tileTextureCache.clear();
+  }
+
   removeHelper() {
     if (this.helper) {
-      const tileTextureCache = this.tileTextureCache_;
-      tileTextureCache.forEach((tileTexture) => tileTexture.dispose());
-      tileTextureCache.clear();
+      this.clearCache();
     }
 
     super.removeHelper();
diff --git a/test/rendering/cases/webgl-data-tile-reset-source/expected.png b/test/rendering/cases/webgl-data-tile-reset-source/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..890747aca61e0af1ee22501af086ff89c2c3adb6
GIT binary patch
literal 9387
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
BX!igB

literal 0
HcmV?d00001

diff --git a/test/rendering/cases/webgl-data-tile-reset-source/main.js b/test/rendering/cases/webgl-data-tile-reset-source/main.js
new file mode 100644
index 0000000000..bc217d77d6
--- /dev/null
+++ b/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});
+});