New render event API (non functional yet)

src/ol/renderer/canvas/VectorTileLayer.js

@@ -5,7 +5,7 @@ import {getUid} from '../../util.js';
 import {createCanvasContext2D} from '../../dom.js';
 import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
-import {listen, unlisten} from '../../events.js';
+import {listen, unlisten, unlistenByKey} from '../../events.js';
 import EventType from '../../events/EventType.js';
 import rbush from 'rbush';
 import {buffer, containsCoordinate, equals, getIntersection, getTopLeft, intersects} from '../../extent.js';
@@ -108,6 +108,12 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      */
     this.renderedLayerRevision_;
 
+    /**
+     * @private
+     * @type {Array.<import("../../VectorImageTile.js").default>}
+     */
+    this.tilesToRender_ = [];
+
     /**
      * @private
      * @type {import("../../transform.js").Transform}
@@ -134,11 +140,13 @@ 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.createExecutorGroup_(/** @type {import("../../VectorImageTile.js").default} */ (tile), pixelRatio, projection);
-      if (this.context) {
-        this.renderTileImage_(/** @type {import("../../VectorImageTile.js").default} */ (tile), pixelRatio, projection);
-      }
+    if (tile.getState() === TileState.IDLE) {
+      const key = listen(tile, EventType.CHANGE, function() {
+        if (tile.getState() === TileState.LOADING && tile.sourceTilesLoaded) {
+          this.tilesToRender_.push(tile);
+          unlistenByKey(key);
+        }
+      }.bind(this));
     }
     return tile;
   }