ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #7267 from tschaub/fade

Browse Source 
Render tiles with an opacity transition
This commit is contained in:
Tim Schaub
2017-09-27 19:51:55 -07:00
committed by GitHub
parent 64aa3c25a4 68a1a497b0
commit 8354d5f0a6
28 changed files with 418 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
test/rendering/ol/layer/clip.test.js
View File

@@ -58,7 +58,8 @@ describe('layer clipping', function() {
it('clips to all parts of the MultiPolygon', function(done) {
var source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
var layer = new ol.layer.Tile({

33
test/rendering/ol/layer/tile.test.js
View File

@@ -72,12 +72,28 @@ describe('ol.rendering.layer.Tile', function() {
});
}
describe('with tile transition', function() {
it('renders correctly after the transition', function(done) {
createMap('canvas');
var source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
});
waitForTiles([source], {}, function() {
setTimeout(function() {
expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
IMAGE_TOLERANCE, done);
}, 500);
});
});
});
describe('single tile layer', function() {
var source;
beforeEach(function() {
source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
});
@@ -104,10 +120,12 @@ describe('ol.rendering.layer.Tile', function() {
beforeEach(function() {
source1 = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
source2 = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png',
transition: 0
});
});
@@ -176,7 +194,8 @@ describe('ol.rendering.layer.Tile', function() {
beforeEach(function() {
source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
});
@@ -205,7 +224,8 @@ describe('ol.rendering.layer.Tile', function() {
url: 'rendering/ol/data/tiles/' + tileSize + '/{z}/{x}/{y}.png',
tileGrid: ol.tilegrid.createXYZ({
tileSize: tileSize.split('x')
})
}),
transition: 0
});
}
@@ -255,7 +275,8 @@ describe('ol.rendering.layer.Tile', function() {
beforeEach(function() {
source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
onAddLayer = function(evt) {
evt.element.on('render', function(e) {

3
test/rendering/ol/layer/vectortile.test.js
View File

@@ -65,7 +65,8 @@ describe('ol.rendering.layer.VectorTile', function() {
source = new ol.source.VectorTile({
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ(),
url: 'rendering/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf'
url: 'rendering/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf',
transition: 0
});
});

3
test/rendering/ol/source/tilewms.test.js
View File

@@ -51,7 +51,8 @@ describe('ol.rendering.source.TileWMS', function() {
'LAYERS': 'layer'
},
gutter: gutter,
url: 'rendering/ol/data/tiles/wms/wms' + gutter + '.png'
url: 'rendering/ol/data/tiles/wms/wms' + gutter + '.png',
transition: 0
});
}

4
test/spec/ol/renderer/canvas/vectortilelayer.test.js
View File

@@ -199,7 +199,8 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('re-renders when layer changed', function() {
var layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
tileGrid: ol.tilegrid.createXYZ()
tileGrid: ol.tilegrid.createXYZ(),
transition: 0
})
});
var sourceTile = new ol.VectorTile([0, 0, 0], 2);
@@ -209,6 +210,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
return document.createElement('canvas');
};
var tile = new ol.VectorImageTile([0, 0, 0]);
tile.transition_ = 0;
tile.wrappedTileCoord = [0, 0, 0];
tile.setState(ol.TileState.LOADED);
tile.getSourceTile = function() {

53
test/spec/ol/tile.test.js
View File

@@ -1,10 +1,59 @@
goog.require('ol');
goog.require('ol.ImageTile');
goog.require('ol.Tile');
goog.require('ol.TileState');
describe('ol.Tile', function() {
describe('constructor', function() {
it('sets a default transition', function() {
var coord = [0, 0, 0];
var tile = new ol.Tile(coord, ol.TileState.IDLE);
expect(tile.transition_).to.equal(250);
});
it('allows the transition to be set', function() {
var coord = [0, 0, 0];
var transition = 500;
var tile = new ol.Tile(coord, ol.TileState.IDLE, {transition: transition});
expect(tile.transition_).to.equal(transition);
});
});
describe('#getAlpha()', function() {
it('returns the alpha value for a tile in transition', function() {
var coord = [0, 0, 0];
var tile = new ol.Tile(coord, ol.TileState.IDLE);
var id = 'test';
var time = Date.now();
var startAlpha = tile.getAlpha(id, time);
expect(startAlpha > 0).to.be(true);
expect(startAlpha < 1).to.be(true);
time += tile.transition_ / 2;
var midAlpha = tile.getAlpha(id, time);
expect(midAlpha > startAlpha).to.be(true);
expect(midAlpha < 1).to.be(true);
time += tile.transition_ / 2;
var endAlpha = tile.getAlpha(id, time);
expect(endAlpha).to.be(1);
});
});
describe('#inTransition()', function() {
it('determines if the tile is in transition', function() {
var coord = [0, 0, 0];
var tile = new ol.Tile(coord, ol.TileState.IDLE);
var id = 'test';
expect(tile.inTransition(id)).to.be(true);
tile.endTransition(id);
expect(tile.inTransition(id)).to.be(false);
});
});
describe('interimChain', function() {
var head, renderTile;
beforeEach(function() {