diff --git a/examples/color-manipulation.js b/examples/color-manipulation.js index ef5d3fa3e9..d54d7af4de 100644 --- a/examples/color-manipulation.js +++ b/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]); diff --git a/examples/sea-level.js b/examples/sea-level.js index 58783bc396..269627e82d 100644 --- a/examples/sea-level.js +++ b/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({ diff --git a/examples/shaded-relief.js b/examples/shaded-relief.js index 92c6ade1b6..9d190c449a 100644 --- a/examples/shaded-relief.js +++ b/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({ diff --git a/src/ol/source/raster.js b/src/ol/source/raster.js index fd546b3746..b930072fe6 100644 --- a/src/ol/source/raster.js +++ b/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_; }; diff --git a/test/rendering/ol/source/expected/raster-1.png b/test/rendering/ol/source/expected/raster-1.png new file mode 100644 index 0000000000..ef6dc6cb59 Binary files /dev/null and b/test/rendering/ol/source/expected/raster-1.png differ diff --git a/test/rendering/ol/source/raster.test.js b/test/rendering/ol/source/raster.test.js new file mode 100644 index 0000000000..2f650ca481 --- /dev/null +++ b/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); + }); + }); + +});