Merge pull request #800 from ahocevar/transform

Use GPU where available; animated zooming. r=@elemoine
This commit is contained in:
ahocevar
2013-02-14 01:15:18 -08:00
23 changed files with 491 additions and 173 deletions
+1
View File
@@ -148,6 +148,7 @@
var nav = new OpenLayers.Control.Navigation({zoomWheelEnabled: false});
var map = new OpenLayers.Map({
div: "map",
zoomMethod: null,
controls: [nav],
layers: [
new OpenLayers.Layer(null, {isBaseLayer: true})
+1 -1
View File
@@ -170,7 +170,7 @@
function test_clear(t) {
t.plan(7);
var map = new OpenLayers.Map("map");
var map = new OpenLayers.Map("map", {zoomMethod: null});
var layer = new OpenLayers.Layer(
"test", {isBaseLayer: true}
);
+5 -3
View File
@@ -77,7 +77,7 @@
function test_Control_PanZoomBar_onButtonClick (t) {
t.plan(2);
map = new OpenLayers.Map('map', {controls:[]});
map = new OpenLayers.Map('map', {controls:[], zoomMethod: null});
var layer = new OpenLayers.Layer.WMS("Test Layer",
"http://octo.metacarta.com/cgi-bin/mapserv?",
{map: "/mapdata/vmap_wms.map", layers: "basic"});
@@ -97,7 +97,8 @@
t.plan(1);
map = new OpenLayers.Map('map', {
controls: [],
fractionalZoom: true
fractionalZoom: true,
zoomMethod: null
});
var layer = new OpenLayers.Layer.WMS("Test Layer", "http://octo.metacarta.com/cgi-bin/mapserv?", {
map: "/mapdata/vmap_wms.map",
@@ -127,7 +128,8 @@
var map = new OpenLayers.Map('map', {
controls: [],
fractionalZoom: true
fractionalZoom: true,
zoomMethod: null,
});
var layer = new OpenLayers.Layer.WMS("Test Layer", "http://octo.metacarta.com/cgi-bin/mapserv?", {
map: "/mapdata/vmap_wms.map",
+8 -8
View File
@@ -45,8 +45,8 @@
});
var log = [];
control.applyTransform = function(transform) {
log.push(transform);
map.applyTransform = function(x, y, scale) {
log.push([x, y, scale]);
}
map.layerContainerOriginPx = {
@@ -58,12 +58,12 @@
};
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(-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)"}
{x: 100, y: 60, scale: 1, transform: [-50, -40, 1]},
{x: 150, y: 60, scale: 1, transform: [0, -40, 1]},
{x: 150, y: 60, scale: 2, transform: [-150, -140, 2]},
{x: 50, y: 20, scale: 2.5, transform: [-325, -230, 2.5]},
{x: 150, y: 60, scale: 2, transform: [-150, -140, 2]},
{x: 50, y: 20, scale: 0.25, transform: [13, -5, 0.25]}
];
var len = cases.length;
+2 -2
View File
@@ -22,7 +22,7 @@
control = new OpenLayers.Control.Scale('scale');
t.ok( control instanceof OpenLayers.Control.Scale, "new OpenLayers.Control returns object" );
map = new OpenLayers.Map('map');
map = new OpenLayers.Map('map', {zoomMethod: null});
layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'});
map.addLayer(layer);
map.zoomTo(0);
@@ -38,7 +38,7 @@
t.plan(2);
control = new OpenLayers.Control.Scale();
t.ok( control instanceof OpenLayers.Control.Scale, "new OpenLayers.Control returns object" );
map = new OpenLayers.Map('map');
map = new OpenLayers.Map('map', {zoomMethod: null});
layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'});
map.addLayer(layer);
map.zoomTo(0);
+4 -2
View File
@@ -43,7 +43,8 @@
var map = new OpenLayers.Map({
div: "map",
layers: [new OpenLayers.Layer(null, {isBaseLayer: true})]
layers: [new OpenLayers.Layer(null, {isBaseLayer: true})],
zoomMethod: null
});
var control = new OpenLayers.Control.Zoom();
map.addControl(control);
@@ -60,7 +61,8 @@
var map = new OpenLayers.Map({
div: "map",
layers: [new OpenLayers.Layer(null, {isBaseLayer: true})]
layers: [new OpenLayers.Layer(null, {isBaseLayer: true})],
zoomMethod: null
});
var control = new OpenLayers.Control.Zoom();
map.addControl(control);
+42 -41
View File
@@ -22,7 +22,7 @@
function test_constructor (t) {
t.plan( 8 );
t.plan( 7 );
layer = new OpenLayers.Layer.Grid(name, url, params, null);
t.ok( layer instanceof OpenLayers.Layer.Grid, "returns OpenLayers.Layer.Grid object" );
@@ -31,7 +31,6 @@
t.eq( layer.numLoadingTiles, 0, "numLoadingTiles starts at 0");
t.ok( layer.tileClass === OpenLayers.Tile.Image, "tileClass default is OpenLayers.Tile.Image");
t.eq( layer.className, 'olLayerGrid', "className default is olLayerGrid");
t.eq( layer.removeBackBufferDelay, 2500, "removeBackBufferDelay default is 2500");
var obj = {};
var func = function() {};
@@ -627,7 +626,7 @@
}
function test_Layer_Grid_getTileBounds(t) {
t.plan(2);
var map = new OpenLayers.Map("map2");
var map = new OpenLayers.Map("map2", {zoomMethod: null});
var url = "http://octo.metacarta.com/cgi-bin/mapserv";
layer = new OpenLayers.Layer.WMS(name, url, params);
@@ -824,7 +823,8 @@
t.plan(11);
var map = new OpenLayers.Map('map', {
resolutions: [32, 16, 8, 4, 2, 1]
resolutions: [32, 16, 8, 4, 2, 1],
zoomMethod: null
});
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true,
@@ -885,7 +885,8 @@
t.plan(4);
var map = new OpenLayers.Map('map', {
resolutions: [1, 0.5, 0.025]
resolutions: [1, 0.5, 0.025],
zoomMethod: null
});
var resolution;
var layer = new OpenLayers.Layer.WMS('', '', {}, {
@@ -929,7 +930,8 @@
t.plan(4);
var map = new OpenLayers.Map('map', {
resolutions: [1, 0.5, 0.025]
resolutions: [1, 0.5, 0.025],
zoomMethod: null
});
var resolution;
var layer = new OpenLayers.Layer.WMS('', '', {}, {
@@ -998,7 +1000,7 @@
layer.applyBackBuffer(2);
t.ok(layer.backBuffer === backBuffer,
'back buffer set in layer');
t.ok(layer.div.firstChild === backBuffer,
t.ok(map.layerContainerDiv.firstChild === backBuffer,
'back buffer inserted as first child');
t.eq(layer.backBuffer.style.left, '250px',
'back buffer has correct left');
@@ -1018,32 +1020,32 @@
layer.applyBackBuffer(2);
t.ok(layer.backBuffer === backBuffer,
'back buffer set in layer');
t.ok(layer.div.firstChild === backBuffer,
t.ok(map.layerContainerDiv.firstChild === backBuffer,
'back buffer inserted as first child');
t.eq(layer.backBuffer.style.left, '230px',
'back buffer has correct left');
t.eq(layer.backBuffer.style.top, '295px',
'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();
// 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');
map.layerContainerDiv.insertBefore(backBuffer, map.baseLayer.div);
layer.backBuffer = backBuffer;
layer.backBufferTimerId = 'fake';
layer.applyBackBuffer(2);
t.ok(backBuffer !== map.layerContainerDiv.firstChild,
'back buffer is not first child of layer container div');
t.eq(layer.backBuffer, null,
'back buffer not set in layer');
t.eq(layer.backBufferTimerId, null,
'back buffer timer cleared');
map.destroy();
}
function test_createBackBuffer(t) {
@@ -1095,7 +1097,7 @@
}
function test_removeBackBuffer(t) {
t.plan(4);
t.plan(3);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('', '', {}, {isBaseLayer: true});
@@ -1107,17 +1109,12 @@
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();
}
@@ -1181,7 +1178,7 @@
t.plan(4);
var map = new OpenLayers.Map('map');
var map = new OpenLayers.Map('map', {zoomMethod: null});
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true,
singleTile: true,
@@ -1212,7 +1209,8 @@
//
var map = new OpenLayers.Map('map', {
resolutions: [32, 16, 8, 4, 2, 1]
resolutions: [32, 16, 8, 4, 2, 1],
zoomMethod: null
});
var layer = new OpenLayers.Layer.WMS(
"WMS",
@@ -1308,6 +1306,7 @@
OpenLayers.Tile.Image.prototype.createBackBuffer = origCreateBackBuffer
}
function test_delayed_back_buffer_removal(t) {
//
// Test that the delaying of the back buffer removal behaves
@@ -1319,7 +1318,8 @@
// set up
var map = new OpenLayers.Map('map', {
resolutions: [32, 16, 8, 4, 2, 1]
resolutions: [32, 16, 8, 4, 2, 1],
zoomMethod: null
});
var layer = new OpenLayers.Layer.WMS('', '', {}, {
isBaseLayer: true,
@@ -1330,11 +1330,12 @@
map.zoomTo(1);
t.ok(layer.backBuffer === map.layerContainerDiv.firstChild,
'[a] back buffer is first child of layer container div');
// Mark one tile loaded, to see if back buffer removal gets scheduled.
layer.grid[1][1].onImageLoad();
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');
@@ -1344,8 +1345,8 @@
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.backBuffer === map.layerContainerDiv.firstChild,
'[b] back buffer is first child of layer container div');
t.ok(layer.backBufferTimerId === null,
'[b] back buffer no longer scheduled for removal');
@@ -1353,7 +1354,7 @@
map.destroy();
}
function test_getGridData(t) {
t.plan(12);
+1 -1
View File
@@ -233,7 +233,7 @@
}
function test_Layer_KaMap_getTileBounds(t) {
t.plan(2);
var map = new OpenLayers.Map("map");
var map = new OpenLayers.Map("map", {zoomMethod: null});
var url = "http://octo.metacarta.com/cgi-bin/mapserv";
layer = new OpenLayers.Layer.KaMap(name, url, params);
+1 -1
View File
@@ -59,7 +59,7 @@
t.plan(6);
var map = new OpenLayers.Map("map");
var map = new OpenLayers.Map("map", {zoomMethod: null});
var layer = new OpenLayers.Layer.Markers("Base", {isBaseLayer: true});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
+2 -1
View File
@@ -211,7 +211,8 @@
div: "map",
layers: [layer],
center: new OpenLayers.LonLat(0, 0),
zoom: 1
zoom: 1,
zoomMethod: null
});
t.eq(layer.features.length, 50, "50 features at zoom 1");
+2 -1
View File
@@ -245,7 +245,8 @@
layers: [layer],
projection: "EPSG:4326",
maxResolution: 0.3515625,
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
zoomMethod: null
});
map.setCenter(new OpenLayers.LonLat(-97.0, 38.0), 1);
t.eq(layer.getURL(new OpenLayers.Bounds(-135.0, 0.0, -90.0, 45.0)),
+125 -19
View File
@@ -216,6 +216,7 @@
t.plan(14);
var log = [];
map = new OpenLayers.Map('map', {
zoomMethod: null,
eventListeners: {
"movestart": function() {log.push("movestart");},
"move": function() {log.push("move");},
@@ -268,7 +269,7 @@
function test_Map_zoomend_event (t) {
t.plan(2);
map = new OpenLayers.Map('map');
map = new OpenLayers.Map('map', {zoomMethod: null});
var baseLayer = new OpenLayers.Layer.WMS("Test Layer",
"http://octo.metacarta.com/cgi-bin/mapserv?",
{map: "/mapdata/vmap_wms.map", layers: "basic"});
@@ -928,8 +929,13 @@
map.setBaseLayer(tmsLayer);
map.zoomIn();
map.pan(0, -200, {animate:false});
var log = [];
map.applyTransform = function(x, y, scale) {
log.push([x || map.layerContainerOriginPx.x, y || map.layerContainerOriginPx.y, scale]);
OpenLayers.Map.prototype.applyTransform.apply(this, arguments);
};
map.setBaseLayer(wmsLayer);
t.eq(map.layerContainerDiv.style.top, "0px", "layerContainer is recentered after setBaseLayer");
t.eq(log[0][0], 0, "layerContainer is recentered after setBaseLayer");
map.destroy();
}
@@ -1287,7 +1293,8 @@
extent = new OpenLayers.Bounds(8, 44.5, 19, 50);
var options = {
restrictedExtent: extent
restrictedExtent: extent,
zoomMethod: null
};
map = new OpenLayers.Map('map', options);
@@ -1325,7 +1332,7 @@
function test_zoomTo(t) {
t.plan(8);
var map = new OpenLayers.Map("map");
var map = new OpenLayers.Map("map", {zoomMethod: null});
map.addLayer(new OpenLayers.Layer(null, {
isBaseLayer: true
}));
@@ -1362,6 +1369,38 @@
map.destroy();
}
function test_zoomTo_animated(t) {
t.plan(2);
var map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer(null, {
isBaseLayer: true
}));
map.zoomToMaxExtent();
map.zoomTo(2);
map.zoomIn();
map.zoomOut();
map.zoomIn();
t.delay_call(2, function() {
t.eq(map.getZoom(), 3, '[fractionalZoom: false] zoomTo(2) - zoomIn() - zoomOut() - zoomIn()');
// now allow fractional zoom
map.fractionalZoom = true;
map.zoomTo(2.6);
map.zoomIn();
map.zoomOut();
map.zoomIn();
});
t.delay_call(4, function() {
t.eq(map.getZoom(), 3.6, '[fractionalZoom: true] zoomTo(2) - zoomIn() - zoomOut() - zoomIn()');
map.destroy();
});
}
function test_Map_getUnits(t) {
t.plan(2);
var map = new OpenLayers.Map("map");
@@ -1959,7 +1998,7 @@
}
function test_moveByPx(t) {
t.plan(16);
t.plan(14);
var moved;
var Layer = OpenLayers.Class(OpenLayers.Layer, {
@@ -1979,14 +2018,19 @@
{isBaseLayer: false, minResolution:2})
]
});
var log = [];
map.applyTransform = function(x, y, scale) {
log.push([x || map.layerContainerOriginPx.x, y || map.layerContainerOriginPx.y, scale]);
OpenLayers.Map.prototype.applyTransform.apply(this, arguments);
};
moved = {};
map.zoomToExtent(new OpenLayers.Bounds(-1, -1, 1, 1));
// check initial state
t.eq(map.layerContainerDiv.style.left, '0px',
t.eq(log[0][0], 0,
'[initial state] layer container left correct');
t.eq(map.layerContainerDiv.style.top, '0px',
t.eq(log[0][1], 0,
'[initial state] layer container top correct');
t.eq(moved['base'], undefined,
'[initial state] base layer not moved');
@@ -1996,9 +2040,9 @@
// move to a valid position
moved = {};
map.moveByPx(-455, 455);
t.eq(map.layerContainerDiv.style.left, '455px',
t.eq(log[1][0], 455,
'[valid position] layer container left correct');
t.eq(map.layerContainerDiv.style.top, '-455px',
t.eq(log[1][1], -455,
'[valid position] layer container top correct');
t.eq(moved['base'], true,
'[valid position] base layer moved');
@@ -2008,10 +2052,8 @@
// move outside the max extent
moved = {};
map.moveByPx(-4500, 4500);
t.eq(map.layerContainerDiv.style.left, '455px',
'[outside max extent] layer container left correct');
t.eq(map.layerContainerDiv.style.top, '-455px',
'[outside max extent] layer container top correct');
t.eq(log.length, 2,
'[outside max extent] layer container offset unchanged');
t.eq(moved['base'], undefined,
'[outside max extent] base layer not moved');
t.eq(moved['outofrange'], undefined,
@@ -2020,10 +2062,8 @@
// move outside the restricted extent
moved = {};
map.moveByPx(-500, 500);
t.eq(map.layerContainerDiv.style.left, '455px',
'[outside restricted extent] layer container left correct');
t.eq(map.layerContainerDiv.style.top, '-455px',
'[outside restricted extent] layer container top correct');
t.eq(log.length, 2,
'[outside restricted extent] layer container offset unchanged');
t.eq(moved['base'], undefined,
'[outside restricted extent] base layer not moved');
t.eq(moved['outofrange'], undefined,
@@ -2047,9 +2087,57 @@
map.zoomToExtent(new OpenLayers.Bounds(-11.25, 0, 11.25, 11.25));
var log = [];
map.applyTransform = function(x, y, scale) {
log.push([x || map.layerContainerOriginPx.x, y || map.layerContainerOriginPx.y, scale]);
OpenLayers.Map.prototype.applyTransform.apply(this, arguments);
};
map.moveByPx(-10, -10);
t.eq(map.layerContainerDiv.style.left, '10px', 'layer container left correct');
t.eq(map.layerContainerDiv.style.top, '0px', 'layer container top correct');
t.eq(log[0][0], 10, 'layer container left correct');
t.eq(log[0][1], 0, 'layer container top correct');
}
function test_applyTransform(t) {
t.plan(10);
var origStylePrefix = OpenLayers.Util.vendorPrefix.style;
OpenLayers.Util.vendorPrefix.style = function(key) { return 'transform'; };
var map = new OpenLayers.Map('map');
map.layerContainerDiv = {style: {}};
delete map.applyTransform.transform;
delete map.applyTransform.template;
var origGetStyle = OpenLayers.Element.getStyle;
OpenLayers.Element.getStyle = function() { return 'foo'; }
map.applyTransform(1, 2, 3);
OpenLayers.Element.getStyle = origGetStyle;
t.eq(map.layerContainerDiv.style.transform, 'translate3d(1px,2px,0) scale3d(3,3,1)', '3d transform and scale used when available');
delete map.applyTransform.transform;
delete map.applyTransform.template;
var origIndexOf = String.prototype.indexOf;
String.prototype.indexOf = function() { return -1; };
map.layerContainerOriginPx = {x: -3, y: 2};
map.applyTransform(1, 2, 3);
String.prototype.indexOf = origIndexOf;
t.eq(map.layerContainerDiv.style.transform, 'translate(4px,0px) scale(3,3)', '2d translate and scale correct');
t.eq(map.layerContainerDiv.style.left, '-3px', 'container origin x set as style.left');
t.eq(map.layerContainerDiv.style.top, '2px', 'container origin y set as style.top');
map.applyTransform(1, 2);
t.ok(!map.layerContainerDiv.style.transform, 'no transform set when no transform needed');
t.eq(map.layerContainerDiv.style.left, '1px', 'style.left correct when no transform needed');
t.eq(map.layerContainerDiv.style.top, '2px', 'style.top correct when no transform needed');
map.applyTransform.transform = null;
map.applyTransform(4, 5, 6);
t.eq(map.layerContainerDiv.style.left, '4px', 'style.left set when transform not available')
t.eq(map.layerContainerDiv.style.top, '5px', 'style.top set when transform not available')
t.ok(!map.layerContainerDiv.style.transform, 'no transform set, because not supported');
map.destroy();
delete map.applyTransform.transform;
delete map.applyTransform.template;
OpenLayers.Util.vendorPrefix.style = origStylePrefix;
}
function test_options(t) {
@@ -2112,6 +2200,24 @@
var center = map.getCenter();
t.ok(center.equals(new OpenLayers.LonLat(-13.25, 56)), "Center is correct and not equal to maxExtent's center");
}
function test_getZoomTargetCenter(t) {
t.plan(1);
var map = new OpenLayers.Map({
div: 'map',
layers: [
new OpenLayers.Layer('', {isBaseLayer: true})
],
center: [0, 0],
zoom: 1
});
var ll = map.getZoomTargetCenter({x: 44, y: 22}, map.getMaxResolution());
t.eq(ll.toShortString(), "180, -90", "getZoomTargetCenter works.");
map.destroy();
}
function test_autoUpdateSize(t) {
t.plan(1);
+2 -2
View File
@@ -51,7 +51,7 @@
});
// create a map with the layers and a center
var map = new OpenLayers.Map("map");
var map = new OpenLayers.Map("map", {zoomMethod: null});
map.addLayers([dummy, layer]);
map.zoomToMaxExtent();
@@ -206,7 +206,7 @@
function test_resFactor(t) {
t.plan(2);
var map = new OpenLayers.Map("map");
var map = new OpenLayers.Map("map", {zoomMethod: null});
var bbox = new OpenLayers.Strategy.BBOX();
var fakeProtocol = new OpenLayers.Protocol({
'read': function() {
+2 -1
View File
@@ -44,7 +44,8 @@
});
var map = new OpenLayers.Map('map', {
resolutions: [4, 2, 1],
maxExtent: new OpenLayers.Bounds(-40, -40, 40, 40)
maxExtent: new OpenLayers.Bounds(-40, -40, 40, 40),
zoomMethod: null,
});
map.addLayer(layer);