Merge pull request #5 from elemoine/clientzoom

add continuous zooming support for tiled layers

tests/Layer/ArcGIS93Rest.html

@@ -75,8 +75,8 @@
         t.eq( tile.url,
              url + "?" + OpenLayers.Util.getParameterString(tParams),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6px", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5px", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
 
         var firstChild = layer.div.firstChild.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );

tests/Layer/Grid.html

@@ -624,6 +624,195 @@
         t.eq( layer.tileSize, null, "layer.tileSize is null after destroy" );
     }
     
+    function test_getServerResolution(t) {
+
+        t.plan(4);
+
+        var layer = new OpenLayers.Layer.Grid('', '', {}, {});
+        var res;
+
+        res = layer.getServerResolution(1);
+        t.eq(res, 1, '[1] getServerResolution return value is correct');
+
+        layer.serverResolutions = [2, 1];
+        res = layer.getServerResolution(1);
+        t.eq(res, 1, '[2] getServerResolution return value is correct');
+
+        layer.serverResolutions = [2];
+        res = layer.getServerResolution(1);
+        t.eq(res, 2, '[3] getServerResolution return value is correct');
+
+        var exc;
+        layer.serverResolutions = [0.5];
+        try {
+            res = layer.getServerResolution(1);
+        } catch(e) {
+            exc = e;
+        }
+        t.ok(exc != undefined, '[4] getServerResolution generates exception');
+    }
+
+    function test_getServerZoom(t) {
+
+        t.plan(5);
+
+        var resolution, zoom;
+        var map = new OpenLayers.Map('map', {
+            resolutions: [8, 4, 2, 1, 0.5],
+            getResolution: function() {
+                return resolution;
+            }
+        });
+        var layer = new OpenLayers.Layer.WMS('', '', {}, {isBaseLayer: true});
+        map.addLayer(layer);
+
+        resolution = 8;
+        zoom = layer.getServerZoom();
+        t.eq(zoom, 0, '[1] getServerZoom return value is correct');
+
+        resolution = 4;
+        zoom = layer.getServerZoom();
+        t.eq(zoom, 1, '[2] getServerZoom return value is correct');
+
+        layer.serverResolutions = [2, 1];
+        resolution = 1;
+        zoom = layer.getServerZoom();
+        t.eq(zoom, 3, '[3] getServerZoom return value is correct');
+
+        layer.serverResolutions = [2];
+        resolution = 0.5;
+        zoom = layer.getServerZoom();
+        t.eq(zoom, 2, '[4] getServerZoom return value is correct');
+
+        var exc;
+        layer.serverResolutions = [0.5];
+        resolution = 1;
+        try {
+            zoom = layer.getServerZoom();
+        } catch(e) {
+            exc = e;
+        }
+        t.ok(exc != undefined, '[4] getServerZoom generates exception');
+
+        map.destroy();
+    }
+
+    function test_moveTo_scale(t) {
+
+        t.plan(11);
+
+        var map = new OpenLayers.Map('map', {
+            resolutions: [32, 16, 8, 4, 2, 1]
+        });
+        var layer = new OpenLayers.Layer.WMS('', '', {}, {
+            isBaseLayer: true,
+            serverResolutions: [32, 16, 8]
+        });
+        map.addLayer(layer);
+
+        // initial resolution is 8
+        map.setCenter(new OpenLayers.LonLat(0, 0), 2);
+
+        // test initial conditions
+        t.eq(layer.div.style.width, '100%', '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');
+
+        // 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');
+
+        // 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');
+
+        // 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');
+
+        // 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');
+
+        // 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');
+
+        // 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');
+
+        // 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');
+
+        // 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');
+
+        // 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');
+
+        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();
+    }
 
   </script>
 </head>
@@ -631,5 +820,6 @@
 <div id="map" style="width:499px;height:549px;display:none"></div>
 <div id="map2" style="width:500px;height:550px;display:none"></div>
 <div id="map3" style="width:594px;height:464px;display:none"></div>
+<div id="map4" style="width:768px;height:512px;display:none"></div>
 </body>
 </html>

tests/Layer/MapServer.html

@@ -56,8 +56,8 @@
         t.eq( tile.url,
              url + "?" + OpenLayers.Util.getParameterString(tParams).replace(/,/g, "+"),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6px", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5px", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
 
         var firstChild = layer.div.firstChild.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );

tests/Layer/WMS.html

@@ -86,8 +86,8 @@
         t.eq( tile.url,
              layer.getFullRequestString(tParams),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6px", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5px", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
 
         var firstChild = layer.div.firstChild.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
@@ -117,8 +117,8 @@
         t.eq( tile.url,
              layer.getFullRequestString(tParams),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6px", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5px", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
 
         var firstChild = layer.div.firstChild.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );

tests/Layer/WMTS.html

@@ -258,6 +258,37 @@
                 t.ok( layer2.grid == null, "tiles appropriately destroyed");
                 map.destroy();
             }    
+
+            function test_getIdentifier(t) {
+                t.plan(2);
+
+                var map = new OpenLayers.Map('map');
+                var layer, identifier;
+
+                layer = new OpenLayers.Layer.WMTS({
+                    name: "Blue Marble WMTS",
+                    url: "http://example.com/wmts/",
+                    layer: "world",
+                    style: "blue_marble",
+                    matrixSet: "arcgis_online",
+                    tileSize: new OpenLayers.Size(512, 512),
+                    requestEncoding: "REST",
+                });
+                map.addLayer(layer);
+                map.setCenter(new OpenLayers.LonLat(0,0), 5);
+
+                layer.zoomOffset = 2;
+                identifier = layer.getIdentifier();
+                t.eq(identifier, 7, '[zoomOffset] getIdentifier return value is correct');
+
+                layer.serverResolutions = ['offset', 1.40625, 0.703125, 0.3515625, 0.17578125,
+                                           0.087890625, 0.0439453125];
+                identifier = layer.getIdentifier();
+                t.eq(identifier, 6, '[serverResolutions] getIdentifier return value is correct');
+
+                map.destroy();
+            }
+
         </script>
     </head>
     <body>

