Merge pull request #12671 from tschaub/cacheless

Configure cache on the layer instead of the source

src/ol/layer/WebGLTile.js

@@ -63,6 +63,8 @@ import {assign} from '../obj.js';
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
  * use {@link module:ol/Map#addLayer}.
  * @property {boolean} [useInterimTilesOnError=true] Use interim tiles on error.
+ * @property {number} [cacheSize=512] The internal texture cache size.  This needs to be large enough to render
+ * two zoom levels worth of tiles.
  */
 
 /**
@@ -265,12 +267,23 @@ class WebGLTileLayer extends BaseTileLayer {
 
     const style = options.style || {};
     delete options.style;
+
+    const cacheSize = options.cacheSize;
+    delete options.cacheSize;
+
     super(options);
 
     /**
      * @type {Style}
+     * @private
      */
     this.style_ = style;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.cacheSize_ = cacheSize;
   }
 
   /**
@@ -292,6 +305,7 @@ class WebGLTileLayer extends BaseTileLayer {
       fragmentShader: parsedStyle.fragmentShader,
       uniforms: parsedStyle.uniforms,
       className: this.getClassName(),
+      cacheSize: this.cacheSize_,
     });
   }
 

src/ol/renderer/webgl/TileLayer.js

@@ -56,6 +56,8 @@ const attributeDescriptions = [
   },
 ];
 
+const empty = {};
+
 /**
  * Transform a zoom level into a depth value ranging from -1 to 1.
  * @param {number} z A zoom level.
@@ -103,6 +105,7 @@ function getRenderExtent(frameState) {
  * @property {Object<string, import("../../webgl/Helper").UniformValue>} [uniforms] Additional uniforms
  * made available to shaders.
  * @property {string} [className='ol-layer'] A CSS class name to set to the canvas element.
+ * @property {number} [cacheSize=512] The texture cache size.
  */
 
 /**
@@ -177,7 +180,8 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     this.helper.flushBufferData(indices);
     this.indices_ = indices;
 
-    this.tileTextureCache_ = new LRUCache(512);
+    const cacheSize = options.cacheSize !== undefined ? options.cacheSize : 512;
+    this.tileTextureCache_ = new LRUCache(cacheSize);
 
     this.renderedOpacity_ = NaN;
   }
@@ -468,23 +472,17 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     }
 
     // TODO: let the renderers manage their own cache instead of managing the source cache
-    if (tileSource.canExpireCache()) {
-      /**
-       * @param {import("../../PluggableMap.js").default} map Map.
-       * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-       */
-      const postRenderFunction = function (map, frameState) {
-        const tileSourceKey = getUid(tileSource);
-        if (tileSourceKey in frameState.usedTiles) {
-          tileSource.expireCache(
-            frameState.viewState.projection,
-            frameState.usedTiles[tileSourceKey]
-          );
-        }
-      };
+    /**
+     * Here we unconditionally expire the source cache since the renderer maintains
+     * its own cache.
+     * @param {import("../../PluggableMap.js").default} map Map.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     */
+    const postRenderFunction = function (map, frameState) {
+      tileSource.expireCache(tileSource.getProjection(), empty);
+    };
 
-      frameState.postRenderFunctions.push(postRenderFunction);
-    }
+    frameState.postRenderFunctions.push(postRenderFunction);
 
     this.postRender(frameState);
     return canvas;

src/ol/source/DataTile.js

@@ -23,7 +23,6 @@ import {getUid} from '../util.js';
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid.
  * @property {boolean} [opaque=false] Whether the layer is opaque.
  * @property {import("./State.js").default} [state] The source state.
- * @property {number} [cacheSize] Number of tiles to retain in the cache.
  * @property {number} [tilePixelRatio] Tile pixel ratio.
  * @property {boolean} [wrapX=true] Render tiles beyond the antimeridian.
  * @property {number} [transition] Transition time when fading in new tiles (in miliseconds).
@@ -56,7 +55,7 @@ class DataTileSource extends TileSource {
     }
 
     super({
-      cacheSize: options.cacheSize,
+      cacheSize: 0.1, // don't cache on the source
       projection: projection,
       tileGrid: tileGrid,
       opaque: options.opaque,