Streamline tile preparation and remove unused code

src/ol/renderer/Layer.js

@@ -48,6 +48,18 @@ class LayerRenderer extends Observable {
     return abstract();
   }
 
+  /**
+   * @param {Object<number, Object<string, import("../Tile.js").default>>} tiles Lookup of loaded tiles by zoom level.
+   * @param {number} zoom Zoom level.
+   * @param {import("../Tile.js").default} tile Tile.
+   */
+  loadedTileCallback(tiles, zoom, tile) {
+    if (!tiles[zoom]) {
+      tiles[zoom] = {};
+    }
+    tiles[zoom][tile.tileCoord.toString()] = tile;
+  }
+
   /**
    * Create a function that adds loaded tiles to the tile lookup.
    * @param {import("../source/Tile.js").default} source Tile source.
@@ -63,20 +75,13 @@ class LayerRenderer extends Observable {
        * @param {number} zoom Zoom level.
        * @param {import("../TileRange.js").default} tileRange Tile range.
        * @return {boolean} The tile range is fully loaded.
+       * @this {LayerRenderer}
        */
       function(zoom, tileRange) {
-        /**
-         * @param {import("../Tile.js").default} tile Tile.
-         */
-        function callback(tile) {
-          if (!tiles[zoom]) {
-            tiles[zoom] = {};
-          }
-          tiles[zoom][tile.tileCoord.toString()] = tile;
-        }
+        const callback = this.loadedTileCallback.bind(this, tiles, zoom);
         return source.forEachLoadedTile(projection, zoom, tileRange, callback);
       }
-    );
+    ).bind(this);
   }
 
   /**

src/ol/renderer/canvas/TileLayer.js

@@ -65,11 +65,11 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
   }
 
   /**
-   * @private
+   * @protected
    * @param {import("../../Tile.js").default} tile Tile.
    * @return {boolean} Tile is drawable.
    */
-  isDrawableTile_(tile) {
+  isDrawableTile(tile) {
     const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
     const tileState = tile.getState();
     const useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
@@ -99,7 +99,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
         this.newTiles_ = true;
       }
     }
