Avoid creating unnecessary images during rendering

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -287,11 +287,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
   /** @type {Array.<ol.Tile>} */
   var tilesToClear = [];
 
-  var getTileIfLoaded = this.createGetTileIfLoadedFunction(function(tile) {
+  var findLoadedTiles = this.createLoadedTileFinder(tileSource, tilesToDrawByZ);
-    return !goog.isNull(tile) && tile.getState() == ol.TileState.LOADED;
-  }, tileSource, pixelRatio, projection);
-  var findLoadedTiles = goog.bind(tileSource.findLoadedTiles, tileSource,
-      tilesToDrawByZ, getTileIfLoaded);
 
   var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
 

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -128,11 +128,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame =
   var tilesToDrawByZ = {};
   tilesToDrawByZ[z] = {};
 
-  var getTileIfLoaded = this.createGetTileIfLoadedFunction(function(tile) {
+  var findLoadedTiles = this.createLoadedTileFinder(tileSource, tilesToDrawByZ);
-    return !goog.isNull(tile) && tile.getState() == ol.TileState.LOADED;
-  }, tileSource, pixelRatio, projection);
-  var findLoadedTiles = goog.bind(tileSource.findLoadedTiles, tileSource,
-      tilesToDrawByZ, getTileIfLoaded);
 
   var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
 

src/ol/renderer/layerrenderer.js

@@ -85,6 +85,33 @@ ol.renderer.Layer.prototype.forEachLayerAtPixel =
 ol.renderer.Layer.prototype.hasFeatureAtCoordinate = goog.functions.FALSE;
 
 
+/**
+ * Create a function that adds loaded tiles to the tile lookup.
+ * @param {ol.source.Tile} source Tile source.
+ * @param {Object.<number, Object.<string, ol.Tile>>} tiles Lookup of loaded
+ *     tiles by zoom level.
+ * @return {function(number, ol.TileRange):boolean} A function that can be
+ *     called with a zoom level and a tile range to add loaded tiles to the
+ *     lookup.
+ * @protected
+ */
+ol.renderer.Layer.prototype.createLoadedTileFinder = function(source, tiles) {
+  /**
+   * @param {number} zoom Zoom level.
+   * @param {ol.TileRange} tileRange Tile range.
+   * @return {boolean} The tile range is fully loaded.
+   */
+  return function(zoom, tileRange) {
+    return source.forEachLoadedTile(zoom, tileRange, function(tile) {
+      if (!tiles[zoom]) {
+        tiles[zoom] = {};
+      }
+      tiles[zoom][tile.tileCoord.toString()] = tile;
+    });
+  };
+};
+
+
 /**
  * @protected
  * @return {ol.layer.Layer} Layer.

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -94,6 +94,40 @@ ol.renderer.webgl.TileLayer.prototype.disposeInternal = function() {
 };
 
 
+/**
+ * Create a function that adds loaded tiles to the tile lookup.
+ * @param {ol.source.Tile} source Tile source.
+ * @param {Object.<number, Object.<string, ol.Tile>>} tiles Lookup of loaded
+ *     tiles by zoom level.
+ * @return {function(number, ol.TileRange):boolean} A function that can be
+ *     called with a zoom level and a tile range to add loaded tiles to the
+ *     lookup.
+ * @protected
+ */
+ol.renderer.webgl.TileLayer.prototype.createLoadedTileFinder =
+    function(source, tiles) {
+  var mapRenderer = this.mapRenderer;
+
+  /**
+   * @param {number} zoom Zoom level.
+   * @param {ol.TileRange} tileRange Tile range.
+   * @return {boolean} The tile range is fully loaded.
+   */
+  return function(zoom, tileRange) {
+    return source.forEachLoadedTile(zoom, tileRange, function(tile) {
+      var loaded = mapRenderer.isTileTextureLoaded(tile);
+      if (loaded) {
+        if (!tiles[zoom]) {
+          tiles[zoom] = {};
+        }
+        tiles[zoom][tile.tileCoord.toString()] = tile;
+      }
+      return loaded;
+    });
+  };
+};
+
+
 /**
  * @inheritDoc
  */
