Reuse target for image layers

src/ol/renderer/Composite.js

@@ -88,7 +88,7 @@ class CompositeMapRenderer extends MapRenderer {
     const viewResolution = frameState.viewState.resolution;
 
     this.children_.length = 0;
-    const previousElement = null;
+    let previousElement = null;
     for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
       const layerState = layerStatesArray[i];
       if (!visibleAtResolution(layerState, viewResolution) ||
@@ -100,6 +100,7 @@ class CompositeMapRenderer extends MapRenderer {
       const element = layer.render(frameState, previousElement);
       if (element !== previousElement) {
         this.children_.push(element);
+        previousElement = element;
       }
     }
     super.renderFrame(frameState);

src/ol/renderer/canvas/ImageLayer.js

@@ -6,7 +6,7 @@ import ViewHint from '../../ViewHint.js';
 import {containsExtent, intersects} from '../../extent.js';
 import {getIntersection, isEmpty} from '../../extent.js';
 import CanvasLayerRenderer from './Layer.js';
-import {compose as composeTransform, makeInverse, toString as transformToString} from '../../transform.js';
+import {compose as composeTransform, makeInverse, toString as transformToString, apply as applyTransform} from '../../transform.js';
 
 /**
  * @classdesc
@@ -72,7 +72,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
   /**
    * @inheritDoc
    */
-  renderFrame(frameState, layerState) {
+  renderFrame(frameState, layerState, target) {
     const image = this.image_;
     const imageExtent = image.getExtent();
     const imageResolution = image.getResolution();
@@ -159,7 +159,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
       canvas.style.transform = canvasTransform;
     }
 
-    return canvas;
+    return this.container;
 
   }
 

src/ol/renderer/canvas/Layer.js

@@ -85,6 +85,7 @@ class CanvasLayerRenderer extends LayerRenderer {
       container = target;
       reused = true;
     } else {
+      context = null;
       container = this.container;
       if (!container) {
         container = document.createElement('div');

src/ol/renderer/canvas/TileLayer.js

@@ -309,8 +309,9 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
         const y = Math.round(floatY);
         const w = nextX - x;
         const h = nextY - y;
+        const transition = z === currentZ;
 
-        if (clips) {
+        if (clips && (!transition || tile.getAlpha(getUid(this), frameState.time) === 1)) {
         // Clip mask for regions in this tile that already filled by a higher z tile
           context.save();
           currentClip = [x, y, x + w, y, x + w, y + h, x, y + h];
@@ -334,7 +335,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
           clips.push(currentClip);
           clipZs.push(currentZ);
         }
-        this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, z === currentZ);
+        this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, transition);
         if (clips) {
           context.restore();
         }