-    if (!this.isDrawableTile_(tile)) {
+    if (!this.isDrawableTile(tile)) {
       tile = tile.getInterimTile();
     }
     return tile;
@@ -177,7 +177,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     for (let x = tileRange.minX; x <= tileRange.maxX; ++x) {
       for (let y = tileRange.minY; y <= tileRange.maxY; ++y) {
         const tile = this.getTile(z, x, y, pixelRatio, projection);
-        if (this.isDrawableTile_(tile)) {
+        if (this.isDrawableTile(tile)) {
           const uid = getUid(this);
           if (tile.getState() == TileState.LOADED) {
             tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;

src/ol/renderer/canvas/VectorTileLayer.js

@@ -3,6 +3,7 @@
  */
 import {getUid} from '../../util.js';
 import {createCanvasContext2D} from '../../dom.js';
+import {getValues} from '../../obj.js';
 import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
 import {listen, unlisten, unlistenByKey} from '../../events.js';
@@ -124,9 +125,15 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
 
     /**
      * @private
-     * @type {Object<string, import("../../VectorImageTile").default>}
+     * @type {Array<import("../../VectorImageTile.js").default>}
      */
-    this.tilesToPrepare_ = null;
+    this.tilesWithoutImage_ = null;
+
+    /**
+     * @private
+     * @type {Object<string, import("../../events").EventsKey)}
+     */
+    this.tileChangeKeys_ = {};
 
     /**
      * @private
@@ -146,6 +153,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    */
   disposeInternal() {
     unlisten(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
+    getValues(this.tileChangeKeys_).forEach(unlistenByKey);
     super.disposeInternal();
   }
 
@@ -154,30 +162,50 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    */
   getTile(z, x, y, pixelRatio, projection) {
     const tile = /** @type {import("../../VectorImageTile.js").default} */ (super.getTile(z, x, y, pixelRatio, projection));
-    if (tile.getState() === TileState.IDLE) {
-      const key = listen(tile, EventType.CHANGE, function() {
-        if (tile.sourceTilesLoaded) {
-          this.updateExecutorGroup_(tile, pixelRatio, projection);
-          if (!this.tilesToPrepare_) {
-            this.tilesToPrepare_ = {};
+    const uid = getUid(tile);
+    if (!(uid in this.tileChangeKeys_) && tile.getState() === TileState.IDLE) {
+      this.tileChangeKeys_[uid] = listen(tile, EventType.CHANGE, function() {
+        const state = tile.getState();
+        if (state === TileState.ABORT || tile.sourceTilesLoaded) {
+          unlistenByKey(this.tileChangeKeys_[uid]);
+          delete this.tileChangeKeys_[uid];
+          if (tile.sourceTilesLoaded) {
+            this.updateExecutorGroup_(tile, pixelRatio, projection);
+            //FIXME This should be done by the tile, and VectorImage tiles should be layer specific
             tile.setState(TileState.LOADED);
-          } else {
-            const tileId = getUid(tile);
-            if (!(tileId in this.tilesToPrepare_)) {
-              this.tilesToPrepare_[tileId] = [tile, pixelRatio, projection];
-            }
           }
-          unlistenByKey(key);
         }
       }.bind(this));
     }
     if (tile.getState() === TileState.LOADED) {
       this.updateExecutorGroup_(tile, pixelRatio, projection);
-      this.renderTileImage_(tile, pixelRatio, projection);
+      if (tile.hasContext(this.getLayer())) {
+        this.renderTileImage_(tile, pixelRatio, projection);
+      } else {
+        this.tilesWithoutImage_.push(tile);
+      }
     }
     return tile;
   }
 
+  /**
+   * @inheritDoc
+   */
+  loadedTileCallback(tiles, zoom, tile) {
+    if (!tile.hasContext(this.getLayer())) {
+      this.tilesWithoutImage_.push(tile);
+      return false;
+    }
+    return super.loadedTileCallback(tiles, zoom, tile);
+  }
+
+  /**
+   * @inheritdoc
+   */
+  isDrawableTile(tile) {
+    return super.isDrawableTile(tile) && tile.hasContext(this.getLayer());
+  }
+
   /**
    * @inheritDoc
    */
@@ -386,11 +414,15 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    * @inheritDoc
    */
   renderFrame(frameState, layerState) {
+    this.tilesWithoutImage_ = [];
     super.renderFrame(frameState, layerState);
 
     const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+    const viewHints = frameState.viewHints;
+    const hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
     const renderMode = layer.getRenderMode();
     if (renderMode === VectorTileRenderType.IMAGE) {
+      this.renderMissingTileImages_(hifi, frameState);
       return this.container_;
     }
 
@@ -424,8 +456,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     if (declutterReplays) {
       this.declutterTree_.clear();
     }
-    const viewHints = frameState.viewHints;
-    const hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
     const tiles = this.renderedTiles;
     const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
     const clips = [];
@@ -487,30 +517,24 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       canvas.style.opacity = opacity;
     }
 
-    if (this.tilesToPrepare_) {
-      for (const key in this.tilesToPrepare_) {
-        if (!hifi || Date.now() - frameState.time >= 16) {
-          break;
-        }
-        const args = this.tilesToPrepare_[key];
-        delete this.tilesToPrepare_[key];
-        const tile = args[0];
-        if (!tile.disposed) {
-          frameState.animate = true;
-          this.renderTileImage_.apply(this, args);
-          tile.setState(TileState.LOADED);
-        }
-      }
-      if (Object.keys(this.tilesToPrepare_).length > 0) {
-        frameState.animate = true;
-      } else {
-        this.tilesToPrepare_ = null;
-      }
-    }
+    this.renderMissingTileImages_(hifi, frameState);
 
     return this.container_;
   }
 
+  renderMissingTileImages_(hifi, frameState) {
+    if (hifi) {
+      while (this.tilesWithoutImage_.length && Date.now() - frameState.time < 100) {
+        const tile = this.tilesWithoutImage_.pop();
+        frameState.animate = true;
+        this.renderTileImage_(tile, frameState.pixelRatio, frameState.viewState.projection);
+      }
+    }
+    if (this.tilesWithoutImage_.length) {
+      frameState.animate = true;
+    }
+  }
+
   /**
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
    * @param {number} squaredTolerance Squared tolerance.