Avoid garbage creation on frame preparation/composition

src/ol/renderer/canvas/vectortilelayer.js

@@ -116,9 +116,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(
     return;
   }
 
-  var sourceTiles = tile.getSourceTiles();
+  for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
-  for (var t = 0, tt = sourceTiles.length; t < tt; ++t) {
+    var sourceTile = tile.getTile(tile.tileKeys[t]);
-    var sourceTile = sourceTiles[t];
     sourceTile.replayGroup = null;
     replayState.dirty = false;
 
@@ -244,9 +243,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
     if (!ol.extent.containsCoordinate(bufferedExtent, coordinate)) {
       continue;
     }
-    var sourceTiles = tile.getSourceTiles();
+    for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
-    for (var t = 0, tt = sourceTiles.length; t < tt; ++t) {
+      var sourceTile = tile.getTile(tile.tileKeys[t]);
-      var sourceTile = sourceTiles[t];
       if (sourceTile.getProjection().getUnits() === ol.proj.Units.TILE_PIXELS) {
         var sourceTileCoord = sourceTile.tileCoord;
         var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord, this.tmpExtent);
@@ -354,9 +352,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
       var tileCoord = tile.tileCoord;
       var worldOffset = tileGrid.getTileCoordExtent(tileCoord)[0] -
           tileGrid.getTileCoordExtent(tile.wrappedTileCoord)[0];
-      var sourceTiles = tile.getSourceTiles();
+      for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
-      for (var t = 0, tt = sourceTiles.length; t < tt; ++t) {
+        var sourceTile = tile.getTile(tile.tileKeys[t]);
-        var sourceTile = sourceTiles[t];
         var currentZ = sourceTile.tileCoord[0];
         var sourceResolution = sourceTileGrid.getResolution(currentZ);
         var transform = this.getReplayTransform_(sourceTile, frameState);
@@ -451,9 +448,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
     context.canvas.width = size[0];
     context.canvas.height = size[1];
     var tileExtent = tileGrid.getTileCoordExtent(tileCoord);
-    var sourceTiles = tile.getSourceTiles();
+    for (var i = 0, ii = tile.tileKeys.length; i < ii; ++i) {
-    for (var i = 0, ii = sourceTiles.length; i < ii; ++i) {
+      var sourceTile = tile.getTile(tile.tileKeys[i]);
-      var sourceTile = sourceTiles[i];
       var sourceTileCoord = sourceTile.tileCoord;
       var pixelScale = pixelRatio / resolution;
       var transform = ol.transform.reset(this.tmpTransform_);

src/ol/vectorimagetile.js

@@ -72,10 +72,10 @@ ol.VectorImageTile = function(tileCoord, state, src, format, tileLoadFunction,
   this.sourceTiles_ = sourceTiles;
 
   /**
-   * @private
+   * Keys of source tiles used by this tile. Use with {@link #getTile}.
    * @type {Array.<string>}
    */
-  this.usedSourceTileKeys_ = [];
+  this.tileKeys = [];
 
   /**
    * @type {string}
@@ -112,7 +112,7 @@ ol.VectorImageTile = function(tileCoord, state, src, format, tileLoadFunction,
               format, tileLoadFunction);
         }
         sourceTile.consumers++;
-        this.usedSourceTileKeys_.push(sourceTileKey);
+        this.tileKeys.push(sourceTileKey);
       }
     }.bind(this));
   }
@@ -125,12 +125,12 @@ ol.inherits(ol.VectorImageTile, ol.Tile);
  * @inheritDoc
  */
 ol.VectorImageTile.prototype.disposeInternal = function() {
-  var sourceTiles = this.getSourceTiles();
+  for (var i = 0, ii = this.tileKeys.length; i < ii; ++i) {
-  for (var i = 0, ii = sourceTiles.length; i < ii; ++i) {
+    var sourceTileKey = this.tileKeys[i];
-    var sourceTile = sourceTiles[i];
+    var sourceTile = this.getTile(sourceTileKey);
     sourceTile.consumers--;
     if (sourceTile.consumers == 0) {
-      delete this.sourceTiles_[sourceTile.tileCoord.toString()];
+      delete this.sourceTiles_[sourceTileKey];
       sourceTile.dispose();
     }
   }
@@ -181,14 +181,6 @@ ol.VectorImageTile.prototype.getFormat = function() {
 };
 
 
-/**
- * @return {Array.<ol.Feature>} Features.
- */
-ol.VectorImageTile.prototype.getFeatures = function() {
-  return this.features_;
-};
-
-
 /**
  * @return {ol.TileReplayState} The replay state.
  */
@@ -201,17 +193,16 @@ ol.VectorImageTile.prototype.getReplayState = function() {
  * @inheritDoc
  */
 ol.VectorImageTile.prototype.getKey = function() {
-  return this.usedSourceTileKeys_.join('/') + '/' + this.src_;
+  return this.tileKeys.join('/') + '/' + this.src_;
 };
 
 
 /**
- * @return {Array.<ol.VectorTile>} Source tiles for this tile.
+ * @param {string} tileKey Key (tileCoord) of the source tile.
+ * @return {ol.VectorTile} Source tile.
  */
-ol.VectorImageTile.prototype.getSourceTiles = function() {
+ol.VectorImageTile.prototype.getTile = function(tileKey) {
-  return this.usedSourceTileKeys_.map(function(sourceTileKey) {
+  return this.sourceTiles_[tileKey];
-    return this.sourceTiles_[sourceTileKey];
-  }.bind(this));
 };
 
 
@@ -225,15 +216,15 @@ ol.VectorImageTile.prototype.load = function() {
     this.setState(ol.TileState.LOADING);
   }
   if (this.state == ol.TileState.LOADING) {
-    this.usedSourceTileKeys_.forEach(function(sourceTileKey) {
+    this.tileKeys.forEach(function(sourceTileKey) {
-      var sourceTile = this.sourceTiles_[sourceTileKey];
+      var sourceTile = this.getTile(sourceTileKey);
       if (sourceTile.state == ol.TileState.IDLE) {
         sourceTile.setLoader(this.loader_);
         sourceTile.load();
       } else if (sourceTile.state == ol.TileState.ERROR) {
         errors = true;
       } else if (sourceTile.state == ol.TileState.EMPTY) {
-        ol.array.remove(this.usedSourceTileKeys_, sourceTileKey);
+        ol.array.remove(this.tileKeys, sourceTileKey);
       }
       if (sourceTile.state == ol.TileState.LOADING) {
         var key = ol.events.listen(sourceTile, ol.events.EventType.CHANGE, function(e) {
@@ -244,11 +235,11 @@ ol.VectorImageTile.prototype.load = function() {
             ol.events.unlistenByKey(key);
             ol.array.remove(this.loadListenerKeys_, key);
             if (state == ol.TileState.ERROR) {
-              ol.array.remove(this.usedSourceTileKeys_, sourceTileKey);
+              ol.array.remove(this.tileKeys, sourceTileKey);
               errors = true;
             }
             if (leftToLoad == 0) {
-              this.setState(this.usedSourceTileKeys_.length > 0 ?
+              this.setState(this.tileKeys.length > 0 ?
                   ol.TileState.LOADED : ol.TileState.ERROR);
             }
           }
@@ -260,7 +251,7 @@ ol.VectorImageTile.prototype.load = function() {
   }
   if (leftToLoad == 0) {
     setTimeout(function() {
-      this.setState(this.usedSourceTileKeys_.length > 0 ?
+      this.setState(this.tileKeys.length > 0 ?
           ol.TileState.LOADED :
           (errors ? ol.TileState.ERROR : ol.TileState.EMPTY));
     }.bind(this), 0);

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -170,8 +170,8 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       var tile = new ol.VectorImageTile([0, 0, 0]);
       tile.wrappedTileCoord = [0, 0, 0];
       tile.setState(ol.TileState.LOADED);
-      tile.getSourceTiles = function() {
+      tile.getSourceTile = function() {
-        return [sourceTile];
+        return sourceTile;
       };
       layer.getSource().getTile = function() {
         return tile;
@@ -205,14 +205,15 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     var TileClass = function() {
       ol.VectorImageTile.apply(this, arguments);
       this.setState('loaded');
-      var sourceTile = new ol.VectorTile();
+      var sourceTile = new ol.VectorTile([0, 0, 0]);
       sourceTile.setProjection(ol.proj.get('EPSG:3857'));
       sourceTile.getReplayGroup = function() {
         return replayGroup;
       };
-      this.getSourceTiles = function() {
+      var key = sourceTile.tileCoord.toString();
-        return [sourceTile];
+      this.tileKeys = [key];
-      };
+      this.sourceTiles_ = {};
+      this.sourceTiles_[key] = sourceTile;
     };
     ol.inherits(TileClass, ol.VectorImageTile);
 

test/spec/ol/vectorimagetile.test.js

@@ -19,7 +19,7 @@ describe('ol.VectorImageTile', function() {
         1, ol.proj.get('EPSG:3857'), ol.VectorTile);
 
     tile.load();
-    var sourceTile = tile.getSourceTiles()[0];
+    var sourceTile = tile.getTile(tile.tileKeys[0]);
     var loader = sourceTile.loader_;
     expect(typeof loader).to.be('function');