Merge pull request #6290 from ahocevar/interimtile

Use interim tiles

src/ol/renderer/canvas/tilelayer.js

@@ -80,6 +80,19 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
 ol.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.IntermediateCanvas);
 
 
+/**
+ * @private
+ * @param {ol.Tile} tile Tile.
+ * @return {boolean} Tile is drawable.
+ */
+ol.renderer.canvas.TileLayer.prototype.isDrawableTile_ = function(tile) {
+  var tileState = tile.getState();
+  var useInterimTilesOnError = this.getLayer().getUseInterimTilesOnError();
+  return tileState == ol.Tile.State.LOADED ||
+      tileState == ol.Tile.State.EMPTY ||
+      tileState == ol.Tile.State.ERROR && !useInterimTilesOnError;
+};
+
 /**
  * @inheritDoc
  */
@@ -123,7 +136,6 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
   var findLoadedTiles = this.createLoadedTileFinder(
       tileSource, projection, tilesToDrawByZ);
 
-  var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
   var tmpExtent = this.tmpExtent;
   var tmpTileRange = this.tmpTileRange_;
   var newTiles = false;
@@ -131,14 +143,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
   for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
     for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
       tile = tileSource.getTile(z, x, y, pixelRatio, projection);
-      var tileState = tile.getState();
+      if (!this.isDrawableTile_(tile)) {
-      var drawable = tileState == ol.Tile.State.LOADED ||
-          tileState == ol.Tile.State.EMPTY ||
-          tileState == ol.Tile.State.ERROR && !useInterimTilesOnError;
-      if (!drawable) {
         tile = tile.getInterimTile();
-      } else {
+      }
-        if (tileState == ol.Tile.State.LOADED) {
+      if (this.isDrawableTile_(tile)) {
+        if (tile.getState() == ol.Tile.State.LOADED) {
           tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
           if (!newTiles && this.renderedTiles.indexOf(tile) == -1) {
             newTiles = true;

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

@@ -1,27 +1,75 @@
 goog.provide('ol.test.renderer.canvas.TileLayer');
 
+goog.require('ol.Map');
+goog.require('ol.View');
 goog.require('ol.transform');
 goog.require('ol.layer.Tile');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.canvas.TileLayer');
+goog.require('ol.source.TileWMS');
 goog.require('ol.source.XYZ');
 
 
 describe('ol.renderer.canvas.TileLayer', function() {
-  var img = null;
+
-  beforeEach(function(done) {
+  describe('#prepareFrame', function() {
-    img = new Image(1, 1);
+
-    img.onload = function() {
+    var map, target, source, tile;
-      done();
+    beforeEach(function(done) {
-    };
+      target = document.createElement('div');
-    img.src = 'data:image/gif;base64,' +
+      target.style.width = '100px';
-      'R0lGODlhAQABAPAAAP8AAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
+      target.style.height = '100px';
-  });
+      document.body.appendChild(target);
-  afterEach(function() {
+      source = new ol.source.TileWMS({
-    img = null;
+        url: 'spec/ol/data/osm-0-0-0.png',
+        params: {LAYERS: 'foo', TIME: '0'}
+      });
+      source.once('tileloadend', function(e) {
+        tile = e.tile;
+        done();
+      });
+      map = new ol.Map({
+        target: target,
+        layers: [new ol.layer.Tile({
+          source: source
+        })],
+        view: new ol.View({
+          zoom: 0,
+          center: [0, 0]
+        })
+      });
+    });
+
+    afterEach(function() {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('properly handles interim tiles', function() {
+      var layer = map.getLayers().item(0);
+      source.updateParams({TIME: '1'});
+      map.renderSync();
+      var tiles = map.getRenderer().getLayerRenderer(layer).renderedTiles;
+      expect(tiles.length).to.be(1);
+      expect(tiles[0]).to.equal(tile);
+    });
   });
 
   describe('#composeFrame()', function() {
+
+    var img = null;
+    beforeEach(function(done) {
+      img = new Image(1, 1);
+      img.onload = function() {
+        done();
+      };
+      img.src = 'data:image/gif;base64,' +
+        'R0lGODlhAQABAPAAAP8AAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
+    });
+    afterEach(function() {
+      img = null;
+    });
+
     it('uses correct draw scale when rotating (HiDPI)', function() {
       var layer = new ol.layer.Tile({
         source: new ol.source.XYZ({