Reuse container for raster and vector image layers

src/ol/renderer/canvas/Layer.js

@@ -114,14 +114,6 @@ class CanvasLayerRenderer extends LayerRenderer {
     }
   }
 
-  /**
-   * @inheritDoc
-   */
-  disposeInternal() {
-    this.context.canvas.width = this.context.canvas.height = 0;
-    super.disposeInternal();
-  }
-
   /**
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.

src/ol/renderer/canvas/VectorImageLayer.js

@@ -78,6 +78,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
 
     if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
       let skippedFeatures = this.skippedFeatures_;
+      vectorRenderer.useContainer(null, null);
       const context = vectorRenderer.context;
       const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
         declutterItems: [],
@@ -94,7 +95,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
         if (vectorRenderer.prepareFrame(imageFrameState, layerState) &&
               (vectorRenderer.replayGroupChanged ||
               !equals(skippedFeatures, newSkippedFeatures))) {
-          vectorRenderer.renderFrame(imageFrameState, layerState);
+          vectorRenderer.renderFrame(imageFrameState, layerState, null);
           renderDeclutterItems(imageFrameState, null);
           skippedFeatures = newSkippedFeatures;
           callback();

src/ol/renderer/canvas/VectorTileLayer.js

@@ -111,14 +111,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     this.zDirection = 1;
   }
 
-  /**
-   * @inheritDoc
-   */
-  disposeInternal() {
-    this.overlayContext_.canvas.width = this.overlayContext_.canvas.height = 0;
-    super.disposeInternal();
-  }
-
   /**
    * @inheritDoc
    */
@@ -399,14 +391,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const renderMode = layer.getRenderMode();
 
     if (renderMode === VectorTileRenderType.IMAGE) {
-      this.renderTileImages_(hifi, frameState);
       return this.container;
     }
 
-    if (!isEmpty(this.renderTileImageQueue_) && !this.extentChanged) {
-      this.renderTileImages_(hifi, frameState);
-    }
-
     const context = this.overlayContext_;
     const declutterReplays = layer.getDeclutter() ? {} : null;
     const source = layer.getSource();

src/ol/source/Raster.js

@@ -444,7 +444,11 @@ function getImageData(layer, frameState, layerState) {
   }
   const width = frameState.size[0];
   const height = frameState.size[1];
-  const element = renderer.renderFrame(frameState, layerState);
+  const container = renderer.renderFrame(frameState, layerState, null);
+  let element;
+  if (container) {
+    element = container.firstElementChild;
+  }
   if (!(element instanceof HTMLCanvasElement)) {
     throw new Error('Unsupported rendered element: ' + element);
   }

test/spec/ol/renderer/canvas/vectorlayer.test.js

@@ -307,7 +307,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       let rendered = false;
       if (renderer.prepareFrame(frameState, {})) {
         rendered = true;
-        renderer.renderFrame(frameState, layer.getLayerState());
+        renderer.renderFrame(frameState, layer.getLayerState(), null);
       }
       expect(rendered).to.be(true);
     });

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -250,10 +250,10 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       renderer.renderFrame(frameState, {});
       const replayState = renderer.renderedTiles[0].getReplayState(layer);
       const revision = replayState.renderedTileRevision;
-      renderer.renderFrame(frameState, {});
+      renderer.renderFrame(frameState, {}, null);
       expect(replayState.renderedTileRevision).to.be(revision);
       layer.changed();
-      renderer.renderFrame(frameState, {});
+      renderer.renderFrame(frameState, {}, null);
       expect(replayState.renderedTileRevision).to.be(revision + 1);
       expect(Object.keys(renderer.tileListenerKeys_).length).to.be(0);
     });