Do not register multiple listeners on same tile

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -158,8 +158,7 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
 
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
-        goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+        this.listenToTileChange(tile);
-            this.handleTileChange, false, this);
         this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
         tileCenter = tileGrid.getTileCoordCenter(tileCoord);
         frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -116,8 +116,7 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
 
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
-        goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+        this.listenToTileChange(tile);
-            this.handleTileChange, false, this);
         this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
         tileCenter = tileGrid.getTileCoordCenter(tileCoord);
         frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);

src/ol/renderer/layerrenderer.js

@@ -40,6 +40,12 @@ ol.renderer.Layer = function(mapRenderer, layer) {
    */
   this.layer_ = layer;
 
+  /**
+   * @protected
+   * @type {Object.<string, boolean>}
+   */
+  this.observedTileKeys = {};
+
   goog.events.listen(this.layer_,
       ol.Object.getChangedEventType(ol.layer.LayerProperty.BRIGHTNESS),
       this.handleLayerBrightnessChange, false, this);
@@ -167,13 +173,29 @@ ol.renderer.Layer.prototype.handleLayerVisibleChange = function() {
 /**
  * Handle changes in tile state.
  * @param {goog.events.Event} event Tile change event.
- * @protected
+ * @private
  */
-ol.renderer.Layer.prototype.handleTileChange = function(event) {
+ol.renderer.Layer.prototype.handleTileChange_ = function(event) {
   var tile = /** @type {ol.Tile} */ (event.target);
   if (tile.getState() === ol.TileState.LOADED) {
     this.getMap().requestRenderFrame();
   }
+  delete this.observedTileKeys[tile.getKey()];
+};
+
+
+/**
+ * Listen once to titileKey, le change event.
+ * @param {ol.Tile} tile Tile.
+ * @protected
+ */
+ol.renderer.Layer.prototype.listenToTileChange = function(tile) {
+  var tileKey = tile.getKey();
+  if (!(tileKey in this.observedTileKeys)) {
+    this.observedTileKeys[tileKey] = true;
+    goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+        this.handleTileChange_, false, this);
+  }
 };
 
 

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -391,8 +391,7 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
 
         tileState = tile.getState();
         if (tileState == ol.TileState.IDLE) {
-          goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+          this.listenToTileChange(tile);
-              this.handleTileChange, false, this);
           this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
           tileCenter = tileGrid.getTileCoordCenter(tileCoord);
           frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);