[ol.layer.TileLayer] do not load tiles outside the layer's extent

src/ol/layer/TileLayer.js

@@ -351,6 +351,9 @@ ol.layer.TileLayer.prototype.getTile = function(url, bounds) {
  * @param {number} z
  */
 ol.layer.TileLayer.prototype.getTileForXYZ = function(x, y, z) {
+    if (!this.validXY(x, y, z)) {
+        return null;
+    }
     var tileUrl = this.getTileUrl(x, y, z);
     var tile = this.cache_.get(tileUrl);
     if (!goog.isDef(tile)) {
@@ -360,6 +363,48 @@ ol.layer.TileLayer.prototype.getTileForXYZ = function(x, y, z) {
     return tile;
 };
 
+/**
+ * Determine if the tile x/y/z is with the layer extent. Return
+ * true if the layer has no extent.
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @return {boolean}
+ */
+ol.layer.TileLayer.prototype.validXY = function(x, y, z) {
+    var extent = this.getExtent();
+    if (goog.isNull(extent)) {
+        return true;
+    }
+    var extentMinX = extent.getMinX(),
+        extentMinY = extent.getMinY(),
+        extentMaxX = extent.getMaxX(),
+        extentMaxY = extent.getMaxY();
+    var tileOrigin = this.getTileOrigin(),
+        tileOriginX = tileOrigin[0],
+        tileOriginY = tileOrigin[1];
+    var resolution = this.getResolutions()[z];
+    var tileWidth = this.tileWidth_ * resolution,
+        tileHeight = this.tileHeight_ * resolution;
+    var minX, maxX;
+    if (this.xRight_) {
+        minX = Math.floor((extentMinX - tileOriginX) / tileWidth);
+        maxX = Math.ceil((extentMaxX - tileOriginX) / tileWidth) - 1;
+    } else {
+        minX = Math.floor((tileOriginX - extentMaxX) / tileWidth);
+        maxX = Math.ceil((tileOriginX - extentMinX) / tileWidth) - 1;
+    }
+    var minY, maxY;
+    if (this.yDown_) {
+        minY = Math.floor((tileOriginY - extentMaxY) / tileHeight);
+        maxY = Math.ceil((tileOriginY - extentMinY) / tileHeight) - 1;
+    } else {
+        minY = Math.floor((extentMinY - tileOriginY) / tileHeight);
+        maxY = Math.ceil((extentMaxY - tileOriginY) / tileHeight) - 1;
+    }
+    return x >= minX && x <= maxX && y >= minY && y <= maxY;
+};
+
 /**
  * Get data from the layer. This is the layer's main API function.
  * @param {ol.Bounds} bounds

src/ol/renderer/TileLayerRenderer.js

@@ -215,24 +215,29 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
             } else {
                 pxTileBottom = pxTileTop + pxTileHeight;
             }
+            img = null;
             tile = this.renderedTiles_[xyz];
             if (!tile) {
                 tile = this.layer_.getTileForXYZ(tileX, tileY, tileZ);
-                if (!tile.isLoaded() && !tile.isLoading()) {
-                    tile.load();
+                if (tile) {
+                    if (!tile.isLoaded() && !tile.isLoading()) {
+                        tile.load();
+                    }
+                    this.renderedTiles_[xyz] = tile;
+                    img = tile.getImg();
+                    goog.dom.appendChild(fragment, img);
+                    newTiles = true;
                 }
-                this.renderedTiles_[xyz] = tile;
-                img = tile.getImg();
-                goog.dom.appendChild(fragment, img);
-                newTiles = true;
             } else {
                 img = tile.getImg();
             }
-            img.style.top = pxTileTop + "px";
-            img.style.left = pxTileLeft + "px";
-            if (scale !== 1) {
-                img.style.height = (pxTileRight - pxTileLeft) + "px";
-                img.style.width = (pxTileBottom - pxTileTop) + "px";
+            if (img) {
+                img.style.top = pxTileTop + "px";
+                img.style.left = pxTileLeft + "px";
+                if (scale !== 1) {
+                    img.style.height = (pxTileRight - pxTileLeft) + "px";
+                    img.style.width = (pxTileBottom - pxTileTop) + "px";
+                }
             }
             pxTileTop = pxTileBottom;
         }