Simplify events and store listeners only in one place

src/ol/renderer/canvas/VectorImageLayer.js

@@ -8,7 +8,6 @@ import {getHeight, getWidth, isEmpty, scaleFromCenter} from '../../extent.js';
 import {assign} from '../../obj.js';
 import CanvasImageLayerRenderer from './ImageLayer.js';
 import CanvasVectorLayerRenderer from './VectorLayer.js';
-import {listen} from '../../events.js';
 import EventType from '../../events/EventType.js';
 import ImageState from '../../ImageState.js';
 import {renderDeclutterItems} from '../../render.js';
@@ -102,12 +101,12 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
         }
       });
 
-      listen(image, EventType.CHANGE, function() {
+      image.addEventListener(EventType.CHANGE, function() {
         if (image.getState() === ImageState.LOADED) {
           this.image_ = image;
           this.skippedFeatures_ = skippedFeatures;
         }
-      }, this);
+      }.bind(this));
       image.load();
     }
 

src/ol/renderer/canvas/VectorLayer.js

@@ -24,6 +24,10 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     super(vectorLayer);
 
+    /** @private */
+    this.boundHandleStyleImageChange_ = this.handleStyleImageChange_.bind(this);
+
+
     /**
      * @private
      * @type {boolean}
@@ -366,12 +370,12 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       for (let i = 0, ii = styles.length; i < ii; ++i) {
         loading = renderFeature(
           builderGroup, feature, styles[i], squaredTolerance,
-          this.handleStyleImageChange_, this) || loading;
+          this.boundHandleStyleImageChange_) || loading;
       }
     } else {
       loading = renderFeature(
         builderGroup, feature, styles, squaredTolerance,
-        this.handleStyleImageChange_, this);
+        this.boundHandleStyleImageChange_);
     }
     return loading;
   }

src/ol/renderer/canvas/VectorTileLayer.js

@@ -59,6 +59,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   constructor(layer) {
     super(layer);
 
+    /** @private */
+    this.boundHandleStyleImageChange_ = this.handleStyleImageChange_.bind(this);
+
     /**
      * @private
      * @type {CanvasRenderingContext2D}
@@ -112,7 +115,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      * @type {import("../../transform.js").Transform}
      */
     this.tmpTransform_ = createTransform();
-
   }
 
   /**
@@ -546,12 +548,12 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       for (let i = 0, ii = styles.length; i < ii; ++i) {
         loading = renderFeature(
           executorGroup, feature, styles[i], squaredTolerance,
-          this.handleStyleImageChange_, this) || loading;
+          this.boundHandleStyleImageChange_) || loading;
       }
     } else {
       loading = renderFeature(
         executorGroup, feature, styles, squaredTolerance,
-        this.handleStyleImageChange_, this);
+        this.boundHandleStyleImageChange_);
     }
     return loading;
   }