Merge pull request #2757 from tschaub/new-extent

Clear the canvas on layer extent changes.

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -5,13 +5,16 @@ goog.provide('ol.renderer.canvas.TileLayer');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
+goog.require('goog.events');
 goog.require('goog.object');
 goog.require('goog.vec.Mat4');
+goog.require('ol.Object');
 goog.require('ol.Size');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.dom');
 goog.require('ol.extent');
+goog.require('ol.layer.LayerProperty');
 goog.require('ol.layer.Tile');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.canvas.Layer');
@@ -78,10 +81,32 @@ ol.renderer.canvas.TileLayer = function(mapRenderer, tileLayer) {
    */
   this.renderedTiles_ = null;
 
+  /**
+   * @private
+   * @type {Array.<goog.events.Key>}
+   */
+  this.eventKeys_ = [
+    goog.events.listen(
+        tileLayer, ol.Object.getChangeEventType(ol.layer.LayerProperty.EXTENT),
+        this.handleLayerExtentChanged_, false, this)
+  ];
+
 };
 goog.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.Layer);
 
 
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.TileLayer.prototype.disposeInternal = function() {
+  for (var i = 0, ii = this.eventKeys_.length; i < ii; ++i) {
+    goog.events.unlistenByKey(this.eventKeys_[i]);
+  }
+  this.eventKeys_.length = 0;
+  goog.base(this, 'disposeInternal');
+};
+
+
 /**
  * @inheritDoc
  */
@@ -98,6 +123,19 @@ ol.renderer.canvas.TileLayer.prototype.getImageTransform = function() {
 };
 
 
+/**
+ * Handle layer extent changes.  We clear the canvas any time the layer extent
+ * changes.
+ * @private
+ */
+ol.renderer.canvas.TileLayer.prototype.handleLayerExtentChanged_ = function() {
+  if (!goog.isNull(this.context_)) {
+    this.context_.clearRect(0, 0, this.canvasSize_[0], this.canvasSize_[1]);
+    this.renderedCanvasZ_ = NaN;
+  }
+};
+
+
 /**
  * @inheritDoc
  */