Merge pull request #9629 from ahocevar/reuse-vectortile-overlay

Clear overlay canvas when reusing containers

src/ol/layer/Base.js

@@ -93,7 +93,8 @@ class BaseLayer extends BaseObject {
     /** @type {import("./Layer.js").State} */
     const state = this.state_ || /** @type {?} */ ({
       layer: this,
-      managed: opt_managed === undefined ? true : opt_managed
+      managed: opt_managed === undefined ? true : opt_managed,
+      hasOverlay: false
     });
     state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1);
     state.sourceState = this.getSourceState();

src/ol/layer/Layer.js

@@ -45,6 +45,7 @@ import SourceState from '../source/State.js';
  * @property {SourceState} sourceState
  * @property {boolean} visible
  * @property {boolean} managed
+ * @property {boolean} hasOverlay Set by the renderer when an overlay for points and text is used.
  * @property {import("../extent.js").Extent} [extent]
  * @property {number} zIndex
  * @property {number} maxResolution

src/ol/renderer/Composite.js

@@ -87,9 +87,11 @@ class CompositeMapRenderer extends MapRenderer {
     const viewResolution = frameState.viewState.resolution;
 
     this.children_.length = 0;
+    let hasOverlay = false;
     let previousElement = null;
     for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
       const layerState = layerStatesArray[i];
+      hasOverlay = hasOverlay || layerState.hasOverlay;
       frameState.layerIndex = i;
       if (!visibleAtResolution(layerState, viewResolution) ||
         (layerState.sourceState != SourceState.READY && layerState.sourceState != SourceState.UNDEFINED)) {
@@ -98,8 +100,15 @@ class CompositeMapRenderer extends MapRenderer {
 
       const layer = layerState.layer;
       const element = layer.render(frameState, previousElement);
+      if (!element) {
+        continue;
+      }
+      if ((element !== previousElement || i == ii - 1) && element.childElementCount === 2 && !hasOverlay) {
+        element.removeChild(element.lastElementChild);
+      }
       if (element !== previousElement) {
         this.children_.push(element);
+        hasOverlay = false;
         previousElement = element;
       }
     }

src/ol/renderer/canvas/VectorTileLayer.js

@@ -64,6 +64,11 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      */
     this.overlayContext_ = null;
 
+    /**
+     * @type {string}
+     */
+    this.overlayContextUid_;
+
     /**
      * The transform for rendered pixels to viewport CSS pixels for the overlay canvas.
      * @private
@@ -126,6 +131,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     super.useContainer(target, transform, opacity);
     if (containerReused && !this.containerReused && !overlayContext) {
       this.overlayContext_ = null;
+      this.overlayContextUid_ = undefined;
     }
     if (this.containerReused && overlayContext) {
       this.overlayContext_ = overlayContext;
@@ -136,6 +142,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       style.position = 'absolute';
       style.transformOrigin = 'top left';
       this.overlayContext_ = overlayContext;
+      this.overlayContextUid_ = getUid(overlayContext);
     }
     if (this.container.childElementCount === 1) {
       this.container.appendChild(this.overlayContext_.canvas);
@@ -219,6 +226,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    * @inheritDoc
    */
   prepareFrame(frameState) {
+    const layerState = frameState.layerStatesArray[frameState.layerIndex];
+    layerState.hasOverlay = true;
     const layerRevision = this.getLayer().getRevision();
     if (this.renderedLayerRevision_ != layerRevision) {
       this.renderedTiles.length = 0;
@@ -434,7 +443,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       if (canvas.style.transform !== canvasTransform) {
         canvas.style.transform = canvasTransform;
       }
-    } else if (!this.containerReused) {
+    } else if (getUid(context) === this.overlayContextUid_) {
       context.clearRect(0, 0, width, height);
     }