Decouple source and rendered tile grid of vector tile sources

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -62,6 +62,11 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
         tileClass: TileClass,
         tileGrid: ol.tilegrid.createXYZ()
       });
+      source.getTile = function() {
+        var tile = ol.source.VectorTile.prototype.getTile.apply(source, arguments);
+        tile.setState(ol.TileState.LOADED);
+        return tile;
+      };
       layer = new ol.layer.VectorTile({
         source: source,
         style: layerStyle
@@ -156,12 +161,18 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
           tileGrid: ol.tilegrid.createXYZ()
         })
       });
-      var tile = new ol.VectorTile([0, 0, 0], 2);
-      tile.projection_ = ol.proj.get('EPSG:3857');
-      tile.features_ = [];
-      tile.getImage = function() {
+      var sourceTile = new ol.VectorTile([0, 0, 0], 2);
+      sourceTile.setProjection(ol.proj.get('EPSG:3857'));
+      sourceTile.features_ = [];
+      sourceTile.getImage = function() {
         return document.createElement('canvas');
       };
+      var tile = new ol.VectorImageTile([0, 0, 0]);
+      tile.wrappedTileCoord = [0, 0, 0];
+      tile.setState(ol.TileState.LOADED);
+      tile.getSourceTiles = function() {
+        return [sourceTile];
+      };
       layer.getSource().getTile = function() {
         return tile;
       };
@@ -192,12 +203,18 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
   describe('#forEachFeatureAtCoordinate', function() {
     var layer, renderer, replayGroup;
     var TileClass = function() {
-      ol.VectorTile.apply(this, arguments);
+      ol.VectorImageTile.apply(this, arguments);
       this.setState('loaded');
-      this.setProjection(ol.proj.get('EPSG:3857'));
-      this.replayState_.replayGroup = replayGroup;
+      var sourceTile = new ol.VectorTile();
+      sourceTile.setProjection(ol.proj.get('EPSG:3857'));
+      sourceTile.getReplayGroup = function() {
+        return replayGroup;
+      };
+      this.getSourceTiles = function() {
+        return [sourceTile];
+      };
     };
-    ol.inherits(TileClass, ol.VectorTile);
+    ol.inherits(TileClass, ol.VectorImageTile);
 
     beforeEach(function() {
       replayGroup = {};
@@ -223,6 +240,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
         layerStates: {},
         skippedFeatureUids: {},
         viewState: {
+          projection: ol.proj.get('EPSG:3857'),
           resolution: 1,
           rotation: 0
         }

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

@@ -1,6 +1,6 @@
 goog.provide('ol.test.source.VectorTile');
 
-goog.require('ol.VectorTile');
+goog.require('ol.VectorImageTile');
 goog.require('ol.format.MVT');
 goog.require('ol.proj');
 goog.require('ol.source.VectorTile');
@@ -29,7 +29,7 @@ describe('ol.source.VectorTile', function() {
   describe('#getTile()', function() {
     it('creates a tile with the correct tile class', function() {
       tile = source.getTile(0, 0, 0, 1, ol.proj.get('EPSG:3857'));
-      expect(tile).to.be.a(ol.VectorTile);
+      expect(tile).to.be.a(ol.VectorImageTile);
     });
     it('sets the correct tileCoord on the created tile', function() {
       expect(tile.getTileCoord()).to.eql([0, 0, 0]);

test/spec/ol/vectorimagetile.test.js

@@ -0,0 +1,43 @@
+goog.provide('ol.test.VectorImageTile');
+
+goog.require('ol.events');
+goog.require('ol.VectorImageTile');
+goog.require('ol.VectorTile');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.proj');
+
+
+describe('ol.VectorImageTile', function() {
+
+  it('sets the loader function on source tiles', function() {
+    var format = new ol.format.GeoJSON();
+    var url = 'spec/ol/data/point.json';
+    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);
+
+    tile.load();
+    var loader = tile.getSourceTiles()[0].loader_;
+    expect(typeof loader).to.be('function');
+  });
+
+  it('loader sets features on the source tile', function(done) {
+    var format = new ol.format.GeoJSON();
+    var url = 'spec/ol/data/point.json';
+    var tile = new ol.VectorImageTile([0, 0, 0], 0, url, format,
+        ol.VectorImageTile.defaultLoadFunction, [0, 0, 0], function() {
+          return url;
+        }, ol.tilegrid.createXYZ(), ol.tilegrid.createXYZ(), {},
+        1, ol.proj.get('EPSG:3857'), ol.VectorTile);
+
+    tile.load();
+    var sourceTile = tile.getSourceTiles()[0];
+
+    ol.events.listen(sourceTile, 'change', function(e) {
+      expect(sourceTile.getFeatures().length).to.be.greaterThan(0);
+      done();
+    });
+  });
+
+});

test/spec/ol/vectortile.test.js

@@ -1,39 +1,14 @@
 goog.provide('ol.test.VectorTile');
 
 goog.require('ol.events');
+goog.require('ol.VectorImageTile');
 goog.require('ol.VectorTile');
 goog.require('ol.Feature');
-goog.require('ol.format.GeoJSON');
 goog.require('ol.format.TextFeature');
 goog.require('ol.proj');
 
 
-describe('ol.VectorTile.defaultLoadFunction()', function() {
-
-  it('sets the loader function on the tile', function() {
-    var format = new ol.format.GeoJSON();
-    var tile = new ol.VectorTile([0, 0, 0], null, null, format);
-    var url = 'https://example.com/';
-
-    ol.VectorTile.defaultLoadFunction(tile, url);
-    var loader = tile.loader_;
-    expect(typeof loader).to.be('function');
-  });
-
-  it('loader sets features on the tile', function(done) {
-    var format = new ol.format.GeoJSON();
-    var tile = new ol.VectorTile([0, 0, 0], null, null, format);
-    var url = 'spec/ol/data/point.json';
-
-    ol.VectorTile.defaultLoadFunction(tile, url);
-    var loader = tile.loader_;
-
-    ol.events.listen(tile, 'change', function(e) {
-      expect(tile.getFeatures().length).to.be.greaterThan(0);
-      done();
-    });
-    loader.call(tile, [], 1, ol.proj.get('EPSG:3857'));
-  });
+describe('ol.VectorTile', function() {
 
   it('loader sets features on the tile and updates proj units', function(done) {
     // mock format that return a tile-pixels feature
@@ -51,7 +26,7 @@ describe('ol.VectorTile.defaultLoadFunction()', function() {
     var tile = new ol.VectorTile([0, 0, 0], null, null, format);
     var url = 'spec/ol/data/point.json';
 
-    ol.VectorTile.defaultLoadFunction(tile, url);
+    ol.VectorImageTile.defaultLoadFunction(tile, url);
     var loader = tile.loader_;
     ol.events.listen(tile, 'change', function(e) {
       expect(tile.getFeatures().length).to.be.greaterThan(0);