Merge pull request #7341 from tschaub/raster-fix

Proper rendering of raster sources when there is a tile transition

examples/color-manipulation.js

@@ -102,7 +102,8 @@ function xyz2rgb(x) {
 
 var raster = new ol.source.Raster({
   sources: [new ol.source.Stamen({
-    layer: 'watercolor'
+    layer: 'watercolor',
+    transition: 0
   })],
   operation: function(pixels, data) {
     var hcl = rgb2hcl(pixels[0]);

examples/sea-level.js

@@ -26,7 +26,8 @@ function flood(pixels, data) {
 var key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 var elevation = new ol.source.XYZ({
   url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });
 
 var raster = new ol.source.Raster({

examples/shaded-relief.js

@@ -104,7 +104,8 @@ function shade(inputs, data) {
 
 var elevation = new ol.source.XYZ({
   url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });
 
 var raster = new ol.source.Raster({

src/ol/source/raster.js

@@ -181,6 +181,8 @@ ol.source.Raster.prototype.updateFrameState_ = function(extent, resolution, proj
   frameState.focus = center;
   frameState.size[0] = Math.round(ol.extent.getWidth(extent) / resolution);
   frameState.size[1] = Math.round(ol.extent.getHeight(extent) / resolution);
+  frameState.time = Date.now();
+  frameState.animate = false;
 
   var viewState = frameState.viewState;
   viewState.center = center;
@@ -234,6 +236,11 @@ ol.source.Raster.prototype.getImage = function(extent, resolution, pixelRatio, p
   }
 
   frameState.tileQueue.loadMoreTiles(16, 16);
+
+  if (frameState.animate) {
+    requestAnimationFrame(this.changed.bind(this));
+  }
+
   return this.renderedImageCanvas_;
 };
 

test/rendering/ol/source/raster.test.js

@@ -0,0 +1,84 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.source.Raster');
+goog.require('ol.source.XYZ');
+
+where('Uint8ClampedArray').describe('ol.rendering.source.Raster', function() {
+
+  function afterRender(source, raster, callback) {
+    var loading = 0;
+
+    source.on('tileloadstart', function(event) {
+      loading++;
+    });
+    source.on('tileloadend', function(event) {
+      loading--;
+      if (loading == 0) {
+        raster.once('afteroperations', function() {
+          callback();
+        });
+      }
+    });
+    source.on('tileloaderror', function(event) {
+      callback(new Error('Tile failed to load'));
+    });
+
+  }
+
+  var map;
+  function createMap(renderer, pixelRatio) {
+    map = new ol.Map({
+      target: createMapDiv(200, 200),
+      pixelRatio: pixelRatio,
+      renderer: renderer,
+      view: new ol.View({
+        center: [0, 0],
+        zoom: 0
+      })
+    });
+  }
+
+  afterEach(function() {
+    if (map) {
+      disposeMap(map);
+    }
+    map = null;
+  });
+
+  describe('raster source rendering', function() {
+    it('renders the result of an operation', function(done) {
+      createMap('canvas', 1);
+
+      var source = new ol.source.XYZ({
+        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
+        transition: 0
+      });
+
+      var raster = new ol.source.Raster({
+        sources: [source],
+        operation: function(pixels) {
+          var pixel = pixels[0];
+          // swap blue and red
+          var red = pixel[0];
+          pixel[0] = pixel[2];
+          pixel[2] = red;
+          return pixel;
+        }
+      });
+
+      afterRender(source, raster, function(err) {
+        if (err) {
+          done(err);
+          return;
+        }
+        expectResemble(map, 'rendering/ol/source/expected/raster-1.png', IMAGE_TOLERANCE, done);
+      });
+
+      var layer = new ol.layer.Image({source: raster});
+
+      map.addLayer(layer);
+    });
+  });
+
+});