Also consider lower resolution tiles as used tiles

src/ol/PluggableMap.js

@@ -47,7 +47,7 @@ import {create as createTransform, apply as applyTransform} from './transform.js
  * @property {import("./size.js").Size} size
  * @property {!Object<string, boolean>} skippedFeatureUids
  * @property {TileQueue} tileQueue
- * @property {Object<string, Object<string, import("./TileRange.js").default>>} usedTiles
+ * @property {!Object<string, Object<string, boolean>>} usedTiles
  * @property {Array<number>} viewHints
  * @property {!Object<string, Object<string, boolean>>} wantedTiles
  */

src/ol/TileCache.js

@@ -21,8 +21,7 @@ class TileCache extends LRUCache {
   expireCache(usedTiles) {
     while (this.canExpireCache()) {
       const tile = this.peekLast();
-      const zKey = tile.tileCoord[0].toString();
-      if (zKey in usedTiles && usedTiles[zKey].contains(tile.tileCoord)) {
+      if (tile.getKey() in usedTiles) {
         break;
       } else {
         this.pop().dispose();

src/ol/renderer/Layer.js

@@ -192,26 +192,18 @@ class LayerRenderer extends Observable {
   }
 
   /**
-   * @param {!Object<string, !Object<string, import("../TileRange.js").default>>} usedTiles Used tiles.
+   * @param {!Object<string, !Object<string, boolean>>} usedTiles Used tiles.
    * @param {import("../source/Tile.js").default} tileSource Tile source.
-   * @param {number} z Z.
-   * @param {import("../TileRange.js").default} tileRange Tile range.
+   * @param {import('../Tile.js').default} tile Tile.
    * @protected
    */
-  updateUsedTiles(usedTiles, tileSource, z, tileRange) {
+  updateUsedTiles(usedTiles, tileSource, tile) {
     // FIXME should we use tilesToDrawByZ instead?
     const tileSourceKey = getUid(tileSource);
-    const zKey = z.toString();
-    if (tileSourceKey in usedTiles) {
-      if (zKey in usedTiles[tileSourceKey]) {
-        usedTiles[tileSourceKey][zKey].extend(tileRange);
-      } else {
-        usedTiles[tileSourceKey][zKey] = tileRange;
-      }
-    } else {
+    if (!(tileSourceKey in usedTiles)) {
       usedTiles[tileSourceKey] = {};
-      usedTiles[tileSourceKey][zKey] = tileRange;
     }
+    usedTiles[tileSourceKey][tile.getKey()] = true;
   }
 
   /**

src/ol/renderer/canvas/TileLayer.js

@@ -283,6 +283,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
 
         this.drawTileImage(tile, frameState, layerState, x, y, w, h, tileGutter, z === currentZ);
         this.renderedTiles.push(tile);
+        this.updateUsedTiles(frameState.usedTiles, tileSource, tile);
       }
     }
 
@@ -291,7 +292,6 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     this.renderedResolution = tileResolution;
     this.renderedExtent_ = canvasExtent;
 
-    this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
     this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio,
       projection, extent, z, tileLayer.getPreload());
     this.scheduleExpireCache(frameState, tileSource);