Merge pull request #10694 from M393/image-opacity

Draw image with configured opacity

rendering/cases/icon-opacity/main.js

@@ -0,0 +1,47 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Feature from '../../../src/ol/Feature.js';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import {Style, Icon} from '../../../src/ol/style.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
+      })
+    }),
+    new VectorLayer({
+      style: function() {
+        return new Style({
+          image: new Icon({
+            opacity: 0.5,
+            src: '/data/icon.png',
+            anchor: [0.5, 46],
+            anchorXUnits: 'fraction',
+            anchorYUnits: 'pixels'
+          })
+        });
+      },
+      source: new VectorSource({
+        features: [
+          new Feature(
+            new Point(center)
+          )
+        ]
+      })
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+render();

src/ol/render/canvas.js

@@ -404,6 +404,9 @@ export function drawImageOrLabel(context,
   transform, opacity, labelOrImage, originX, originY, w, h, x, y, scale) {
   context.save();
 
+  if (opacity !== 1) {
+    context.globalAlpha *= opacity;
+  }
   if (transform) {
     context.setTransform.apply(context, transform);
   }

test/spec/ol/render/canvas/index.test.js

@@ -100,4 +100,34 @@ describe('ol.render.canvas', function() {
     });
   });
 
+  describe('drawImageOrLabel', function() {
+    it('draws the image with correct parameters', function() {
+      const layerContext = {
+        save: sinon.spy(),
+        setTransform: sinon.spy(),
+        drawImage: sinon.spy(),
+        restore: sinon.spy(),
+        globalAlpha: 1
+      };
+      const transform = [1, 0, 0, 1, 0, 0];
+      const opacity = 0.5;
+      const image = {};
+      const x = 0;
+      const y = 0;
+      const w = 1;
+      const h = 1;
+      const scale = 1;
+
+      render.drawImageOrLabel(layerContext, transform.slice(), opacity, image,
+        x, y, w, h, x, y, scale);
+
+      expect(layerContext.save.callCount).to.be(1);
+      expect(layerContext.setTransform.callCount).to.be(1);
+      expect(layerContext.setTransform.firstCall.args).to.eql(transform);
+      expect(layerContext.drawImage.callCount).to.be(1);
+      expect(layerContext.globalAlpha).to.be(.5);
+      expect(layerContext.restore.callCount).to.be(1);
+    });
+  });
+
 });