tests/Tile/BackBufferable.html

@@ -80,7 +80,7 @@
         tile.isLoading = false;
         map.zoomIn();
         tile.updateBackBuffer();
-        t.eq(tile.backBufferData.tile.style.width, (layer.tileSize.w*2)+"px",
+        t.eq(tile.backBufferData.tile.style.width, (layer.tileSize.w*2)+"%",
              "backBuffer frame correctly resized");
         map.removeLayer(layer);
         map.destroy();
@@ -106,9 +106,123 @@
         map.destroy();
     }
         
+    function test_updateBackBuffer_scaled_layer(t) {
+        t.plan(16);
+
+        //
+        // set up
+        //
+
+        var backBuffer;
+
+        var map = new OpenLayers.Map('map', {
+            resolutions: [32, 16, 8, 4, 2, 1]
+        });
+
+        var serverResolitions = layer.serverResolutions;
+        layer.serverResolutions = [32, 16, 8];
+
+        map.addLayer(layer);
+        map.setCenter(new OpenLayers.LonLat(0, 0), 2);
+
+        tile = new OpenLayers.Tile.Image(layer, position, bounds, null);
+        tile.backBufferMode = 2; // transition effect
+
+        // mock createBackBuffer to avoid removing the image
+        // div from the tile
+        tile.insertBackBuffer = function() {
+            return this.frame.cloneNode(false);
+        };
+        tile.removeBackBuffer = function() {
+        };
+
+        //
+        // test
+        //
+
+        tile.draw();
+        // check initial state
+        t.eq(tile.backBufferData.resolution, 8,
+             'resolution 8 is set in the back buffer data');
+
+        tile.isLoading = false;
+
+        // change resolution from 8 to 4
+        map.zoomTo(3);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer == undefined,
+            '[8->4] updateBackBuffer returns undefined');
+
+        // change resolution from 8 to 2
+        map.zoomTo(2); tile.setBackBufferData(); map.zoomTo(4);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer == undefined,
+            '[8->2] updateBackBuffer returns undefined');
+
+        // change resolution from 16 to 4
+        map.zoomTo(1); tile.setBackBufferData(); map.zoomTo(3);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer != undefined,
+             '[16->4] updateBackBuffer returns a back buffer tile');
+        t.eq(backBuffer.style.width, '512%',
+             '[16->4] back buffer width is as expected');
+        t.eq(backBuffer.style.width, '512%',
+             '[16->4] back buffer height is as expected');
+
+        // change resolution from 32 to 1
+        map.zoomTo(0); tile.setBackBufferData(); map.zoomTo(5);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer != undefined,
+             '[32->1] updateBackBuffer returns a back buffer tile');
+        t.eq(backBuffer.style.width, '1024%',
+             '[32->1] back buffer width is as expected');
+        t.eq(backBuffer.style.width, '1024%',
+             '[32->1] back buffer height is as expected');
+
+        // change resolution from 4 to 2
+        map.zoomTo(3); tile.setBackBufferData(); map.zoomTo(4);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer == undefined,
+            '[4->2] updateBackBuffer returns undefined');
+
+        // change resolution from 4 to 1
+        map.zoomTo(3); tile.setBackBufferData(); map.zoomTo(5);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer == undefined,
+            '[4->1] updateBackBuffer returns undefined');
+
+        // change resolution from 1 to 4
+        map.zoomTo(5); tile.setBackBufferData(); map.zoomTo(3);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer == undefined,
+             '[1->4] updateBackBuffer returns undefined');
+
+        // change resolution from 4 to 8
+        map.zoomTo(3); tile.setBackBufferData(); map.zoomTo(2);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer == undefined,
+             '[4->8] updateBackBuffer returns undefined');
+
+        // change resolution from 4 to 16
+        map.zoomTo(3); tile.setBackBufferData(); map.zoomTo(1);
+        backBuffer = tile.updateBackBuffer();
+        t.ok(backBuffer != undefined,
+             '[4->16] updateBackBuffer returns a back buffer tile');
+        t.eq(backBuffer.style.width, '128%',
+             '[4->16] back buffer width is as expected');
+        t.eq(backBuffer.style.width, '128%',
+             '[4->16] back buffer height is as expected');
+
+        //
+        // tear down
+        //
+
+        map.removeLayer(layer);
+        map.destroy();
+    }
   </script>
 </head>
 <body>
 <div id="map" style="height:550px;width:500px"></div>
 </body>
-</html>
+</html>

tests/Tile/Image.html

@@ -300,8 +300,8 @@
         map.destroy();
     }
     
-    function test_createBackBuffer(t) {
-        t.plan(3);
+    function test_insertBackBuffer(t) {
+        t.plan(4);
 
         var map = new OpenLayers.Map('map');
         var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
@@ -310,8 +310,9 @@
         map.setCenter(new OpenLayers.LonLat(0,0), 5);
         var tile = layer.grid[0][0];
         var img = tile.imgDiv;
-        var backBuffer = tile.createBackBuffer();
+        var backBuffer = tile.insertBackBuffer();
         t.eq(backBuffer.style.left, tile.frame.style.left, "backBuffer tile has same left style as frame");
+        t.ok(backBuffer.parentNode === layer.div, "backBuffer inserted into layer div");
         t.ok(backBuffer.firstChild === img, "image appended to backBuffer");
         t.ok(tile.imgDiv == null, "image reference removed from tile");
         map.destroy();