diff --git a/src/ol/renderer/canvas/Layer.js b/src/ol/renderer/canvas/Layer.js index 6edcbe4591..178b906f7d 100644 --- a/src/ol/renderer/canvas/Layer.js +++ b/src/ol/renderer/canvas/Layer.js @@ -17,7 +17,6 @@ import { getTopRight, } from '../../extent.js'; import {createCanvasContext2D} from '../../dom.js'; -import {cssOpacity} from '../../css.js'; /** * @abstract @@ -95,8 +94,9 @@ class CanvasLayerRenderer extends LayerRenderer { let container, context; if ( target && - target.style.opacity === cssOpacity(opacity) && - target.className === layerClassName + target.className === layerClassName && + target.style.opacity === '' && + opacity === 1 ) { const canvas = target.firstElementChild; if (canvas instanceof HTMLCanvasElement) { diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js index cc6e6b9221..7b5eb35473 100644 --- a/src/ol/renderer/canvas/VectorLayer.js +++ b/src/ol/renderer/canvas/VectorLayer.js @@ -150,19 +150,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer { this.clipping = true; } - /** - * Get a rendering container from an existing target, if compatible. - * @param {HTMLElement} target Potential render target. - * @param {string} transform CSS Transform. - * @param {number} opacity Opacity. - */ - useContainer(target, transform, opacity) { - if (opacity < 1) { - target = null; - } - super.useContainer(target, transform, opacity); - } - /** * @param {ExecutorGroup} executorGroup Executor group. * @param {import("../../PluggableMap.js").FrameState} frameState Frame state. diff --git a/test/rendering/cases/layer-tile-stack-opacity/expected.png b/test/rendering/cases/layer-tile-stack-opacity/expected.png new file mode 100644 index 0000000000..89db24d82f Binary files /dev/null and b/test/rendering/cases/layer-tile-stack-opacity/expected.png differ diff --git a/test/rendering/cases/layer-tile-stack-opacity/main.js b/test/rendering/cases/layer-tile-stack-opacity/main.js new file mode 100644 index 0000000000..b8f7a9d052 --- /dev/null +++ b/test/rendering/cases/layer-tile-stack-opacity/main.js @@ -0,0 +1,47 @@ +import Map from '../../../../src/ol/Map.js'; +import TileLayer from '../../../../src/ol/layer/Tile.js'; +import View from '../../../../src/ol/View.js'; +import XYZ from '../../../../src/ol/source/XYZ.js'; +import {fromLonLat} from '../../../../src/ol/proj.js'; + +const center = fromLonLat([-80.4, 32.49]); + +const layer1 = new TileLayer({ + source: new XYZ({ + url: '/data/tiles/south-carolina/{z}/{x}/1-{y}.png', + transition: 0, + }), +}); +const layer2 = new TileLayer({ + source: new XYZ({ + url: '/data/tiles/south-carolina/{z}/{x}/2-{y}.png', + transition: 0, + }), + opacity: 0.5, +}); +const layer3 = new TileLayer({ + source: new XYZ({ + url: '/data/tiles/south-carolina/{z}/{x}/3-{y}.png', + transition: 0, + }), + opacity: 0.5, +}); +const layer4 = new TileLayer({ + source: new XYZ({ + url: '/data/tiles/south-carolina/{z}/{x}/4-{y}.png', + transition: 0, + }), + opacity: 0.5, +}); + +new Map({ + pixelRatio: 1, + layers: [layer1, layer2, layer3, layer4], + target: 'map', + view: new View({ + center: center, + zoom: 11.4, + }), +}); + +render(); diff --git a/test/rendering/data/tiles/south-carolina/11/566/1-828.png b/test/rendering/data/tiles/south-carolina/11/566/1-828.png new file mode 100644 index 0000000000..8be510c7b2 Binary files /dev/null and b/test/rendering/data/tiles/south-carolina/11/566/1-828.png differ diff --git a/test/rendering/data/tiles/south-carolina/11/566/2-828.png b/test/rendering/data/tiles/south-carolina/11/566/2-828.png new file mode 100644 index 0000000000..b1792f6d7b Binary files /dev/null and b/test/rendering/data/tiles/south-carolina/11/566/2-828.png differ diff --git a/test/rendering/data/tiles/south-carolina/11/566/3-828.png b/test/rendering/data/tiles/south-carolina/11/566/3-828.png new file mode 100644 index 0000000000..6cfc78af6c Binary files /dev/null and b/test/rendering/data/tiles/south-carolina/11/566/3-828.png differ diff --git a/test/rendering/data/tiles/south-carolina/11/566/4-828.png b/test/rendering/data/tiles/south-carolina/11/566/4-828.png new file mode 100644 index 0000000000..a62506c36a Binary files /dev/null and b/test/rendering/data/tiles/south-carolina/11/566/4-828.png differ