Merge pull request #11987 from ahocevar/vector-opacity

Respect opacity for vector instructions

rendering/cases/layer-vectortile-opacity-declutter/main.js

@@ -0,0 +1,31 @@
+import MVT from '../../../src/ol/format/MVT.js';
+import Map from '../../../src/ol/Map.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import View from '../../../src/ol/View.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      declutter: true,
+      opacity: 0.1,
+      source: new VectorTileSource({
+        format: new MVT(),
+        tileGrid: createXYZ(),
+        url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
+        transition: 0,
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [1825927.7316762917, 6143091.089223046],
+    zoom: 14,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders',
+  tolerance: 0.02,
+});

rendering/cases/layer-vectortile-opacity/main.js

@@ -0,0 +1,30 @@
+import MVT from '../../../src/ol/format/MVT.js';
+import Map from '../../../src/ol/Map.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import View from '../../../src/ol/View.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      opacity: 0.1,
+      source: new VectorTileSource({
+        format: new MVT(),
+        tileGrid: createXYZ(),
+        url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
+        transition: 0,
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [1825927.7316762917, 6143091.089223046],
+    zoom: 14,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders',
+  tolerance: 0.02,
+});

rendering/cases/layer-vectortile-rendermode-vector-opacity/main.js

@@ -0,0 +1,32 @@
+import MVT from '../../../src/ol/format/MVT.js';
+import Map from '../../../src/ol/Map.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileRenderType from '../../../src/ol/layer/VectorTileRenderType.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import View from '../../../src/ol/View.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      renderMode: VectorTileRenderType.VECTOR,
+      opacity: 0.1,
+      source: new VectorTileSource({
+        format: new MVT(),
+        tileGrid: createXYZ(),
+        url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
+        transition: 0,
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [1825927.7316762917, 6143091.089223046],
+    zoom: 14,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders with vector render mode',
+  tolerance: 0.02,
+});

src/ol/renderer/canvas/VectorTileLayer.js

@@ -604,6 +604,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
    */
   renderDeclutter(frameState) {
+    const context = this.context;
+    const alpha = context.globalAlpha;
+    context.globalAlpha = this.getLayer().getOpacity();
     const viewHints = frameState.viewHints;
     const hifi = !(
       viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]
@@ -628,6 +631,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         }
       }
     }
+    context.globalAlpha = alpha;
   }
 
   getTileRenderTransform(tile, frameState) {
@@ -696,6 +700,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     }
 
     const context = this.context;
+    const alpha = context.globalAlpha;
+    context.globalAlpha = layer.getOpacity();
     const replayTypes = VECTOR_REPLAYS[renderMode];
     const viewState = frameState.viewState;
     const rotation = viewState.rotation;
@@ -760,6 +766,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         }
       }
     }
+    context.globalAlpha = alpha;
 
     return this.container;
   }