From 61fc71c30fa0b0aa286454d7974e782d6dbdc850 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Tue, 15 Oct 2019 21:23:37 +0200
Subject: [PATCH] Properly unregister source tile change listeners

---
 src/ol/VectorRenderTile.js  |  8 ++++++++
 src/ol/source/VectorTile.js | 21 +++++++--------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/ol/VectorRenderTile.js b/src/ol/VectorRenderTile.js
index d682cdb425..df64496f38 100644
--- a/src/ol/VectorRenderTile.js
+++ b/src/ol/VectorRenderTile.js
@@ -5,6 +5,7 @@ import {getUid} from './util.js';
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
+import {unlistenByKey} from './events.js';
 
 
 /**
@@ -87,6 +88,11 @@ class VectorRenderTile extends Tile {
      */
     this.sourceTileGrid_ = sourceTileGrid;
 
+    /**
+     * @type {Array<import("./events.js").EventsKey>}
+     */
+    this.sourceTileListenerKeys = [];
+
     /**
      * z of the source tiles of the last getSourceTiles call.
      * @type {number}
@@ -109,6 +115,8 @@ class VectorRenderTile extends Tile {
    * @inheritDoc
    */
   disposeInternal() {
+    this.sourceTileListenerKeys.forEach(unlistenByKey);
+    this.sourceTileListenerKeys.length = 0;
     this.removeSourceTiles_(this);
     for (const key in this.context_) {
       const canvas = this.context_[key].canvas;
diff --git a/src/ol/source/VectorTile.js b/src/ol/source/VectorTile.js
index 0cebf7a11d..cd77907bcb 100644
--- a/src/ol/source/VectorTile.js
+++ b/src/ol/source/VectorTile.js
@@ -12,7 +12,8 @@ import {createXYZ, extentFromProjection, createForProjection} from '../tilegrid.
 import {buffer as bufferExtent, getIntersection, intersects} from '../extent.js';
 import EventType from '../events/EventType.js';
 import {loadFeaturesXhr} from '../featureloader.js';
-import {equals} from '../array.js';
+import {equals, remove} from '../array.js';
+import {listen, unlistenByKey} from '../events.js';
 
 /**
  * @typedef {Object} Options
@@ -238,15 +239,14 @@ class VectorTile extends UrlTile {
           }
           if (sourceTile.getState() !== TileState.EMPTY && tile.getState() === TileState.IDLE) {
             tile.loadingSourceTiles++;
-            const onSourceTileChange = function() {
+            const key = listen(sourceTile, EventType.CHANGE, function() {
               const state = sourceTile.getState();
               const sourceTileKey = sourceTile.getKey();
               if (state === TileState.LOADED || state === TileState.ERROR) {
                 if (state === TileState.LOADED) {
-                  sourceTile.removeEventListener(EventType.CHANGE, onSourceTileChange);
+                  remove(tile.sourceTileListenerKeys, key);
+                  unlistenByKey(key);
                   tile.loadingSourceTiles--;
-                  // eslint-disable-next-line no-use-before-define
-                  tile.removeEventListener(EventType.CHANGE, onTileChange);
                   delete tile.errorSourceTileKeys[sourceTileKey];
                 } else if (state === TileState.ERROR) {
                   tile.errorSourceTileKeys[sourceTileKey] = true;
@@ -258,15 +258,8 @@ class VectorTile extends UrlTile {
                   tile.setState(TileState.LOADED);
                 }
               }
-            };
-            const onTileChange = function() {
-              if (tile.getState() === TileState.ABORT) {
-                sourceTile.removeEventListener(EventType.CHANGE, onSourceTileChange);
-                tile.removeEventListener(EventType.CHANGE, onTileChange);
-              }
-            };
-            sourceTile.addEventListener(EventType.CHANGE, onSourceTileChange);
-            tile.addEventListener(EventType.CHANGE, onTileChange);
+            });
+            tile.sourceTileListenerKeys.push(key);
           }
         }.bind(this));
         if (!covered) {