Fix type check errors in canvas tile renderers

src/ol/renderer/canvas/TileLayer.js

@@ -94,8 +94,9 @@ class CanvasTileLayerRenderer extends IntermediateCanvasRenderer {
    * @return {boolean} Tile is drawable.
    */
   isDrawableTile_(tile) {
+    const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
     const tileState = tile.getState();
-    const useInterimTilesOnError = this.getLayer().getUseInterimTilesOnError();
+    const useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
     return tileState == TileState.LOADED ||
         tileState == TileState.EMPTY ||
         tileState == TileState.ERROR && !useInterimTilesOnError;
@@ -110,14 +111,14 @@ class CanvasTileLayerRenderer extends IntermediateCanvasRenderer {
    * @return {!import("../../Tile.js").default} Tile.
    */
   getTile(z, x, y, pixelRatio, projection) {
-    const layer = this.getLayer();
+    const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
-    const source = /** @type {import("../../source/Tile.js").default} */ (layer.getSource());
+    const tileSource = /** @type {import("../../source/Tile.js").default} */ (tileLayer.getSource());
-    let tile = source.getTile(z, x, y, pixelRatio, projection);
+    let tile = tileSource.getTile(z, x, y, pixelRatio, projection);
     if (tile.getState() == TileState.ERROR) {
-      if (!layer.getUseInterimTilesOnError()) {
+      if (!tileLayer.getUseInterimTilesOnError()) {
         // When useInterimTilesOnError is false, we consider the error tile as loaded.
         tile.setState(TileState.LOADED);
-      } else if (layer.getPreload() > 0) {
+      } else if (tileLayer.getPreload() > 0) {
         // Preloaded tiles for lower resolutions might have finished loading.
         this.newTiles_ = true;
       }
@@ -140,7 +141,7 @@ class CanvasTileLayerRenderer extends IntermediateCanvasRenderer {
     const viewResolution = viewState.resolution;
     const viewCenter = viewState.center;
 
-    const tileLayer = this.getLayer();
+    const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
     const tileSource = /** @type {import("../../source/Tile.js").default} */ (tileLayer.getSource());
     const sourceRevision = tileSource.getRevision();
     const tileGrid = tileSource.getTileGridForProjection(projection);
@@ -312,13 +313,15 @@ class CanvasTileLayerRenderer extends IntermediateCanvasRenderer {
    * @param {boolean} transition Apply an alpha transition.
    */
   drawTileImage(tile, frameState, layerState, x, y, w, h, gutter, transition) {
-    const image = tile.getImage(this.getLayer());
+    const image = this.getTileImage(tile);
     if (!image) {
       return;
     }
     const uid = getUid(this);
     const alpha = transition ? tile.getAlpha(uid, frameState.time) : 1;
-    if (alpha === 1 && !this.getLayer().getSource().getOpaque(frameState.viewState.projection)) {
+    const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
+    const tileSource = /** @type {import("../../source/Tile.js").default} */ (tileLayer.getSource());
+    if (alpha === 1 && !tileSource.getOpaque(frameState.viewState.projection)) {
       this.context.clearRect(x, y, w, h);
     }
     const alphaChanged = alpha !== this.context.globalAlpha;
@@ -353,6 +356,16 @@ class CanvasTileLayerRenderer extends IntermediateCanvasRenderer {
   getImageTransform() {
     return this.imageTransform_;
   }
+
+  /**
+   * Get the image from a tile.
+   * @param {import("../../Tile.js").default} tile Tile.
+   * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
+   * @protected
+   */
+  getTileImage(tile) {
+    return /** @type {import("../../ImageTile.js").default} */ (tile).getImage();
+  }
 }
 
 

src/ol/renderer/canvas/VectorTileLayer.js

@@ -107,19 +107,27 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   getTile(z, x, y, pixelRatio, projection) {
     const tile = super.getTile(z, x, y, pixelRatio, projection);
     if (tile.getState() === TileState.LOADED) {
-      this.createReplayGroup_(tile, pixelRatio, projection);
+      this.createReplayGroup_(/** @type {import("../../VectorImageTile.js").default} */ (tile), pixelRatio, projection);
       if (this.context) {
-        this.renderTileImage_(tile, pixelRatio, projection);
+        this.renderTileImage_(/** @type {import("../../VectorImageTile.js").default} */ (tile), pixelRatio, projection);
       }
     }
     return tile;
   }
 
+  /**
+   * @inheritDoc
+   */
+  getTileImage(tile) {
+    const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
+    return /** @type {import("../../VectorImageTile.js").default} */ (tile).getImage(tileLayer);
+  }
+
   /**
    * @inheritDoc
    */
   prepareFrame(frameState, layerState) {
-    const layer = this.getLayer();
+    const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
     const layerRevision = layer.getRevision();
     if (this.renderedLayerRevision_ != layerRevision) {
       this.renderedTiles.length = 0;
@@ -142,7 +150,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    * @private
    */
   createReplayGroup_(tile, pixelRatio, projection) {
-    const layer = this.getLayer();
+    const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
     const revision = layer.getRevision();
     const renderOrder = /** @type {import("../../render.js").OrderFunction} */ (layer.getRenderOrder()) || null;
 
@@ -238,11 +246,10 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     /** @type {!Object<string, boolean>} */
     const features = {};
 
-    /** @type {Array<import("../../VectorImageTile.js").default>} */
+    const renderedTiles = /** @type {Array<import("../../VectorImageTile.js").default>} */ (this.renderedTiles);
-    const renderedTiles = this.renderedTiles;
 
     let bufferedExtent, found;
-    let i, ii, replayGroup;
+    let i, ii;
     for (i = 0, ii = renderedTiles.length; i < ii; ++i) {
       const tile = renderedTiles[i];
       bufferedExtent = buffer(tile.extent, hitTolerance * resolution, bufferedExtent);
@@ -254,7 +261,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         if (sourceTile.getState() != TileState.LOADED) {
           continue;
         }
-        replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
+        const replayGroup = /** @type {CanvasReplayGroup} */ (sourceTile.getReplayGroup(layer,
+          tile.tileCoord.toString()));
         found = found || replayGroup.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, {},
           /**
            * @param {import("../../Feature.js").default|import("../../render/Feature.js").default} feature Feature.
@@ -324,7 +332,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    * @inheritDoc
    */
   postCompose(context, frameState, layerState) {
-    const layer = this.getLayer();
+    const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
     const renderMode = layer.getRenderMode();
     if (renderMode != VectorTileRenderType.IMAGE) {
       const declutterReplays = layer.getDeclutter() ? {} : null;
@@ -361,7 +369,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
           if (sourceTile.getState() != TileState.LOADED) {
             continue;
           }
-          const replayGroup = sourceTile.getReplayGroup(layer, tileCoord.toString());
+          const replayGroup = /** @type {CanvasReplayGroup} */ (sourceTile.getReplayGroup(layer, tileCoord.toString()));
           if (!replayGroup || !replayGroup.hasReplays(replayTypes)) {
             // sourceTile was not yet loaded when this.createReplayGroup_() was
             // called, or it has no replays of the types we want to render
@@ -443,7 +451,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    * @private
    */
   renderTileImage_(tile, pixelRatio, projection) {
-    const layer = this.getLayer();
+    const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
     const replayState = tile.getReplayState(layer);
     const revision = layer.getRevision();
     const replays = IMAGE_REPLAYS[layer.getRenderMode()];
@@ -468,7 +476,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         const transform = resetTransform(this.tmpTransform_);
         scaleTransform(transform, pixelScale, -pixelScale);
         translateTransform(transform, -tileExtent[0], -tileExtent[3]);
-        const replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
+        const replayGroup = /** @type {CanvasReplayGroup} */ (sourceTile.getReplayGroup(layer,
+          tile.tileCoord.toString()));
         replayGroup.replay(context, transform, 0, {}, true, replays);
       }
     }