Report ol.VectorTile instead of ol.VectorImageTile loads

src/ol/source/vectortile.js

@@ -4,8 +4,6 @@ goog.require('ol');
 goog.require('ol.TileState');
 goog.require('ol.VectorImageTile');
 goog.require('ol.VectorTile');
-goog.require('ol.events');
-goog.require('ol.events.EventType');
 goog.require('ol.proj');
 goog.require('ol.size');
 goog.require('ol.tilegrid');
@@ -114,9 +112,8 @@ ol.source.VectorTile.prototype.getTile = function(z, x, y, pixelRatio, projectio
         tileUrl !== undefined ? tileUrl : '',
         this.format_, this.tileLoadFunction, urlTileCoord, this.tileUrlFunction,
         this.tileGrid, this.getTileGridForProjection(projection),
-        this.sourceTiles_, pixelRatio, projection, this.tileClass);
-    ol.events.listen(tile, ol.events.EventType.CHANGE,
-        this.handleTileChange, this);
+        this.sourceTiles_, pixelRatio, projection, this.tileClass,
+        this.handleTileChange.bind(this));
 
     this.tileCache.set(tileCoordKey, tile);
     return tile;

src/ol/vectorimagetile.js

@@ -29,10 +29,12 @@ goog.require('ol.featureloader');
  * @param {function(new: ol.VectorTile, ol.TileCoord, ol.TileState, string,
  *     ol.format.Feature, ol.TileLoadFunctionType)} tileClass Class to
  *     instantiate for source tiles.
+ * @param {function(this: ol.source.VectorTile, ol.events.Event)} handleTileChange
+ *     Function to call when a source tile's state changes.
  */
 ol.VectorImageTile = function(tileCoord, state, src, format, tileLoadFunction,
     urlTileCoord, tileUrlFunction, sourceTileGrid, tileGrid, sourceTiles,
-    pixelRatio, projection, tileClass) {
+    pixelRatio, projection, tileClass, handleTileChange) {
 
   ol.Tile.call(this, tileCoord, state);
 
@@ -86,6 +88,11 @@ ol.VectorImageTile = function(tileCoord, state, src, format, tileLoadFunction,
    */
   this.loadListenerKeys_ = [];
 
+  /**
+   * @type {Array.<ol.EventsKey>}
+   */
+  this.sourceTileListenerKeys_ = [];
+
   if (urlTileCoord) {
     var extent = tileGrid.getTileCoordExtent(urlTileCoord);
     var resolution = tileGrid.getResolution(tileCoord[0]);
@@ -104,6 +111,8 @@ ol.VectorImageTile = function(tileCoord, state, src, format, tileLoadFunction,
               tileUrl == undefined ? ol.TileState.EMPTY : ol.TileState.IDLE,
               tileUrl == undefined ? '' : tileUrl,
               format, tileLoadFunction);
+          this.sourceTileListenerKeys_.push(
+              ol.events.listen(sourceTile, ol.events.EventType.CHANGE, handleTileChange));
         }
         sourceTile.consumers++;
         this.tileKeys.push(sourceTileKey);
@@ -139,6 +148,8 @@ ol.VectorImageTile.prototype.disposeInternal = function() {
   }
   this.state = ol.TileState.ABORT;
   this.changed();
+  this.sourceTileListenerKeys_.forEach(ol.events.unlistenByKey);
+  this.sourceTileListenerKeys_.length = 0;
   ol.Tile.prototype.disposeInternal.call(this);
 };
 

test/spec/ol/source/vectortile.test.js

@@ -13,7 +13,8 @@ describe('ol.source.VectorTile', function() {
   var source = new ol.source.VectorTile({
     format: format,
     tileGrid: ol.tilegrid.createXYZ({tileSize: 512}),
-    url: '{z}/{x}/{y}.pbf'
+    tilePixelRatio: 8,
+    url: 'spec/ol/data/{z}-{x}-{y}.vector.pbf'
   });
   var tile;
 
@@ -47,4 +48,21 @@ describe('ol.source.VectorTile', function() {
     });
   });
 
+  describe('Tile load events', function() {
+    it('triggers tileloadstart and tileloadend with ol.VectorTile', function(done) {
+      tile = source.getTile(14, 8938, -5681, 1, ol.proj.get('EPSG:3857'));
+      var started = false;
+      source.on('tileloadstart', function() {
+        started = true;
+      });
+      source.on('tileloadend', function(e) {
+        expect(started).to.be(true);
+        expect(e.tile).to.be.a(ol.VectorTile);
+        expect(e.tile.getFeatures().length).to.be(1327);
+        done();
+      });
+      tile.load();
+    });
+  });
+
 });

test/spec/ol/vectorimagetile.test.js

@@ -16,7 +16,7 @@ describe('ol.VectorImageTile', function() {
         ol.VectorImageTile.defaultLoadFunction, [0, 0, 0], function() {
           return url;
         }, ol.tilegrid.createXYZ(), ol.tilegrid.createXYZ(), {},
-        1, ol.proj.get('EPSG:3857'), ol.VectorTile);
+        1, ol.proj.get('EPSG:3857'), ol.VectorTile, function() {});
 
     tile.load();
     var sourceTile = tile.getTile(tile.tileKeys[0]);
@@ -36,7 +36,7 @@ describe('ol.VectorImageTile', function() {
         ol.VectorImageTile.defaultLoadFunction, [0, 0, 0], function() {
           return url;
         }, ol.tilegrid.createXYZ(), ol.tilegrid.createXYZ(), {},
-        1, ol.proj.get('EPSG:3857'), ol.VectorTile);
+        1, ol.proj.get('EPSG:3857'), ol.VectorTile, function() {});
 
     tile.load();
 
@@ -52,7 +52,7 @@ describe('ol.VectorImageTile', function() {
     var tile = new ol.VectorImageTile([0, 0, 0], 0, url, format,
         ol.VectorImageTile.defaultLoadFunction, [0, 0, 0], function() {},
         ol.tilegrid.createXYZ(), ol.tilegrid.createXYZ(), {},
-        1, ol.proj.get('EPSG:3857'), ol.VectorTile);
+        1, ol.proj.get('EPSG:3857'), ol.VectorTile, function() {});
 
     tile.load();
 
@@ -69,7 +69,7 @@ describe('ol.VectorImageTile', function() {
         ol.VectorImageTile.defaultLoadFunction, [0, 0, 0], function() {
           return url;
         }, ol.tilegrid.createXYZ(), ol.tilegrid.createXYZ({tileSize: 512}), {},
-        1, ol.proj.get('EPSG:3857'), ol.VectorTile);
+        1, ol.proj.get('EPSG:3857'), ol.VectorTile, function() {});
 
     tile.load();
     expect(tile.loadListenerKeys_.length).to.be(4);
@@ -89,7 +89,7 @@ describe('ol.VectorImageTile', function() {
         ol.VectorImageTile.defaultLoadFunction, [0, 0, 0], function() {
           return url;
         }, ol.tilegrid.createXYZ(), ol.tilegrid.createXYZ({tileSize: 512}), {},
-        1, ol.proj.get('EPSG:3857'), ol.VectorTile);
+        1, ol.proj.get('EPSG:3857'), ol.VectorTile, function() {});
 
     tile.load();
     ol.events.listenOnce(tile, 'change', function() {