Merge pull request #9024 from ahocevar/imagelayer-events

Add prerender and postrender events for Image layer

src/ol/renderer/canvas/ImageLayer.js

@@ -137,10 +137,12 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     const dw = img.width * transform[0];
     const dh = img.height * transform[3];
 
+    this.preRender(context, frameState);
     if (dw >= 0.5 && dh >= 0.5) {
       this.context.drawImage(img, 0, 0, +img.width, +img.height,
         Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
     }
+    this.postRender(context, frameState);
 
     if (clipped) {
       context.restore();

src/ol/renderer/canvas/VectorImageLayer.js

@@ -105,6 +105,16 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
     return !!this.image_;
   }
 
+  /**
+   * @override
+   */
+  preRender() {}
+
+  /**
+   * @override
+   */
+  postRender() {}
+
   /**
    * @inheritDoc
    */

test/spec/ol/renderer/canvas/imagelayer.test.js

@@ -1,5 +1,6 @@
 import Map from '../../../../../src/ol/Map.js';
 import View from '../../../../../src/ol/View.js';
+import {get as getProj} from '../../../../../src/ol/proj.js';
 import ImageLayer from '../../../../../src/ol/layer/Image.js';
 import VectorImageLayer from '../../../../../src/ol/layer/VectorImage.js';
 import Feature from '../../../../../src/ol/Feature.js';
@@ -66,6 +67,59 @@ describe('ol.renderer.canvas.ImageLayer', function() {
     });
   });
 
+  describe('Image rendering', function() {
+    let map, div, layer;
+
+    beforeEach(function(done) {
+      const projection = getProj('EPSG:3857');
+      layer = new ImageLayer({
+        source: new Static({
+          url: 'spec/ol/data/osm-0-0-0.png',
+          imageExtent: projection.getExtent(),
+          projection: projection
+        })
+      });
+
+      div = document.createElement('div');
+      div.style.width = div.style.height = '100px';
+      document.body.appendChild(div);
+      map = new Map({
+        target: div,
+        layers: [layer],
+        view: new View({
+          center: [0, 0],
+          zoom: 2
+        })
+      });
+      layer.getSource().on('imageloadend', function() {
+        done();
+      });
+    });
+
+    afterEach(function() {
+      map.setTarget(null);
+      document.body.removeChild(div);
+      map.dispose();
+    });
+
+    it('dispatches prerender and postrender events on the image layer', function(done) {
+      let prerender = 0;
+      let postrender = 0;
+      layer.on('prerender', function() {
+        ++prerender;
+      });
+      layer.on('postrender', function() {
+        ++postrender;
+      });
+      map.on('postrender', function() {
+        expect(prerender).to.be(1);
+        expect(postrender).to.be(1);
+        done();
+      });
+    });
+  });
+
+
   describe('Vector image rendering', function() {
     let map, div, layer;