@@ -190,12 +224,8 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
     var tilesToDrawByZ = {};
     tilesToDrawByZ[z] = {};
 
-    var getTileIfLoaded = this.createGetTileIfLoadedFunction(function(tile) {
+    var findLoadedTiles = this.createLoadedTileFinder(
-      return !goog.isNull(tile) && tile.getState() == ol.TileState.LOADED &&
+        tileSource, tilesToDrawByZ);
-          mapRenderer.isTileTextureLoaded(tile);
-    }, tileSource, pixelRatio, projection);
-    var findLoadedTiles = goog.bind(tileSource.findLoadedTiles, tileSource,
-        tilesToDrawByZ, getTileIfLoaded);
 
     var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
     var allTilesLoaded = true;

src/ol/source/tilesource.js

@@ -6,6 +6,7 @@ goog.require('ol.Attribution');
 goog.require('ol.Extent');
 goog.require('ol.TileCache');
 goog.require('ol.TileRange');
+goog.require('ol.TileState');
 goog.require('ol.source.Source');
 goog.require('ol.tilecoord');
 goog.require('ol.tilegrid.TileGrid');
@@ -92,41 +93,33 @@ ol.source.Tile.prototype.expireCache = function(usedTiles) {
 
 
 /**
- * Look for loaded tiles over a given tile range and zoom level.  Adds
- * properties to the provided lookup representing key/tile pairs for already
- * loaded tiles.
- *
- * @param {Object.<number, Object.<string, ol.Tile>>} loadedTilesByZ A lookup of
- *     loaded tiles by zoom level.
- * @param {function(number, number, number): ol.Tile} getTileIfLoaded A function
- *     that returns the tile only if it is fully loaded.
  * @param {number} z Zoom level.
  * @param {ol.TileRange} tileRange Tile range.
+ * @param {function(ol.Tile):(boolean|undefined)} callback Called with each
+ *     loaded tile.  If the callback returns `false`, the tile will not be
+ *     considered loaded.
  * @return {boolean} The tile range is fully covered with loaded tiles.
  */
-ol.source.Tile.prototype.findLoadedTiles = function(loadedTilesByZ,
+ol.source.Tile.prototype.forEachLoadedTile = function(z, tileRange, callback) {
-    getTileIfLoaded, z, tileRange) {
+  var covered = true;
-  // FIXME this could be more efficient about filling partial holes
+  var tile, tileCoordKey, loaded;
-  var fullyCovered = true;
+  for (var x = tileRange.minX; x <= tileRange.maxX; ++x) {
-  var tile, tileCoordKey, x, y;
+    for (var y = tileRange.minY; y <= tileRange.maxY; ++y) {
-  for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
-    for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
       tileCoordKey = this.getKeyZXY(z, x, y);
-      if (loadedTilesByZ[z] && loadedTilesByZ[z][tileCoordKey]) {
+      loaded = false;
-        continue;
+      if (this.tileCache.containsKey(tileCoordKey)) {
+        tile = /** @type {!ol.Tile} */ (this.tileCache.get(tileCoordKey));
+        loaded = tile.getState() === ol.TileState.LOADED;
+        if (loaded) {
+          loaded = (callback(tile) !== false);
         }
-      tile = getTileIfLoaded(z, x, y);
-      if (!goog.isNull(tile)) {
-        if (!loadedTilesByZ[z]) {
-          loadedTilesByZ[z] = {};
       }
-        loadedTilesByZ[z][tileCoordKey] = tile;
+      if (!loaded) {
-      } else {
+        covered = false;
-        fullyCovered = false;
       }
     }
   }
-  return fullyCovered;
+  return covered;
 };
 
 

test/spec/ol/source/tilesource.test.js

@@ -12,176 +12,105 @@ describe('ol.source.Tile', function() {
     });
   });
 
-  describe('#findLoadedTiles()', function() {
+  describe('#forEachLoadedTile()', function() {
 
-    it('adds no tiles if none are already loaded', function() {
+    var callback;
-      // a source with no loaded tiles
+    beforeEach(function() {
+      callback = sinon.spy();
+    });
+
+    it('does not call the callback if no tiles are loaded', function() {
       var source = new ol.test.source.TileMock({});
-
-      var loadedTilesByZ = {};
       var grid = source.getTileGrid();
       var extent = [-180, -180, 180, 180];
-      var range = grid.getTileRangeForExtentAndZ(extent, 3);
+      var zoom = 3;
+      var range = grid.getTileRangeForExtentAndZ(extent, zoom);
 
-      function getTileIfLoaded(z, x, y) {
+      source.forEachLoadedTile(zoom, range, callback);
-        var tile = source.getTile(z, x, y);
+      expect(callback.callCount).to.be(0);
-        return (!goog.isNull(tile) && tile.getState() === ol.TileState.LOADED) ?
-            tile : null;
-      }
-      source.findLoadedTiles(loadedTilesByZ, getTileIfLoaded, 3, range);
-
-      var keys = goog.object.getKeys(loadedTilesByZ);
-      expect(keys.length).to.be(0);
     });
 
-    it('adds loaded tiles to the lookup (z: 0)', function() {
+    it('does not call getTile() if no tiles are loaded', function() {
-      // a source with no loaded tiles
-      var source = new ol.test.source.TileMock({
-        '0/0/0': true,
-        '1/0/0': true
-      });
-
-      var loadedTilesByZ = {};
-      var grid = source.getTileGrid();
-      var extent = [-180, -180, 180, 180];
-      var range = grid.getTileRangeForExtentAndZ(extent, 0);
-
-      function getTileIfLoaded(z, x, y) {
-        var tile = source.getTile(z, x, y);
-        return (!goog.isNull(tile) && tile.getState() === ol.TileState.LOADED) ?
-            tile : null;
-      }
-      source.findLoadedTiles(loadedTilesByZ, getTileIfLoaded, 0, range);
-      var keys = goog.object.getKeys(loadedTilesByZ);
-      expect(keys.length).to.be(1);
-      var tile = loadedTilesByZ['0']['0/0/0'];
-      expect(tile).to.be.a(ol.Tile);
-      expect(tile.state).to.be(ol.TileState.LOADED);
-    });
-
-    it('adds loaded tiles to the lookup (z: 1)', function() {
-      // a source with no loaded tiles
-      var source = new ol.test.source.TileMock({
-        '0/0/0': true,
-        '1/0/0': true
-      });
-
-      var loadedTilesByZ = {};
-      var grid = source.getTileGrid();
-      var extent = [-180, -180, 180, 180];
-      var range = grid.getTileRangeForExtentAndZ(extent, 1);
-
-      function getTileIfLoaded(z, x, y) {
-        var tile = source.getTile(z, x, y);
-        return (!goog.isNull(tile) && tile.getState() === ol.TileState.LOADED) ?
-            tile : null;
-      }
-      source.findLoadedTiles(loadedTilesByZ, getTileIfLoaded, 1, range);
-      var keys = goog.object.getKeys(loadedTilesByZ);
-      expect(keys.length).to.be(1);
-      var tile = loadedTilesByZ['1']['1/0/0'];
-      expect(tile).to.be.a(ol.Tile);
-      expect(tile.state).to.be(ol.TileState.LOADED);
-    });
-
-    it('returns true when all tiles are already loaded', function() {
-      // a source with no loaded tiles
-      var source = new ol.test.source.TileMock({
-        '1/0/0': true,
-        '1/0/1': true,
-        '1/1/0': true,
-        '1/1/1': true
-      });
-
-      var loadedTilesByZ = {};
-      var grid = source.getTileGrid();
-      var extent = [-180, -180, 180, 180];
-      var range = grid.getTileRangeForExtentAndZ(extent, 1);
-      function getTileIfLoaded(z, x, y) {
-        var tile = source.getTile(z, x, y);
-        return (!goog.isNull(tile) && tile.getState() === ol.TileState.LOADED) ?
-            tile : null;
-      }
-      var loaded = source.findLoadedTiles(
-          loadedTilesByZ, getTileIfLoaded, 1, range);
-      expect(loaded).to.be(true);
-    });
-
-    it('returns true when all tiles are already loaded (part 2)', function() {
-      // a source with no loaded tiles
       var source = new ol.test.source.TileMock({});
-
+      sinon.spy(source, 'getTile');
-      var loadedTilesByZ = {
-        '1': {
-          '1/0/0': true,
-          '1/0/1': true,
-          '1/1/0': true,
-          '1/1/1': true,
-          '1/1/2': true
-        }
-      };
       var grid = source.getTileGrid();
       var extent = [-180, -180, 180, 180];
-      var range = grid.getTileRangeForExtentAndZ(extent, 1);
+      var zoom = 3;
+      var range = grid.getTileRangeForExtentAndZ(extent, zoom);
 
-      function getTileIfLoaded(z, x, y) {
+      source.forEachLoadedTile(zoom, range, callback);
-        var tile = source.getTile(z, x, y);
+      expect(source.getTile.callCount).to.be(0);
-        return (!goog.isNull(tile) && tile.getState() === ol.TileState.LOADED) ?
+      source.getTile.restore();
-            tile : null;
-      }
-      var loaded = source.findLoadedTiles(
-          loadedTilesByZ, getTileIfLoaded, 1, range);
-      expect(loaded).to.be(true);
     });
 
-    it('returns false when all tiles are already loaded', function() {
+
+    it('calls callback for each loaded tile', function() {
+      var source = new ol.test.source.TileMock({
+        '1/0/0': ol.TileState.LOADED,
+        '1/0/1': ol.TileState.LOADED,
+        '1/1/0': ol.TileState.LOADING,
+        '1/1/1': ol.TileState.LOADED
+      });
+
+      var zoom = 1;
+      var range = new ol.TileRange(0, 1, 0, 1);
+
+      source.forEachLoadedTile(zoom, range, callback);
+      expect(callback.callCount).to.be(3);
+    });
+
+    it('returns true if range is fully loaded', function() {
       // a source with no loaded tiles
       var source = new ol.test.source.TileMock({
-        '1/0/0': true,
+        '1/0/0': ol.TileState.LOADED,
-        '1/0/1': true,
+        '1/0/1': ol.TileState.LOADED,
-        '1/1/0': true,
+        '1/1/0': ol.TileState.LOADED,
-        '1/1/1': false
+        '1/1/1': ol.TileState.LOADED
       });
 
-      var loadedTilesByZ = {};
+      var zoom = 1;
-      var grid = source.getTileGrid();
+      var range = new ol.TileRange(0, 1, 0, 1);
-      var extent = [-180, -180, 180, 180];
-      var range = grid.getTileRangeForExtentAndZ(extent, 1);
 
-      function getTileIfLoaded(z, x, y) {
+      var covered = source.forEachLoadedTile(zoom, range, function() {
-        var tile = source.getTile(z, x, y);
+        return true;
-        return (!goog.isNull(tile) && tile.getState() === ol.TileState.LOADED) ?
+      });
-            tile : null;
+      expect(covered).to.be(true);
-      }
-      var loaded = source.findLoadedTiles(
-          loadedTilesByZ, getTileIfLoaded, 1, range);
-      expect(loaded).to.be(false);
     });
 
-    it('returns false when all tiles are already loaded (part 2)', function() {
+    it('returns false if range is not fully loaded', function() {
       // a source with no loaded tiles
-      var source = new ol.test.source.TileMock({});
+      var source = new ol.test.source.TileMock({
+        '1/0/0': ol.TileState.LOADED,
+        '1/0/1': ol.TileState.LOADED,
+        '1/1/0': ol.TileState.LOADING,
+        '1/1/1': ol.TileState.LOADED
+      });
 
-      var loadedTilesByZ = {
+      var zoom = 1;
-        '1': {
+      var range = new ol.TileRange(0, 1, 0, 1);
-          '1/0/0': true,
-          '1/0/1': true,
-          '1/1/0': true,
-          '1/1/1': false
-        }
-      };
-      var grid = source.getTileGrid();
-      var extent = [-180, -180, 180, 180];
-      var range = grid.getTileRangeForExtentAndZ(extent, 1);
 
-      function getTileIfLoaded(z, x, y) {
+      var covered = source.forEachLoadedTile(zoom, range, function() {
-        var tile = source.getTile(z, x, y);
+        return true;
-        return (!goog.isNull(tile) && tile.getState() === ol.TileState.LOADED) ?
+      });
-            tile : null;
+      expect(covered).to.be(false);
-      }
+    });
-      var loaded = source.findLoadedTiles(
+
-          loadedTilesByZ, getTileIfLoaded, 1, range);
+    it('allows callback to override loaded check', function() {
-      expect(loaded).to.be(false);
+      // a source with no loaded tiles
+      var source = new ol.test.source.TileMock({
+        '1/0/0': ol.TileState.LOADED,
+        '1/0/1': ol.TileState.LOADED,
+        '1/1/0': ol.TileState.LOADED,
+        '1/1/1': ol.TileState.LOADED
+      });
+
+      var zoom = 1;
+      var range = new ol.TileRange(0, 1, 0, 1);
+
+      var covered = source.forEachLoadedTile(zoom, range, function() {
+        return false;
+      });
+      expect(covered).to.be(false);
     });
 
   });
@@ -196,9 +125,10 @@ describe('ol.source.Tile', function() {
  *
  * @constructor
  * @extends {ol.source.Tile}
- * @param {Object.<string, boolean>} loaded Lookup of already loaded tiles.
+ * @param {Object.<string, ol.TileState>} tileStates Lookup of tile key to
+ *     tile state.
  */
-ol.test.source.TileMock = function(loaded) {
+ol.test.source.TileMock = function(tileStates) {
   var tileGrid = new ol.tilegrid.TileGrid({
     resolutions: [360 / 256, 180 / 256, 90 / 256, 45 / 256],
     origin: [-180, -180],
@@ -210,11 +140,9 @@ ol.test.source.TileMock = function(loaded) {
     tileGrid: tileGrid
   });
 
-  /**
+  for (var key in tileStates) {
-   * @type {Object.<string, boolean>}
+    this.tileCache.set(key, new ol.Tile(key.split('/'), tileStates[key]));
-   * @private
+  }
-   */
-  this.loaded_ = loaded;
 
 };
 goog.inherits(ol.test.source.TileMock, ol.source.Tile);
@@ -224,9 +152,14 @@ goog.inherits(ol.test.source.TileMock, ol.source.Tile);
  * @inheritDoc
  */
 ol.test.source.TileMock.prototype.getTile = function(z, x, y) {
-  var key = ol.tilecoord.getKeyZXY(z, x, y);
+  var key = this.getKeyZXY(z, x, y);
-  var tileState = this.loaded_[key] ? ol.TileState.LOADED : ol.TileState.IDLE;
+  if (this.tileCache.containsKey(key)) {
-  return new ol.Tile([z, x, y], tileState);
+    return /** @type {!ol.Tile} */ (this.tileCache.get(key));
+  } else {
+    var tile = new ol.Tile(key, ol.TileState.IDLE);
+    this.tileCache.set(key, tile);
+    return tile;
+  }
 };
 
 
@@ -243,8 +176,8 @@ describe('ol.test.source.TileMock', function() {
   describe('#getTile()', function() {
     it('returns a tile with state based on constructor arg', function() {
       var source = new ol.test.source.TileMock({
-        '0/0/0': true,
+        '0/0/0': ol.TileState.LOADED,
-        '1/0/0': true
+        '1/0/0': ol.TileState.LOADED
       });
       var tile;
 
@@ -270,9 +203,9 @@ describe('ol.test.source.TileMock', function() {
 
 goog.require('goog.object');
 goog.require('ol.Tile');
+goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.proj');
 goog.require('ol.source.Source');
 goog.require('ol.source.Tile');
-goog.require('ol.tilecoord');
 goog.require('ol.tilegrid.TileGrid');