Ticket #933: transition-resize.patch

tests/list-tests.html

@@ -1 +1 @@
-<ul id="testlist">
+    <li>test_Ajax.html</li>
-    <li>test_OpenLayers.html</li>
-    <li>test_Ajax.html</li>
-    <li>test_BaseTypes.html</li>

lib/OpenLayers/Tile/Image.js

@@ -77 +77 @@
-     */
-    destroy: function() {
-        if (this.imgDiv != null)  {
-
+
+
+
+
+
-            if (this.imgDiv.parentNode == this.frame) {
-                this.frame.removeChild(this.imgDiv);
-                this.imgDiv.map = null;
@@ -117 +121 @@
-            
-        
-        return obj;
-
+    
-    
+    
-    /**
-     * Method: draw
-     * Check that a tile should be drawn, and draw it.
@@ -126 +131 @@
-     * Returns:
-     * {Boolean} Always returns true.
-     */
-
+ 
-        if (this.layer != this.layer.map.baseLayer && this.layer.reproject) {
-            this.bounds = this.getBoundsFromBaseLayer(this.position);
-        }
@@ -142 +147 @@
-            this.events.triggerEvent("loadstart");
-        }
-        
+        this.renderTile();
+        
+        return true;
+    },
+    
+    /**
+     * Method: renderTile
+     *
+     * internal function to actually initialize the image tile,
+     * position it correctly, and set its url
+     */
+    renderTile: function() {
-        if (this.imgDiv == null) {
-            this.initImgDiv();
-        }
-
-        this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
-        
-        this.url = this.layer.getURL(this.bounds);
-        // position the frame 
-        OpenLayers.Util.modifyDOMElement(this.frame, 
-                                         null, this.position, this.size);   
-
+
+
-        var imageSize = this.layer.getImageSize(); 
-        if (this.layerAlphaHack) {
-            OpenLayers.Util.modifyAlphaImageDiv(this.imgDiv,
-                    null, null, imageSize, this.url);
-        } else {
-            this.imgDiv.src = this.url;
-            OpenLayers.Util.modifyDOMElement(this.imgDiv,
-                    null, null, imageSize) ;
+            this.imgDiv.src = this.url;
-        }
-        return true;
-    },
-
-    /** 
@@ -172 +187 @@
-     */
-    clear: function() {
-        if(this.imgDiv) {
-
+
+
-            if (OpenLayers.Tile.Image.useBlankTile) { 
-                this.imgDiv.src = OpenLayers.Util.getImagesLocation() + "blank.gif";
-            }    
@@ -184 +200 @@
-     * Creates the imgDiv property on the tile.
-     */
-    initImgDiv: function() {
-        
-        var offset = this.layer.imageOffset; 
-        var size = this.layer.getImageSize(); 
-     
-        if (this.layerAlphaHack) {
-            this.imgDiv = OpenLayers.Util.createAlphaImageDiv(null,
-                                                           offset,
@@ -219 +233 @@
-        OpenLayers.Event.observe( this.imgDiv, "load",
-            OpenLayers.Function.bind(this.checkImgURL, this) );
-        */
+        this.frame.style.zIndex = this.isBackBuffer ? 0 : 1;
-        this.frame.appendChild(this.imgDiv); 
-        this.layer.div.appendChild(this.frame); 
-
@@ -231 +246 @@
-
-        // we need this reference to check back the viewRequestID
-        this.imgDiv.map = this.layer.map;
-
+
-        //bind a listener to the onload of the image div so that we 
-        // can register when a tile has finished loading.
-        var onload = function() {
-    
+
-            //normally isLoading should always be true here but there are some 
-            // right funky conditions where loading and then reloading a tile
-            // with the same url *really*fast*. this check prevents sending 
@@ -245 +260 @@
-                this.isLoading = false; 
-                this.events.triggerEvent("loadend"); 
-            }
+
-        };
-
-
+
+
+
+
+
+
+
+
+
-
-        // Bind a listener to the onerror of the image div so that we
-        // can registere when a tile has finished loading with errors.
@@ -289 +312 @@
-        if (this.layer) {
-            var loaded = this.layerAlphaHack ? this.imgDiv.firstChild.src : this.imgDiv.src;
-            if (!OpenLayers.Util.isEquivalentUrl(loaded, this.url)) {
-imgDiv.style.display = "none"
+hide()
-            }
-        }
-    },
+    
+    /**
+     * Method: startTransition
+     *
+     * This method is invoked on tiles that are backBuffers for tiles in the
+     * grid.  The grid tile is about to be cleared and a new tile source
+     * loaded.  This is where the transition effect needs to be started
+     * to provide visual continuity.
+     */
+    startTransition: function() {
+        // backBufferTile has to be valid and ready to use
+        if (!this.backBufferTile || !this.backBufferTile.imgDiv) {
+            return;
+        }
-
+        // show the backBufferTile and hide this tile
+        this.hide();
+
+        // calculate the ratio of change between the current resolution of the
+        // backBufferTile and the layer.  If several animations happen in a row,
+        // then the backBufferTile will scale itself appropriately for each
+        // request.
+        var ratio = 1;
+        if (this.backBufferTile.resolution) {
+            ratio = this.backBufferTile.resolution / this.layer.getResolution() ;
+        }
+        
+        // if the ratio is not 1 (i.e. we are zooming), then we might be 
+        // resizing the backBuffer tile ...
+        if (ratio != 1) {
+            if (this.layer.transitionEffect == 'resize') {
+                // In this case, we can just immediately resize the 
+                // backBufferTile.
+                var upperLeft = 
+                    new OpenLayers.LonLat(this.backBufferTile.bounds.left, 
+                                          this.backBufferTile.bounds.top);
+                var size = 
+                    new OpenLayers.Size(this.backBufferTile.size.w * ratio, 
+                                        this.backBufferTile.size.h * ratio);
+
+                var px = this.layer.map.getLayerPxFromLonLat(upperLeft);
+                OpenLayers.Util.modifyDOMElement(this.backBufferTile.frame, 
+                                                 null, px, size);   
+                var imageSize = this.backBufferTile.size.clone();
+                imageSize = new OpenLayers.Size(imageSize.w * ratio, 
+                                                imageSize.h * ratio);
+
+                OpenLayers.Util.modifyDOMElement(this.backBufferTile.imgDiv,
+                                                 null, null, imageSize) ;
+
+                this.backBufferTile.show();
+            }
+        } else {
+            // default effect is just to leave the existing tile
+            // until the new one loads if this is a singleTile and
+            // there was no change in resolution.  Otherwise we
+            // don't bother to show the backBufferTile at all
+            if (this.layer.singleTile && ratio == 1) {
+                this.backBufferTile.show();
+            } else {
+                this.backBufferTile.hide();
+            }
+        }
+    },
+    
+    /** 
+     * Method: show
+     *
+     * show the tile by showing its frame.
+     */
+    show: function() {
+        this.frame.style.display = '';
+    },
+    
+    /** 
+     * Method: hide
+     *
+     * hide the tile by hiding its frame.
+     */
+    hide: function() {
+        this.frame.style.display = 'none';
+    },
+    
+    /** @final @type String */
-    CLASS_NAME: "OpenLayers.Tile.Image"
-  }
-);

lib/OpenLayers/Tile.js

@@ -80 +80 @@
-     */
-    isLoading: false,
-    
+    /**
+     * Property: isBackBuffer
+     * {Boolean} Is this tile a back buffer tile?
+     */
+    isBackBuffer: false,
+    
+    /**
+     * Property: isFirstDraw
+     * {Boolean} Is this the first time the tile is being drawn?
+     * This is used to force resetBackBuffer to synchronize
+     * the backBufferTile with the foreground tile the first time
+     * the foreground tile loads so that if the user zooms
+     * before the layer has fully loaded, the backBufferTile for
+     * tiles that have been loaded can be used.
+     */
+    isFirstDraw: true,
+        
+    /**
+     * Property: backBufferTile
+     * {<OpenLayers.Tile>} A clone of the tile used to create transition effects
+     * when the tile is moved or changes resolution.
+     */
+    backBufferTile: null,
+        
-    /** TBD 3.0 -- remove 'url' from the list of parameters to the constructor.
-     *             there is no need for the base tile class to have a url.
-     * 
@@ -111 +135 @@
-     * Nullify references to prevent circular references and memory leaks.
-     */
-    destroy:function() {
+        this.layer.events.unregister("loadend", this, this.resetBackBuffer);
+        this.events.unregister('loadend', this, this.resetBackBuffer);
-        this.layer  = null;
-        this.bounds = null;
-        this.size = null;
@@ -118 +144 @@
-        
-        this.events.destroy();
-        this.events = null;
+        
+        /* clean up the backBufferTile if it exists */
+        if (this.backBufferTile) {
+            this.backBufferTile.destroy();
+            this.backBufferTile = null;
+        }
-    },
-    
+     
-    /**
-     * Method: clone
-     *
@@ -157 +190 @@
-     */
-    draw: function() {
-        
-        //clear tile's contents and mark as not drawn
-        this.clear();
-        
-        var maxExtent = this.layer.maxExtent;
-        var withinMaxExtent = (maxExtent &&
-                               this.bounds.intersectsBounds(maxExtent, false));
- 
-        // The only case where we *wouldn't* want to draw the tile is if the 
-        // tile is outside its layer's maxExtent.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-    
-    /** 
@@ -240 +304 @@
-                                       topLeft.lat);  
-        return bounds;
-    },        
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    CLASS_NAME: "OpenLayers.Tile"
-});

lib/OpenLayers/Layer.js

@@ -231 +231 @@
-     */
-    wrapDateLine: false,
-    
+    /**
+     * APIProperty: transitionEffect
+     * {String} The transition effect to use when the map is panned or
+     * zoomed.  There is currently two supported values:
+     * null - no transition effect (the default).
+     * resize - existing tiles are resized on zoom to provide a visual
+     *   effect of the zoom having taken place immediately.  As the
+     *   new tiles become available, they are drawn over top of the
+     *    resized tiles.
+     */
+    transitionEffect: null,
-    
-    /**
-     * Constructor: OpenLayers.Layer

lib/OpenLayers/Layer/Grid.js

@@ -59 +59 @@
-     */
-    numLoadingTiles: 0,
-
+     /**                                                 
+     * APIProperty: gridOrigin                              
+     * {LongLat} origin of the grid tiles for all resolution. Usefull for WMSC
+     * layers which requested tiles must be stricly aligned to the server grid
+     * If not specified : bottom left corner of the map.maxExtent
+     */                                                
+    gridOrigin: null, 
+
-    /**
-     * Constructor: OpenLayers.Layer.Grid
-     * Create a new grid layer
@@ -316 +324 @@
-        var minCols = Math.ceil(viewSize.w/this.tileSize.w) +
-                      Math.max(1, 2 * this.buffer);
-        
-
+
+
+
-        var resolution = this.map.getResolution();
-        var tilelon = resolution * this.tileSize.w;
-        var tilelat = resolution * this.tileSize.h;
-        
-extent.left
+this.gridOrigin.lon
-        var tilecol = Math.floor(offsetlon/tilelon) - this.buffer;
-        var tilecolremain = offsetlon/tilelon - tilecol;
-        var tileoffsetx = -tilecolremain * this.tileSize.w;
-extent.left
+this.gridOrigin.lon
-        
-extent.bottom
+this.gridOrigin.lat
-        var tilerow = Math.ceil(offsetlat/tilelat) + this.buffer;
-        var tilerowremain = tilerow - offsetlat/tilelat;
-        var tileoffsety = -tilerowremain * this.tileSize.h;
-extent.bottom
+this.gridOrigin.lat
-        
-        tileoffsetx = Math.round(tileoffsetx); // heaven help us
-        tileoffsety = Math.round(tileoffsety);

examples/transition.html

@@ +1 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style type="text/css">
+        #mapDiv {
+            width: 400px;
+            height: 400px;
+            border: 1px solid black;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map;
+        function init(){
+            map = new OpenLayers.Map('mapDiv', {maxResolution: 'auto'});
+
+            var single_default_effect = new OpenLayers.Layer.WMS( "WMS untiled default", 
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, 
+                { singleTile: true, isBaseLayer: true} );
+            var single_resize_effect = new OpenLayers.Layer.WMS( "WMS untiled resize", 
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, 
+                { singleTile: true, isBaseLayer: true, transitionEffect: 'resize'} );
+            var tiled_default_effect = new OpenLayers.Layer.WMS( "WMS tiled default ", 
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, 
+                { isBaseLayer: true} );
+            var tiled_resize_effect = new OpenLayers.Layer.WMS( "WMS tiled resize", 
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, 
+                { isBaseLayer: true, transitionEffect: 'resize'} );
+
+            map.addLayers([single_default_effect, single_resize_effect,
+                           tiled_default_effect, tiled_resize_effect]);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.setCenter(new OpenLayers.LonLat(6.5, 40.5), 4);
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Transition Example</h1>
+    <p id="shortdesc">
+      Demonstrates the use of transition effects in tiled and untiled layers.  There are two transitions that are currently implemented, 'default', 'resize'.  The default transition effect is used when no transition is specified and is implemented as no transition effect except for panning singleTile layers.  The 'resize' effect resamples the current tile and displays it stretched or compressed until the new tile is available.</p>  
+    <div id="mapDiv"></div>
+    <p> The first layer is an untiled WMS layer with no transition effect. </p>
+    <p> The second layer is an untiled WMS layer with a 'resize' effect. </p>
+    <p> The third layer is a tiled WMS layer with no transition effect. </p>
+    <p> The fourth layer is a tiled WMS layer with a 'resize' effect. </p>
+  </body>
+</html>