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

No more percentage based positioning.

Browse Source 
Client zoom now supports both over- and undersampling.
This commit is contained in:
ahocevar
2012-06-10 16:53:56 +02:00
parent 405cebd482
commit f0ad48597f
12 changed files with 202 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Control/PinchZoom.html
+6 -6
View File
@@ -49,8 +49,8 @@
log.push(transform);
}
control.containerCenter = {
x: 0, y: 0
map.layerContainerOriginPx = {
x: -50, y: -50
};
control.pinchOrigin = {
@@ -60,10 +60,10 @@
var cases = [
{x: 100, y: 60, scale: 1, transform: "translate(0px, 10px) scale(1)"},
{x: 150, y: 60, scale: 1, transform: "translate(50px, 10px) scale(1)"},
{x: 150, y: 60, scale: 2, transform: "translate(-50px, -40px) scale(2)"},
{x: 50, y: 20, scale: 2.5, transform: "translate(-200px, -105px) scale(2.5)"},
{x: 150, y: 60, scale: 2, transform: "translate(-50px, -40px) scale(2)"},
{x: 50, y: 20, scale: 0.25, transform: "translate(25px, 8px) scale(0.25)"}
{x: 150, y: 60, scale: 2, transform: "translate(-100px, -90px) scale(2)"},
{x: 50, y: 20, scale: 2.5, transform: "translate(-275px, -180px) scale(2.5)"},
{x: 150, y: 60, scale: 2, transform: "translate(-100px, -90px) scale(2)"},
{x: 50, y: 20, scale: 0.25, transform: "translate(63px, 45px) scale(0.25)"}
];
var len = cases.length;
tests/Layer/ArcGIS93Rest.html
+2 -2
View File
@@ -78,8 +78,8 @@
t.eq( tile.url,
url + "?" + OpenLayers.Util.getParameterString(tParams),
"image src is created correctly via addtile" );
t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.top, "6px", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5px", "image top is set correctly via addtile" );
var firstChild = layer.div.firstChild;
t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
tests/Layer/Grid.html
+51 -112
View File
@@ -821,12 +821,8 @@
var exc;
layer.serverResolutions = [0.5];
try {
res = layer.getServerResolution(1);
} catch(e) {
exc = e;
}
t.ok(exc != undefined, '[4] getServerResolution generates exception');
res = layer.getServerResolution(1);
t.eq(res, 0.5, '[4] getServerResolution return value is correct');
}
function test_getServerZoom(t) {
@@ -864,12 +860,8 @@
var exc;
layer.serverResolutions = [0.5];
resolution = 1;
try {
zoom = layer.getServerZoom();
} catch(e) {
exc = e;
}
t.ok(exc != undefined, '[4] getServerZoom generates exception');
zoom = layer.getServerZoom();
t.eq(zoom, 0, '[4] getServerZoom return value is correct');
map.destroy();
}
@@ -891,47 +883,47 @@
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
// test initial conditions
t.eq(layer.div.style.width, '100%', 'layer div scale is 1');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 1, 'layer div scale is 1');
// change from resolution 8 to 4
map.zoomTo(3);
t.eq(layer.div.style.width, '200%', '[8->4] layer div scale is 2');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 2, '[8->4] layer div scale is 2');
// change from resolution 8 to 2
map.zoomTo(2); map.zoomTo(4);
t.eq(layer.div.style.width, '400%', '[8->2] layer div scale is 4');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 4, '[8->2] layer div scale is 4');
// change from resolution 8 to 1
map.zoomTo(2); map.zoomTo(5);
t.eq(layer.div.style.width, '800%', '[8->1] layer div scale is 8');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 8, '[8->1] layer div scale is 8');
// change from resolution 4 to 2
map.zoomTo(3); map.zoomTo(4);
t.eq(layer.div.style.width, '400%', '[4->2] layer div scale is 4');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 4, '[4->2] layer div scale is 4');
// change from resolution 4 to 1
map.zoomTo(3); map.zoomTo(5);
t.eq(layer.div.style.width, '800%', '[4->1] layer div scale is 8');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 8, '[4->1] layer div scale is 8');
// change from resolution 2 to 1
map.zoomTo(4); map.zoomTo(5);
t.eq(layer.div.style.width, '800%', '[2->1] layer div scale is 8');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 8, '[2->1] layer div scale is 8');
// change from resolution 1 to 2
map.zoomTo(5); map.zoomTo(4);
t.eq(layer.div.style.width, '400%', '[1->2] layer div scale is 4');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 4, '[1->2] layer div scale is 4');
// change from resolution 1 to 4
map.zoomTo(5); map.zoomTo(3);
t.eq(layer.div.style.width, '200%', '[1->4] layer div scale is 2');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 2, '[1->4] layer div scale is 2');
// change from resolution 1 to 8
map.zoomTo(5); map.zoomTo(2);
t.eq(layer.div.style.width, '100%', '[1->8] layer div scale is 1');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 1, '[1->8] layer div scale is 1');
// change from resolution 1 to 16
map.zoomTo(5); map.zoomTo(1);
t.eq(layer.div.style.width, '100%', '[1->16] layer div scale is 1');
t.eq(parseInt(layer.div.lastChild.style.width) / layer.tileSize.w, 1, '[1->16] layer div scale is 1');
map.destroy();
}
@@ -1022,63 +1014,8 @@
map.destroy();
}
function test_transformDiv(t) {
t.plan(8);
var map = new OpenLayers.Map('map4');
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true
});
map.addLayer(layer);
map.zoomToMaxExtent();
// the layer container's dimensions are 100px width 100px height
// the position of the viewport center is 384, 256
layer.transformDiv(2);
t.eq(layer.div.style.width, '200%', '[1] layer div has correct width');
t.eq(layer.div.style.height, '200%', '[1] layer div has correct height');
t.eq(layer.div.style.left, '-384%', '[1] layer div has correct left');
t.eq(layer.div.style.top, '-256%', '[1] layer div has correct top');
// now move the layer container and test again
map.layerContainerDiv.style.left = '-1024px';
map.layerContainerDiv.style.top = '768px';
layer.transformDiv(2);
t.eq(layer.div.style.width, '200%', '[2] layer div has correct width');
t.eq(layer.div.style.height, '200%', '[2] layer div has correct height');
t.eq(layer.div.style.left, '-1408%', '[2] layer div has correct left');
t.eq(layer.div.style.top, '512%', '[2] layer div has correct top');
map.destroy();
}
function test_getResolutionScale(t) {
t.plan(1);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true
});
map.addLayer(layer);
map.zoomToMaxExtent();
layer.transformDiv(2);
var scale = layer.getResolutionScale();
t.eq(scale, 2, 'getResolutionScale returns correct value');
map.destroy();
}
function test_applyBackBuffer(t) {
t.plan(16);
t.plan(12);
var map = new OpenLayers.Map('map2');
var layer = new OpenLayers.Layer.WMS('', '', {}, {
@@ -1103,19 +1040,16 @@
return backBuffer;
};
layer.gridResolution = 32;
layer.backBufferResolution = 2;
layer.grid[0][0].bounds = new OpenLayers.Bounds(0, 1, 1, 0);
layer.applyBackBuffer(2);
t.ok(layer.backBuffer === backBuffer,
'back buffer set in layer');
t.ok(layer.div.firstChild === backBuffer,
'back buffer inserted as first child');
t.eq(layer.backBuffer.style.width, '1600%',
'back buffer has correct width');
t.eq(layer.backBuffer.style.height, '1600%',
'back buffer has correct height');
t.eq(layer.backBuffer.style.left, '250%',
t.eq(layer.backBuffer.style.left, '250px',
'back buffer has correct left');
t.eq(layer.backBuffer.style.top, '275%',
t.eq(layer.backBuffer.style.top, '275px',
'back buffer has correct top');
// test #3
@@ -1124,21 +1058,18 @@
return backBuffer;
};
layer.gridResolution = 32;
layer.backBufferResolution = 2;
layer.grid[0][0].bounds = new OpenLayers.Bounds(0, 1, 1, 0);
map.layerContainerDiv.style.left = '20px';
map.layerContainerDiv.style.top = '-20px';
map.layerContainerOriginPx.x = 20;
map.layerContainerOriginPx.y = -20;
layer.applyBackBuffer(2);
t.ok(layer.backBuffer === backBuffer,
'back buffer set in layer');
t.ok(layer.div.firstChild === backBuffer,
'back buffer inserted as first child');
t.eq(layer.backBuffer.style.width, '1600%',
'back buffer has correct width');
t.eq(layer.backBuffer.style.height, '1600%',
'back buffer has correct height');
t.eq(layer.backBuffer.style.left, '230%',
t.eq(layer.backBuffer.style.left, '230px',
'back buffer has correct left');
t.eq(layer.backBuffer.style.top, '295%',
t.eq(layer.backBuffer.style.top, '295px',
'back buffer has correct top');
// test #4
@@ -1189,15 +1120,21 @@
return document.createElement('div');
};
backBuffer = layer.createBackBuffer();
layer.backBufferResolution = 1;
layer.gridResolution = 1;
layer.backBuffer = backBuffer;
layer.div.appendChild(backBuffer);
layer.backBufferLonLat = new OpenLayers.Bounds(0, 0);
layer.applyBackBuffer(1);
t.ok(backBuffer != undefined,
'createBackBuffer returns a back buffer');
t.eq(backBuffer.childNodes[0].style.left, '0%',
t.eq(backBuffer.childNodes[0].style.left, '0px',
'first tile has correct left');
t.eq(backBuffer.childNodes[0].style.top, '0%',
t.eq(backBuffer.childNodes[0].style.top, '0px',
'first tile has correct top');
t.eq(backBuffer.childNodes[1].style.left, '256%',
t.eq(backBuffer.childNodes[1].style.left, '256px',
'second tile has correct left');
t.eq(backBuffer.childNodes[1].style.top, '0%',
t.eq(backBuffer.childNodes[1].style.top, '0px',
'second tile has correct top');
map.destroy();
@@ -1257,8 +1194,8 @@
map.setCenter(new OpenLayers.LonLat(50, 50));
t.ok(layer.backBuffer && layer.backBuffer.parentNode === layer.div,
'backbuffer inserted after map move');
t.eq(layer.backBuffer.style.left, '-25%');
t.eq(layer.backBuffer.style.top, '-28%');
t.eq(layer.backBuffer.style.left, '-25px');
t.eq(layer.backBuffer.style.top, '-28px');
// zoom
map.zoomTo(1);
t.eq(layer.backBuffer, null,
@@ -1289,7 +1226,8 @@
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
layer.createBackBuffer = function() {
var origCreateBackBuffer = OpenLayers.Tile.Image.prototype.createBackBuffer;
OpenLayers.Tile.Image.prototype.createBackBuffer = function() {
return document.createElement('div');
};
@@ -1304,61 +1242,61 @@
// change resolution from 8 to 4
map.zoomTo(3);
t.eq(layer.backBuffer.style.width, '100%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 1,
'[8->4] back buffer not scaled');
removeBackBuffer();
// change resolution from 8 to 2
map.zoomTo(2); removeBackBuffer(); map.zoomTo(4);
t.eq(layer.backBuffer.style.width, '100%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 1,
'[8->2] back buffer not scaled');
removeBackBuffer();
// change resolution from 16 to 4
map.zoomTo(1); removeBackBuffer(); map.zoomTo(3);
t.eq(layer.backBuffer.style.width, '200%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 2,
'[16->4] back buffer width is as expected');
t.eq(layer.backBuffer.style.width, '200%',
t.eq(parseInt(layer.backBuffer.firstChild.style.height) / parseInt(layer.div.lastChild.style.height), 2,
'[16->4] back buffer height is as expected');
removeBackBuffer();
// change resolution from 32 to 1
map.zoomTo(0); removeBackBuffer(); map.zoomTo(5);
t.eq(layer.backBuffer.style.width, '400%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 4,
'[32->1] back buffer width is as expected');
t.eq(layer.backBuffer.style.width, '400%',
t.eq(parseInt(layer.backBuffer.firstChild.style.height) / parseInt(layer.div.lastChild.style.height), 4,
'[32->1] back buffer height is as expected');
removeBackBuffer();
// change resolution from 4 to 2
map.zoomTo(3); removeBackBuffer(); map.zoomTo(4);
t.eq(layer.backBuffer.style.width, '100%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 1,
'[4->2] back buffer not scaled');
removeBackBuffer();
// change resolution from 4 to 1
map.zoomTo(3); removeBackBuffer(); map.zoomTo(5);
t.eq(layer.backBuffer.style.width, '100%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 1,
'[4->1] back buffer not scaled');
removeBackBuffer();
// change resolution from 1 to 4
map.zoomTo(5); removeBackBuffer(); map.zoomTo(3);
t.eq(layer.backBuffer.style.width, '100%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 1,
'[1->4] back buffer not scaled');
removeBackBuffer();
// change resolution from 4 to 8
map.zoomTo(3); removeBackBuffer(); map.zoomTo(2);
t.eq(layer.backBuffer.style.width, '100%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 1,
'[4->8] back buffer not scaled');
removeBackBuffer();
// change resolution from 4 to 16
map.zoomTo(3); removeBackBuffer(); map.zoomTo(1);
t.eq(layer.backBuffer.style.width, '50%',
t.eq(parseInt(layer.backBuffer.firstChild.style.width) / parseInt(layer.div.lastChild.style.width), 0.5,
'[4->16] back buffer width is as expected');
t.eq(layer.backBuffer.style.width, '50%',
t.eq(parseInt(layer.backBuffer.firstChild.style.height) / parseInt(layer.div.lastChild.style.height), 0.5,
'[4->16] back buffer height is as expected');
removeBackBuffer();
@@ -1367,6 +1305,7 @@
//
map.destroy();
OpenLayers.Tile.Image.prototype.createBackBuffer = origCreateBackBuffer
}
function test_delayed_back_buffer_removal(t) {
tests/Layer/MapServer.html
+2 -2
View File
@@ -58,8 +58,8 @@
t.eq( tile.url,
url + "?" + OpenLayers.Util.getParameterString(tParams).replace(/,/g, "+"),
"image src is created correctly via addtile" );
t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.top, "6px", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5px", "image top is set correctly via addtile" );
var firstChild = layer.div.firstChild;
t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
tests/Layer/WMS.html
+4 -4
View File
@@ -89,8 +89,8 @@
t.eq( tile.url,
layer.getFullRequestString(tParams),
"image src is created correctly via addtile" );
t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.top, "6px", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5px", "image top is set correctly via addtile" );
var firstChild = layer.div.firstChild;
t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
@@ -120,8 +120,8 @@
t.eq( tile.url,
layer.getFullRequestString(tParams),
"image src is created correctly via addtile" );
t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.top, "6px", "image top is set correctly via addtile" );
t.eq( tile.getTile().style.left, "5px", "image top is set correctly via addtile" );
var firstChild = layer.div.firstChild;
t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
tests/Tile/Image.html
+2 -2
View File
@@ -155,8 +155,8 @@
t.delay_call(0.1, function() {
t.eq( tile.imgDiv.src, expected.src, "tile.draw creates an image");
});
t.eq( tile.imgDiv.style.width, "5%", "Image width is correct" );
t.eq( tile.imgDiv.style.height, "6%", "Image height is correct" );
t.eq( tile.imgDiv.style.width, "5px", "Image width is correct" );
t.eq( tile.imgDiv.style.height, "6px", "Image height is correct" );
t.ok( tile.imgDiv.parentNode === layer.div, "Image is directly appended to the layer div" );
// this should trigger a "reload" event (since the image never actually