Merge pull request #184 from tschaub/less-animation

Avoid unnecessary animation loop while tiles load

src/ol/framestate.js

@@ -31,7 +31,7 @@ goog.require('ol.layer.LayerState');
  *            usedTiles: Object.<string, Object.<string, ol.TileRange>>,
  *            view2DState: ol.View2DState,
  *            viewHints: Array.<number>,
- *            wantedTiles: Object.<string, Object.<string, ol.TileRange>>}}
+ *            wantedTiles: Object.<string, Object.<string, boolean>>}}
  */
 ol.FrameState;
 

src/ol/map.js

@@ -500,9 +500,8 @@ ol.Map.prototype.getTilePriority = function(tile, tileSourceKey, tileCenter) {
   if (goog.isNull(frameState) || !(tileSourceKey in frameState.wantedTiles)) {
     return ol.TileQueue.DROP;
   }
-  var zKey = tile.tileCoord.z.toString();
+  var coordKey = tile.tileCoord.toString();
-  if (!(zKey in frameState.wantedTiles[tileSourceKey]) ||
+  if (!frameState.wantedTiles[tileSourceKey][coordKey]) {
-      !frameState.wantedTiles[tileSourceKey][zKey].contains(tile.tileCoord)) {
     return ol.TileQueue.DROP;
   }
   var center = frameState.view2DState.center;
@@ -754,8 +753,8 @@ ol.Map.prototype.renderFrame_ = function(time) {
     frameState.extent = ol.Extent.boundingExtent.apply(null, corners);
   }
 
-  this.renderer_.renderFrame(frameState);
   this.frameState_ = frameState;
+  this.renderer_.renderFrame(frameState);
   this.dirty_ = false;
 
   if (!goog.isNull(frameState)) {

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -167,6 +167,9 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
 
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
+        goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+            this.handleTileChange, false, this);
+        this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
         tileCenter = tileGrid.getTileCoordCenter(tileCoord);
         frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);
       } else if (tileState == ol.TileState.LOADED) {
@@ -214,11 +217,6 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
     }
   }
 
-  if (!allTilesLoaded) {
-    frameState.animate = true;
-    this.updateWantedTiles(frameState.wantedTiles, tileSource, z, tileRange);
-  }
-
   this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
   this.scheduleExpireCache(frameState, tileSource);
 

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -131,6 +131,9 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
 
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
+        goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+            this.handleTileChange, false, this);
+        this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
         tileCenter = tileGrid.getTileCoordCenter(tileCoord);
         frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);
       } else if (tileState == ol.TileState.LOADED) {
@@ -232,11 +235,6 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
     this.renderedVisible_ = true;
   }
 
-  if (!allTilesLoaded) {
-    frameState.animate = true;
-    this.updateWantedTiles(frameState.wantedTiles, tileSource, z, tileRange);
-  }
-
   this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
   this.scheduleExpireCache(frameState, tileSource);
 

src/ol/renderer/layerrenderer.js

@@ -4,7 +4,10 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.FrameState');
 goog.require('ol.Object');
+goog.require('ol.Tile');
+goog.require('ol.TileCoord');
 goog.require('ol.TileRange');
+goog.require('ol.TileState');
 goog.require('ol.layer.Layer');
 goog.require('ol.layer.LayerProperty');
 goog.require('ol.layer.LayerState');
@@ -146,6 +149,19 @@ ol.renderer.Layer.prototype.handleLayerVisibleChange = function() {
 };
 
 
+/**
+ * Handle changes in tile state.
+ * @param {goog.events.Event} event Tile change event.
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleTileChange = function(event) {
+  var tile = /** @type {ol.Tile} */ (event.target);
+  if (tile.getState() === ol.TileState.LOADED) {
+    this.getMap().requestRenderFrame();
+  }
+};
+
+
 /**
  * @param {ol.FrameState} frameState Frame state.
  * @param {ol.layer.LayerState} layerState Layer state.
@@ -197,24 +213,16 @@ ol.renderer.Layer.prototype.updateUsedTiles =
 
 /**
  * @protected
- * @param {Object.<string, Object.<string, ol.TileRange>>} wantedTiles Wanted
+ * @param {Object.<string, Object.<string, boolean>>} wantedTiles Wanted tiles.
- *     tile ranges.
  * @param {ol.source.Source} source Source.
- * @param {number} z Z.
+ * @param {ol.TileCoord} tileCoord Tile coordinate.
- * @param {ol.TileRange} tileRange Tile range.
  */
 ol.renderer.Layer.prototype.updateWantedTiles =
-    function(wantedTiles, source, z, tileRange) {
+    function(wantedTiles, source, tileCoord) {
   var sourceKey = goog.getUid(source).toString();
-  var zKey = z.toString();
+  var coordKey = tileCoord.toString();
-  if (sourceKey in wantedTiles) {
+  if (!(sourceKey in wantedTiles)) {
-    if (zKey in wantedTiles[sourceKey]) {
-      wantedTiles[sourceKey][zKey].extend(tileRange);
-    } else {
-      wantedTiles[sourceKey][zKey] = tileRange;
-    }
-  } else {
     wantedTiles[sourceKey] = {};
-    wantedTiles[sourceKey][zKey] = tileRange;
   }
+  wantedTiles[sourceKey][coordKey] = true;
 };

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -393,6 +393,9 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
 
         tileState = tile.getState();
         if (tileState == ol.TileState.IDLE) {
+          goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+              this.handleTileChange, false, this);
+          this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
           tileCenter = tileGrid.getTileCoordCenter(tileCoord);
           frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);
         } else if (tileState == ol.TileState.LOADED) {
@@ -457,7 +460,6 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
       this.renderedTileRange_ = null;
       this.renderedFramebufferExtent_ = null;
       frameState.animate = true;
-      this.updateWantedTiles(frameState.wantedTiles, tileSource, z, tileRange);
     }
 
   }