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

Merge pull request #127 from elemoine/tile-fade-in

Browse Source 
CSS-based tile animation
This commit is contained in:
Éric Lemoine
2012-01-17 21:06:11 -08:00
parent a5f4daa747 99ca32540d
commit 37d21272b7
14 changed files with 261 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Layer/ArcGIS93Rest.html
-25
View File
@@ -190,31 +190,6 @@
}
function test_Layer_AGS93_setOpacity (t) {
var params = {layers: "show:0,2"};
t.plan( 5 );
var map = new OpenLayers.Map('map');
map.projection = "xx";
tParams = { layers: 'show:0,2',
format: 'png'};
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.ArcGIS93Rest(name, url, tParams, tOptions);
map.addLayer(tLayer);
map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
tLayer.setOpacity("0.6");
t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
var pixel = new OpenLayers.Pixel(5,6);
var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
tile.draw();
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.6, "Tile opacity is set correctly");
map.destroy();
}
function test_Layer_AGS93_noGutters (t) {
t.plan(2);
var map = new OpenLayers.Map('map');
tests/Layer/Grid.html
+104 -2
View File
@@ -659,6 +659,38 @@
t.eq( layer.grid, null, "layer.grid is null after destroy" );
t.eq( layer.tileSize, null, "layer.tileSize is null after destroy" );
}
function test_setOpacity(t) {
t.plan(5);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true,
opacity: '0.6'
});
map.addLayer(layer);
// setCenter adds tiles to the layer's grid
map.setCenter(new OpenLayers.LonLat(0, 0), 5);
var tile = layer.grid[0][0], tileImg = tile.imgDiv;
tile.onImageLoad(); // simulate an image load event
t.eq(layer.opacity, '0.6', 'layer opacity value is correct');
t.eq(parseFloat(tileImg.style.opacity), 0.6, 'tile opacity is correct');
layer.setOpacity('0.2');
t.eq(layer.opacity, '0.2', 'layer opacity value is correct');
t.eq(parseFloat(tileImg.style.opacity), 0.2, 'tile opacity is correct');
tile = layer.addTile(new OpenLayers.Bounds(1, 2, 3, 4),
new OpenLayers.Pixel(5, 6));
tile.draw(); // add tile to the grid
tile.onImageLoad(); // simulate an image load event
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.2, "tile opacity is correc");
map.destroy();
}
function test_getServerResolution(t) {
@@ -937,7 +969,7 @@
}
function test_applyBackBuffer(t) {
t.plan(13);
t.plan(16);
var map = new OpenLayers.Map('map2');
var layer = new OpenLayers.Layer.WMS('', '', {}, {
@@ -1000,6 +1032,24 @@
t.eq(layer.backBuffer.style.top, '295%',
'back buffer has correct top');
// test #4
// and a back buffer in the layer and do as if back buffer removal
// has been scheduled, and test that applyBackBuffer removes the
// back buffer and clears the timer
layer.createBackBuffer = function() {
return;
};
backBuffer = document.createElement('div');
layer.div.insertBefore(backBuffer, layer.div.firstChild);
layer.backBuffer = backBuffer;
layer.backBufferTimerId = 'fake';
layer.applyBackBuffer(2);
t.ok(backBuffer.parentNode !== layer.div,
'back buffer is not child node of layer div');
t.eq(layer.backBuffer, null,
'back buffer not set in layer');
t.eq(layer.backBufferTimerId, null,
'back buffer timer cleared');
map.destroy();
}
@@ -1046,7 +1096,7 @@
}
function test_removeBackBuffer(t) {
t.plan(3);
t.plan(4);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('', '', {}, {isBaseLayer: true});
@@ -1058,12 +1108,17 @@
layer.div.appendChild(backBuffer);
layer.backBufferResolution = 32;
// add a fake back buffer removal timer
layer.backBufferTimerId = 'fake';
layer.removeBackBuffer();
t.eq(layer.backBuffer, null, 'backBuffer set to null in layer');
t.eq(layer.backBufferResolution, null,
'backBufferResolution set to null in layer');
t.ok(backBuffer.parentNode !== layer.div,
'back buffer removed from layer');
t.eq(layer.backBufferTimerId, null,
'backBufferTimerId set to null in layer');
map.destroy();
}
@@ -1203,6 +1258,53 @@
map.destroy();
}
function test_delayed_back_buffer_removal(t) {
//
// Test that the delaying of the back buffer removal behaves
// as expected.
//
t.plan(5);
// set up
var map = new OpenLayers.Map('map', {
resolutions: [32, 16, 8, 4, 2, 1]
});
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true,
transitionEffect: 'resize'
});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.zoomTo(1);
t.delay_call(1, function() {
t.ok(layer.backBuffer.parentNode === layer.div,
'[a] back buffer is a child of layer div');
t.ok(layer.backBufferTimerId !== null,
'[a] back buffer scheduled for removal');
var backBuffer = layer.backBuffer;
map.zoomTo(2);
t.ok(layer.backBuffer !== backBuffer,
'[b] a new back buffer was created');
t.ok(layer.backBuffer.parentNode === layer.div,
'[b] back buffer is a child of layer div');
t.ok(layer.backBufferTimerId === null,
'[b] back buffer no longer scheduled for removal');
// tear down
map.destroy();
});
}
</script>
</head>
<body>
tests/Layer/Image.html
+1 -1
View File
@@ -128,7 +128,7 @@
function test_loadEvents(t) {
t.plan(3);
var map = new OpenLayers.Map('map');
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.Image(
'Test', '../../img/blank.gif',
new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
tests/Layer/MapServer.html
-25
View File
@@ -190,31 +190,6 @@
}
function test_Layer_MapServer_setOpacity (t) {
t.plan( 5 );
var map = new OpenLayers.Map('map');
map.projection = "xx";
tUrl = "http://labs.metacarta.com/cgi-bin/mapserv";
tParams = { layers: 'basic',
format: 'image/png'};
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.MapServer(name, tUrl, tParams, tOptions);
map.addLayer(tLayer);
map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
tLayer.setOpacity("0.6");
t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
var pixel = new OpenLayers.Pixel(5,6);
var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
tile.draw();
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.6, "Tile opacity is set correctly");
map.destroy();
}
function test_Layer_MapServer_singleTile (t) {
t.plan( 5 );
var map = new OpenLayers.Map('map');
tests/Layer/WMS.html
+15 -21
View File
@@ -271,31 +271,25 @@
}
function test_Layer_WMS_setOpacity (t) {
t.plan( 5 );
function test_setOpacity(t) {
t.plan(1);
var map = new OpenLayers.Map('map');
map.projection = "xx";
tUrl = "http://octo.metacarta.com/cgi-bin/mapserv";
tParams = { layers: 'basic',
format: 'image/png'};
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.WMS(name, tUrl, tParams, tOptions);
map.addLayer(tLayer);
var layer = new OpenLayers.Layer.WMS(
null, "/bogus/wms", {layers: "mylayer"}
);
var map = new OpenLayers.Map("map");
map.addLayer(layer);
map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
tLayer.setOpacity("0.6");
t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
var pixel = new OpenLayers.Pixel(5,6);
var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
tile.draw();
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.6, "Tile opacity is set correctly");
map.destroy();
layer.setOpacity(0.5);
t.delay_call(1, function() {
t.eq(parseFloat(layer.div.firstChild.style.opacity), 0.5, "opacity set");
map.destroy();
});
}
function test_Layer_WMS_noGutters (t) {
t.plan(2);
var map = new OpenLayers.Map('map');
tests/Tile/Image.html
+28 -2
View File
@@ -262,14 +262,14 @@
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true);
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Tile image is invisible.") } );
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.visibility, "hidden", "Tile image is invisible.") } );
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {'alpha':true});
map.addLayer(layer);
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true)
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Alpha tile image is invisible.") } );
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.visibility, "hidden", "Alpha tile image is invisible.") } );
}
@@ -343,6 +343,32 @@
map.destroy();
}
function test_onImageLoad(t) {
t.plan(3);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {opacity: 0.5});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0,0), 5);
var tile = layer.grid[0][0];
var log;
tile.events.on({loadend: function() { log++; }});
log = 0;
tile.onImageLoad();
t.eq(tile.imgDiv.style.visibility, 'inherit',
'onImageLoad makes the image visible');
t.eq(parseFloat(tile.imgDiv.style.opacity), 0.5,
'onImageLoad sets the expected opacity for the image');
t.eq(log, 1,
'onImageLoad does trigger loadend');
map.destroy();
}
// test for https://github.com/openlayers/openlayers/pull/36
// (more an integration test than a unit test)
function test_olImageLoadError(t) {
tests/deprecated/Layer/MapServer/Untiled.html
-21
View File
@@ -118,27 +118,6 @@
}
function test_Layer_MapServer_Untiled_setOpacity (t) {
t.plan( 4 );
var map = new OpenLayers.Map('map');
map.projection = "xx";
tUrl = "http://labs.metacarta.com/cgi-bin/mapserv";
tParams = { layers: 'basic',
format: 'image/png'};
tOptions = { 'opacity': '0.5' };
var tLayer = new OpenLayers.Layer.MapServer.Untiled(name, tUrl, tParams, tOptions);
map.addLayer(tLayer);
map.zoomToMaxExtent();
t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
tLayer.setOpacity("0.6");
t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
map.destroy();
}
// DEPRECATED -- REMOVE IN 3.0
function test_Layer_Untiled_MapServer(t) {
t.plan(1);