Use opacity from layer state

src/ol/renderer/canvas/ImageLayer.js

@@ -101,7 +101,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     );
     makeInverse(this.inversePixelTransform_, this.pixelTransform_);
 
-    this.useContainer(target, this.pixelTransform_);
+    this.useContainer(target, this.pixelTransform_, layerState.opacity);
 
     const context = this.context;
     const canvas = context.canvas;
@@ -140,7 +140,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     this.preRender(context, frameState);
     if (dw >= 0.5 && dh >= 0.5) {
-      const opacity = this.getLayer().getOpacity();
+      const opacity = layerState.opacity;
       let previousAlpha;
       if (opacity !== 1) {
         previousAlpha = this.context.globalAlpha;

src/ol/renderer/canvas/Layer.js

@@ -74,8 +74,9 @@ class CanvasLayerRenderer extends LayerRenderer {
    * Get a rendering container from an existing target, if compatible.
    * @param {HTMLElement} target Potential render target.
    * @param {import("../../transform").Transform} transform Transform.
+   * @param {number} opacity Opacity.
    */
-  useContainer(target, transform) {
+  useContainer(target, transform, opacity) {
     const layerClassName = this.getLayer().getClassName();
     let container, context;
     if (target) {

src/ol/renderer/canvas/TileLayer.js

@@ -233,7 +233,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       -width / 2, -height / 2
     );
 
-    this.useContainer(target, this.pixelTransform_);
+    this.useContainer(target, this.pixelTransform_, layerState.opacity);
     const context = this.context;
     const canvas = context.canvas;
 
@@ -334,7 +334,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
           clips.push(currentClip);
           clipZs.push(currentZ);
         }
-        this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, transition);
+        this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, transition, layerState.opacity);
         if (clips) {
           context.restore();
         }
@@ -377,14 +377,15 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
    * @param {number} h Height of the tile.
    * @param {number} gutter Tile gutter.
    * @param {boolean} transition Apply an alpha transition.
+   * @param {number} opacity Opacity.
    */
-  drawTileImage(tile, frameState, x, y, w, h, gutter, transition) {
+  drawTileImage(tile, frameState, x, y, w, h, gutter, transition, opacity) {
     const image = this.getTileImage(tile);
     if (!image) {
       return;
     }
     const uid = getUid(this);
-    const alpha = this.getLayer().getOpacity() * (transition ? tile.getAlpha(uid, frameState.time) : 1);
+    const alpha = opacity * (transition ? tile.getAlpha(uid, frameState.time) : 1);
     const alphaChanged = alpha !== this.context.globalAlpha;
     if (alphaChanged) {
       this.context.save();

src/ol/renderer/canvas/VectorImageLayer.js

@@ -78,7 +78,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
 
     if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
       let skippedFeatures = this.skippedFeatures_;
-      vectorRenderer.useContainer(null, null);
+      vectorRenderer.useContainer(null, null, 1);
       const context = vectorRenderer.context;
       const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
         declutterItems: [],

src/ol/renderer/canvas/VectorLayer.js

@@ -70,11 +70,11 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
   /**
    * @inheritDoc
    */
-  useContainer(target, transform) {
+  useContainer(target, transform, opacity) {
-    if (this.getLayer().getOpacity() < 1) {
+    if (opacity < 1) {
       target = null;
     }
-    super.useContainer(target, transform);
+    super.useContainer(target, transform, opacity);
   }
 
   /**
@@ -88,7 +88,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     makeScale(this.pixelTransform_, 1 / pixelRatio, 1 / pixelRatio);
     makeInverse(this.inversePixelTransform_, this.pixelTransform_);
 
-    this.useContainer(target, this.pixelTransform_);
+    this.useContainer(target, this.pixelTransform_, layerState.opacity);
     const context = this.context;
     const canvas = context.canvas;
 

src/ol/renderer/canvas/VectorTileLayer.js

@@ -114,7 +114,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   /**
    * @inheritDoc
    */
-  useContainer(target, transform) {
+  useContainer(target, transform, opacity) {
     let overlayContext;
     if (target && target.childElementCount === 2) {
       overlayContext = target.lastElementChild.getContext('2d');
@@ -123,7 +123,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       }
     }
     const containerReused = this.containerReused;
-    super.useContainer(target, transform);
+    super.useContainer(target, transform, opacity);
     if (containerReused && !this.containerReused && !overlayContext) {
       this.overlayContext_ = null;
     }