Add EMPTY tile state instead of using null for empty tiles

src/ol/imagetile.js

@@ -13,12 +13,13 @@ goog.require('ol.TileState');
  * @constructor
  * @extends {ol.Tile}
  * @param {ol.TileCoord} tileCoord Tile coordinate.
+ * @param {ol.TileState} state State.
  * @param {string} src Image source URI.
  * @param {?string} crossOrigin Cross origin.
  */
-ol.ImageTile = function(tileCoord, src, crossOrigin) {
+ol.ImageTile = function(tileCoord, state, src, crossOrigin) {
 
-  goog.base(this, tileCoord);
+  goog.base(this, tileCoord, state);
 
   /**
    * Image URI

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -152,10 +152,6 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
 
       tileCoord = new ol.TileCoord(z, x, y);
       tile = tileSource.getTile(tileCoord, tileGrid, projection);
-      if (goog.isNull(tile)) {
-        continue;
-      }
-
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
         this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
@@ -163,7 +159,8 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
         frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);
       } else if (tileState == ol.TileState.LOADING) {
         this.listenToTileChange(tile);
-      } else if (tileState == ol.TileState.LOADED) {
+      } else if (tileState == ol.TileState.LOADED ||
+                 tileState == ol.TileState.EMPTY) {
         tilesToDrawByZ[z][tileCoord.toString()] = tile;
         continue;
       } else if (tileState == ol.TileState.ERROR) {
@@ -198,10 +195,13 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
         if (this.renderedTiles_[index] != tile) {
           x = tileSize.width * (tile.tileCoord.x - tileRange.minX);
           y = tileSize.height * (tileRange.maxY - tile.tileCoord.y);
-          if (!opaque) {
+          tileState = tile.getState();
+          if (tileState == ol.TileState.EMPTY || !opaque) {
             context.clearRect(x, y, tileSize.width, tileSize.height);
           }
-          context.drawImage(tile.getImage(), x, y);
+          if (tileState == ol.TileState.LOADED) {
+            context.drawImage(tile.getImage(), x, y);
+          }
           this.renderedTiles_[index] = tile;
         }
       }
@@ -214,10 +214,13 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
         y = (origin.y - tileExtent.maxY) / tileResolution;
         width = scale * tileSize.width;
         height = scale * tileSize.height;
-        if (!opaque) {
+        tileState = tile.getState();
+        if (tileState == ol.TileState.EMPTY || !opaque) {
           context.clearRect(x, y, width, height);
         }
-        context.drawImage(tile.getImage(), x, y, width, height);
+        if (tileState == ol.TileState.LOADED) {
+          context.drawImage(tile.getImage(), x, y, width, height);
+        }
         interimTileRange =
             tileGrid.getTileRangeForExtentAndZ(tileExtent, z);
         minX = Math.max(interimTileRange.minX, tileRange.minX);

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -110,10 +110,6 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
 
       tileCoord = new ol.TileCoord(z, x, y);
       tile = tileSource.getTile(tileCoord, tileGrid, projection);
-      if (goog.isNull(tile)) {
-        continue;
-      }
-
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
         this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
@@ -124,7 +120,8 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
       } else if (tileState == ol.TileState.LOADED) {
         tilesToDrawByZ[z][tileCoord.toString()] = tile;
         continue;
-      } else if (tileState == ol.TileState.ERROR) {
+      } else if (tileState == ol.TileState.ERROR ||
+                 tileState == ol.TileState.EMPTY) {
         continue;
       }
 

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -385,10 +385,6 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
 
         tileCoord = new ol.TileCoord(z, x, y);
         tile = tileSource.getTile(tileCoord, tileGrid, projection);
-        if (goog.isNull(tile)) {
-          continue;
-        }
-
         tileState = tile.getState();
         if (tileState == ol.TileState.IDLE) {
           this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
@@ -407,7 +403,8 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
             priority = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
             tilesToLoad.enqueue(priority, tile);
           }
-        } else if (tileState == ol.TileState.ERROR) {
+        } else if (tileState == ol.TileState.ERROR ||
+                   tileState == ol.TileState.EMPTY) {
           continue;
         }
 

src/ol/source/debugtilesource.js

@@ -19,9 +19,7 @@ goog.require('ol.tilegrid.TileGrid');
  */
 ol.DebugTile_ = function(tileCoord, tileGrid) {
 
-  goog.base(this, tileCoord);
+  goog.base(this, tileCoord, ol.TileState.LOADED);
-
-  this.state = ol.TileState.LOADED;
 
   /**
    * @private
@@ -127,7 +125,7 @@ ol.source.DebugTileSource.prototype.expireCache = function(usedTiles) {
 ol.source.DebugTileSource.prototype.getTile = function(tileCoord) {
   var key = tileCoord.toString();
   if (this.tileCache_.containsKey(key)) {
-    return /** @type {ol.DebugTile_} */ (this.tileCache_.get(key));
+    return /** @type {!ol.DebugTile_} */ (this.tileCache_.get(key));
   } else {
     var tile = new ol.DebugTile_(tileCoord, this.tileGrid);
     this.tileCache_.set(key, tile);

src/ol/source/imagetilesource.js

@@ -7,6 +7,7 @@ goog.require('ol.ImageTile');
 goog.require('ol.Projection');
 goog.require('ol.Tile');
 goog.require('ol.TileCache');
+goog.require('ol.TileState');
 goog.require('ol.TileUrlFunction');
 goog.require('ol.TileUrlFunctionType');
 goog.require('ol.source.TileSource');
@@ -89,18 +90,17 @@ ol.source.ImageTileSource.prototype.getTile =
     function(tileCoord, tileGrid, projection) {
   var key = tileCoord.toString();
   if (this.tileCache_.containsKey(key)) {
-    return /** @type {ol.Tile} */ (this.tileCache_.get(key));
+    return /** @type {!ol.Tile} */ (this.tileCache_.get(key));
   } else {
     goog.asserts.assert(tileGrid);
     goog.asserts.assert(projection);
     var tileUrl = this.tileUrlFunction(tileCoord, tileGrid, projection);
-    var tile;
+    var tile = new ol.ImageTile(
-    if (goog.isDef(tileUrl)) {
+        tileCoord,
-      tile = new ol.ImageTile(tileCoord, tileUrl, this.crossOrigin_);
+        goog.isDef(tileUrl) ? ol.TileState.IDLE : ol.TileState.EMPTY,
-      this.tileCache_.set(key, tile);
+        goog.isDef(tileUrl) ? tileUrl : '',
-    } else {
+        this.crossOrigin_);
-      tile = null;
+    this.tileCache_.set(key, tile);
-    }
     return tile;
   }
 };

src/ol/source/tilesource.js

@@ -125,7 +125,7 @@ ol.source.TileSource.prototype.getResolutions = function() {
  * @param {ol.TileCoord} tileCoord Tile coordinate.
  * @param {ol.tilegrid.TileGrid=} opt_tileGrid Tile grid.
  * @param {ol.Projection=} opt_projection Projection.
- * @return {ol.Tile} Tile.
+ * @return {!ol.Tile} Tile.
  */
 ol.source.TileSource.prototype.getTile = goog.abstractMethod;
 

src/ol/tile.js

@@ -16,7 +16,8 @@ ol.TileState = {
   IDLE: 0,
   LOADING: 1,
   LOADED: 2,
-  ERROR: 3
+  ERROR: 3,
+  EMPTY: 4
 };
 
 
@@ -25,8 +26,9 @@ ol.TileState = {
  * @constructor
  * @extends {goog.events.EventTarget}
  * @param {ol.TileCoord} tileCoord Tile coordinate.
+ * @param {ol.TileState} state State.
  */
-ol.Tile = function(tileCoord) {
+ol.Tile = function(tileCoord, state) {
 
   goog.base(this);
 
@@ -39,7 +41,7 @@ ol.Tile = function(tileCoord) {
    * @protected
    * @type {ol.TileState}
    */
-  this.state = ol.TileState.IDLE;
+  this.state = state;
 
 };
 goog.inherits(ol.Tile, goog.events.EventTarget);

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

@@ -220,12 +220,9 @@ goog.inherits(ol.test.source.MockTileSource, ol.source.TileSource);
  * @inheritDoc
  */
 ol.test.source.MockTileSource.prototype.getTile = function(tileCoord) {
-  var tile = new ol.Tile(tileCoord);
   var key = tileCoord.toString();
-  if (this.loaded_[key]) {
+  var tileState = this.loaded_[key] ? ol.TileState.LOADED : ol.TileState.IDLE;
-    tile.state = ol.TileState.LOADED;
+  return new ol.Tile(tileCoord, tileState);
-  }
-  return tile;
 };