Merge pull request #9357 from ahocevar/vectortile-view-resolution-2

Render vector tiles at the view resolution

src/ol/VectorRenderTile.js

@@ -12,8 +12,10 @@ import {createCanvasContext2D} from './dom.js';
  * @property {boolean} dirty
  * @property {null|import("./render.js").OrderFunction} renderedRenderOrder
  * @property {number} renderedTileRevision
+ * @property {number} renderedResolution
  * @property {number} renderedRevision
  * @property {number} renderedZ
+ * @property {number} renderedTileResolution
  * @property {number} renderedTileZ
  */
 
@@ -64,6 +66,11 @@ class VectorRenderTile extends Tile {
      */
     this.replayState_ = {};
 
+    /**
+     * @type {number}
+     */
+    this.wantedResolution;
+
     /**
      * @type {!function(import("./VectorRenderTile.js").default):Array<import("./VectorTile.js").default>}
      */
@@ -156,7 +163,9 @@ class VectorRenderTile extends Tile {
       this.replayState_[key] = {
         dirty: false,
         renderedRenderOrder: null,
+        renderedResolution: NaN,
         renderedRevision: -1,
+        renderedTileResolution: NaN,
         renderedTileRevision: -1,
         renderedZ: -1,
         renderedTileZ: -1
@@ -167,10 +176,9 @@ class VectorRenderTile extends Tile {
 
   /**
    * @inheritDoc
-   * @return {Array<import("./VectorTile.js").default>} Source tiles for this tile.
    */
   load() {
-    return this.getSourceTiles_(this);
+    this.getSourceTiles_(this);
   }
 }
 

src/ol/render/canvas/Executor.js

@@ -9,7 +9,7 @@ import {lineStringLength} from '../../geom/flat/length.js';
 import {drawTextOnPath} from '../../geom/flat/textpath.js';
 import {transform2D} from '../../geom/flat/transform.js';
 import {isEmpty} from '../../obj.js';
-import {drawImage, resetTransform, defaultPadding, defaultTextBaseline} from '../canvas.js';
+import {drawImage, defaultPadding, defaultTextBaseline} from '../canvas.js';
 import CanvasInstruction from './Instruction.js';
 import {TEXT_ALIGN} from './TextBuilder.js';
 import {
@@ -382,12 +382,13 @@ class Executor extends Disposable {
     if (this.alignFill_) {
       const origin = applyTransform(this.renderedTransform_, [0, 0]);
       const repeatSize = 512 * this.pixelRatio;
+      context.save();
       context.translate(origin[0] % repeatSize, origin[1] % repeatSize);
       context.rotate(this.viewRotation_);
     }
     context.fill();
     if (this.alignFill_) {
-      context.setTransform.apply(context, resetTransform);
+      context.restore();
     }
   }
 

src/ol/renderer/canvas/TileLayer.js

@@ -4,7 +4,7 @@
 import {getUid} from '../../util.js';
 import TileRange from '../../TileRange.js';
 import TileState from '../../TileState.js';
-import {createEmpty, getIntersection, getTopLeft} from '../../extent.js';
+import {createEmpty, equals, getIntersection, getTopLeft} from '../../extent.js';
 import CanvasLayerRenderer from './Layer.js';
 import {apply as applyTransform, compose as composeTransform, makeInverse, toString as transformToString} from '../../transform.js';
 
@@ -21,6 +21,12 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
   constructor(tileLayer) {
     super(tileLayer);
 
+    /**
+     * Rendered extent has changed since the previous `renderFrame()` call
+     * @type {boolean}
+     */
+    this.extentChanged = true;
+
     /**
      * @private
      * @type {import("../../extent.js").Extent}
@@ -82,11 +88,12 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
    * @param {number} z Tile coordinate z.
    * @param {number} x Tile coordinate x.
    * @param {number} y Tile coordinate y.
-   * @param {number} pixelRatio Pixel ratio.
+   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {import("../../proj/Projection.js").default} projection Projection.
    * @return {!import("../../Tile.js").default} Tile.
    */
-  getTile(z, x, y, pixelRatio, projection) {
+  getTile(z, x, y, frameState) {
+    const pixelRatio = frameState.pixelRatio;
+    const projection = frameState.viewState.projection;
     const tileLayer = /** @type {import("../../layer/Tile.js").default} */ (this.getLayer());
     const tileSource = tileLayer.getSource();
     let tile = tileSource.getTile(z, x, y, pixelRatio, projection);
@@ -187,7 +194,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     this.newTiles_ = false;
     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);
+        const tile = this.getTile(z, x, y, frameState);
         if (this.isDrawableTile(tile)) {
           const uid = getUid(this);
           if (tile.getState() == TileState.LOADED) {
@@ -301,6 +308,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
 
     this.renderedRevision = sourceRevision;
     this.renderedResolution = tileResolution;
+    this.extentChanged = !this.renderedExtent_ || !equals(this.renderedExtent_, canvasExtent);
     this.renderedExtent_ = canvasExtent;
 
     this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio,

src/ol/renderer/canvas/VectorTileLayer.js

@@ -27,7 +27,7 @@ import {
   makeInverse
 } from '../../transform.js';
 import CanvasExecutorGroup, {replayDeclutter} from '../../render/canvas/ExecutorGroup.js';
-import {clear} from '../../obj.js';
+import {clear, isEmpty} from '../../obj.js';
 
 
 /**
@@ -179,15 +179,25 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   /**
    * @inheritDoc
    */
-  getTile(z, x, y, pixelRatio, projection) {
+  getTile(z, x, y, frameState) {
-    const tile = /** @type {import("../../VectorRenderTile.js").default} */ (super.getTile(z, x, y, pixelRatio, projection));
+    const tile = /** @type {import("../../VectorRenderTile.js").default} */ (super.getTile(z, x, y, frameState));
+    const pixelRatio = frameState.pixelRatio;
+    const viewState = frameState.viewState;
+    const resolution = viewState.resolution;
+    const projection = viewState.projection;
     if (tile.getState() < TileState.LOADED) {
+      tile.wantedResolution = resolution;
       const tileUid = getUid(tile);
       if (!(tileUid in this.tileListenerKeys_)) {
         const listenerKey = listen(tile, EventType.CHANGE, this.prepareTile.bind(this, tile, pixelRatio, projection));
         this.tileListenerKeys_[tileUid] = listenerKey;
       }
     } else {
+      const viewHints = frameState.viewHints;
+      const hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+      if (hifi || !tile.wantedResolution) {
+        tile.wantedResolution = resolution;
+      }
       this.prepareTile(tile, pixelRatio, projection);
     }
     return tile;
@@ -230,8 +240,10 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const revision = layer.getRevision();
     const renderOrder = layer.getRenderOrder() || null;
 
+    const resolution = tile.wantedResolution;
     const builderState = tile.getReplayState(layer);
-    if (!builderState.dirty && builderState.renderedRevision == revision &&
+    if (!builderState.dirty && builderState.renderedResolution === resolution &&
+        builderState.renderedRevision == revision &&
         builderState.renderedRenderOrder == renderOrder && builderState.renderedZ === tile.sourceZ) {
       return;
     }
@@ -239,11 +251,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const source = layer.getSource();
     const sourceTileGrid = source.getTileGrid();
     const tileGrid = source.getTileGridForProjection(projection);
-    const zoom = tile.tileCoord[0];
-    const resolution = tileGrid.getResolution(zoom);
     const tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
 
-    const sourceTiles = tile.load();
+    const sourceTiles = source.getSourceTiles(pixelRatio, projection, tile);
     const layerUid = getUid(layer);
     const executorGroups = tile.executorGroups[layerUid];
     if (executorGroups) {
@@ -306,6 +316,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     builderState.renderedRevision = revision;
     builderState.renderedZ = tile.sourceZ;
     builderState.renderedRenderOrder = renderOrder;
+    builderState.renderedResolution = resolution;
   }
 
   /**
@@ -421,6 +432,11 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       return this.container_;
     }
 
+    if (!isEmpty(this.renderTileImageQueue_) && !this.extentChanged) {
+      this.renderTileImages_(hifi, frameState);
+      return this.container_;
+    }
+
     const context = this.overlayContext_;
     const declutterReplays = layer.getDeclutter() ? {} : null;
     const source = layer.getSource();
@@ -539,7 +555,11 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       if (this.declutterTree_ && layer.getRenderMode() === VectorTileRenderType.IMAGE) {
         this.declutterTree_.clear();
       }
-      this.renderTileImage_(tile, frameState.pixelRatio, frameState.viewState.projection);
+      const viewState = frameState.viewState;
+      const tileGrid = layer.getSource().getTileGridForProjection(viewState.projection);
+      const tileResolution = tileGrid.getResolution(tile.tileCoord[0]);
+      const renderPixelRatio = frameState.pixelRatio / tile.wantedResolution * tileResolution;
+      this.renderTileImage_(tile, frameState.pixelRatio, renderPixelRatio, viewState.projection);
     }
     clear(this.renderTileImageQueue_);
   }
@@ -582,16 +602,18 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const replayState = tile.getReplayState(layer);
     const revision = layer.getRevision();
     const sourceZ = tile.sourceZ;
-    return replayState.renderedTileRevision !== revision || replayState.renderedTileZ !== sourceZ;
+    const resolution = tile.wantedResolution;
+    return replayState.renderedTileResolution !== resolution || replayState.renderedTileRevision !== revision || replayState.renderedTileZ !== sourceZ;
   }
 
   /**
    * @param {import("../../VectorRenderTile.js").default} tile Tile.
    * @param {number} pixelRatio Pixel ratio.
+   * @param {number} renderPixelRatio Render pixel ratio.
    * @param {import("../../proj/Projection.js").default} projection Projection.
    * @private
    */
-  renderTileImage_(tile, pixelRatio, projection) {
+  renderTileImage_(tile, pixelRatio, renderPixelRatio, projection) {
     const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
     const replayState = tile.getReplayState(layer);
     const revision = layer.getRevision();
@@ -607,15 +629,20 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const size = source.getTilePixelSize(z, pixelRatio, projection);
     context.canvas.width = size[0];
     context.canvas.height = size[1];
+    const canvasTransform = resetTransform(this.tmpTransform_);
+    const renderScale = pixelRatio / renderPixelRatio;
+    scaleTransform(canvasTransform, renderScale, renderScale);
+    context.setTransform.apply(context, canvasTransform);
     const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
     for (let i = 0, ii = executorGroups.length; i < ii; ++i) {
       const executorGroup = executorGroups[i];
-      const pixelScale = pixelRatio / resolution;
+      const pixelScale = renderPixelRatio / resolution;
       const transform = resetTransform(this.tmpTransform_);
       scaleTransform(transform, pixelScale, -pixelScale);
       translateTransform(transform, -tileExtent[0], -tileExtent[3]);
       executorGroup.execute(context, transform, 0, {}, true, IMAGE_REPLAYS[layer.getRenderMode()]);
     }
+    replayState.renderedTileResolution = tile.wantedResolution;
   }
 
   /**

test/spec/ol/source/vectortile.test.js

@@ -59,7 +59,7 @@ describe('ol.source.VectorTile', function() {
       tile.load();
       const key = listen(tile, 'change', function(e) {
         if (tile.getState() === TileState.LOADED) {
-          const sourceTile = tile.load()[0];
+          const sourceTile = source.getSourceTiles(1, source.getProjection(), tile)[0];
           expect(sourceTile.getFeatures().length).to.be.greaterThan(0);
           unlistenByKey(key);
           done();

test/spec/ol/vectorrendertile.test.js

@@ -85,7 +85,7 @@ describe('ol.VectorRenderTile', function() {
     const key = listen(tile, EventType.CHANGE, function() {
       if (tile.getState() === TileState.LOADED) {
         unlistenByKey(key);
-        const sourceTiles = tile.load();
+        const sourceTiles = source.getSourceTiles(1, source.getProjection(), tile);
         expect(sourceTiles.length).to.be(1);
         expect(sourceTiles[0].tileCoord).to.eql([0, 16, 9]);
         done();
@@ -126,7 +126,7 @@ describe('ol.VectorRenderTile', function() {
     listenOnce(tile, 'change', function() {
       expect(tile.getState()).to.be(TileState.LOADED);
       expect(tile.loadingSourceTiles).to.be(0);
-      const sourceTiles = tile.load();
+      const sourceTiles = source.getSourceTiles(1, source.getProjection(), tile);
       expect(sourceTiles.length).to.be(4);
       for (let i = 0, ii = sourceTiles.length; i < ii; ++i) {
         expect(sourceTiles[i].consumers).to.be(1);