Expire tile by range and listen to changes

Instead of just listening for the first change, we now listen
for all changes, and expire tiles by tile range. The outcome is
that the vector layer's addFeatures and removeFeatures methods
now show instant results on the rendered map.

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -86,8 +86,7 @@ ol.renderer.canvas.VectorLayer = function(mapRenderer, layer) {
    */
   this.tileCache_ = new ol.TileCache(
       ol.renderer.canvas.VectorLayer.TILECACHE_SIZE);
-  // TODO: this is far too coarse, we want extent of added features
-  goog.events.listenOnce(layer, goog.events.EventType.CHANGE,
+  goog.events.listen(layer, goog.events.EventType.CHANGE,
       this.handleLayerChange_, false, this);
 
   /**
@@ -177,10 +176,13 @@ goog.inherits(ol.renderer.canvas.VectorLayer, ol.renderer.canvas.Layer);
  * @private
  */
 ol.renderer.canvas.VectorLayer.prototype.expireTiles_ = function(opt_extent) {
+  var tileCache = this.tileCache_;
   if (goog.isDef(opt_extent)) {
-    // TODO: implement this
+    var tileRange = this.tileGrid_.getTileRangeForExtentAndZ(opt_extent, 0);
+    tileCache.pruneTileRange(tileRange);
+  } else {
+    tileCache.clear();
   }
-  this.tileCache_.clear();
 };
 
 
@@ -305,12 +307,11 @@ ol.renderer.canvas.VectorLayer.prototype.getFeaturesForPixel =
 
 
 /**
- * @param {goog.events.Event} event Layer change event.
+ * @param {ol.layer.VectorLayerEventObject} event Layer change event.
  * @private
  */
 ol.renderer.canvas.VectorLayer.prototype.handleLayerChange_ = function(event) {
-  // TODO: get rid of this in favor of vector specific events
-  this.expireTiles_();
+  this.expireTiles_(event.extent);
   this.requestMapRenderFrame_();
 };
 
@@ -526,6 +527,7 @@ ol.renderer.canvas.VectorLayer.prototype.renderFrame =
       tile.getContext('2d').drawImage(sketchCanvas,
           (tileRange.minX - tileCoord.x) * tileSize[0],
           (tileCoord.y - tileRange.maxY) * tileSize[1]);
+      // TODO: Create an ol.VectorTile subclass of ol.Tile
       this.tileCache_.set(key, [tile, symbolSizes, maxSymbolSize]);
     }
     finalContext.drawImage(tile,