Changeset 2214

Timestamp:

02/09/07 11:01:34 (2 years ago)

Author:

emanuel

Message:

version 1.2

Files:

• sandbox/emanuel/animatedZooming (copied) (copied from trunk/openlayers)
• sandbox/emanuel/animatedZooming/demo.html (added)
• sandbox/emanuel/animatedZooming/demo_frida.html (added)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/OverviewMap.js (modified) (4 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoomBar.js (modified) (4 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/Grid.js (modified) (3 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Map.js (modified) (3 diffs)

sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/OverviewMap.js

@@ -384 +384 @@
-                (this.ovmap.getExtent().containsBounds(testExtent)));
-    },
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        var targetRes = this.ovmap.getResolution();
-        var resRatio = targetRes / mapRes;
@@ -398 +409 @@
-        this.ovmap.setCenter(this.map.center,
-                            this.ovmap.getZoomForResolution(targetRes));
-
+bounds
-    },
-    
@@ -422 +433 @@
-        
-    /**
-
-
-
+
+
+
+
+
+
+
-        // The base layer for overview map needs to be in the same projection
-        // as the base layer for the main map.  This should be made more robust.
@@ -432 +447 @@
-            }
-        }
-
+
+
+
+
-        this.setRectPxBounds(pxBounds);
-    },

sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoomBar.js

@@ -24 +24 @@
-    zoomStopHeight: 11,
-
+    /** @type int */
+    zoomlevel_startScale: null,  
+    
+    /** @type float */
+    zoomlevel_scale: null,   
+     
+    /** @type OpenLayers.Size */
+    tileSize_startScale: null, 
+    
+    /** @type OpenLayers.Size */
+    tileSize_scale: null,
+ 
+    /** @type float */
+    resolution_scale: null,
+
-    initialize: function() {
-        OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);
-        this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoomBar.X,
-                                             OpenLayers.Control.PanZoomBar.Y);
+        this.tileSize_scale = new OpenLayers.Size();
-    },
-
@@ -169 +185 @@
-        this.div.style.cursor = "move";
-        OpenLayers.Event.stop(evt);
+
+        // only for WMS layer
+        if (this.map.baseLayer.CLASS_NAME == "OpenLayers.Layer.WMS") {
+            // get current zoomlevel
+            this.zoomlevel_startScale = this.map.zoom;
+
+            // get original tile size
+            this.tileSize_startScale = this.map.getTileSize();
+
+            // find and set tile, which contains the center of the viewport
+            this.map.baseLayer.setCenterTile();       
+
+            // set zoomOutTile visible  
+            this.map.baseLayer.zoomOutTile.imgDiv.style.display = "block";
+        }
-    },
-    
@@ -188 +219 @@
-            this.mouseDragStart = evt.xy.clone();
-            OpenLayers.Event.stop(evt);
+
+            // only for WMS layer
+            if (this.map.baseLayer.CLASS_NAME == "OpenLayers.Layer.WMS") {
+
+                // convert current sliderposition to new zoomlevel
+                var deltaY_zoomlevel = this.zoomStart.y - evt.xy.y
+                this.zoomlevel_scale=this.zoomlevel_startScale + 
+                  deltaY_zoomlevel/this.zoomStopHeight;
+               
+                // check the zoomlevel validity 
+                if (this.zoomlevel_scale < 0) {
+                    this.zoomlevel_scale = 0; 
+                } 
+                if (this.zoomlevel_scale > (this.map.getNumZoomLevels()-1)) { 
+                    this.zoomlevel_scale = this.map.getNumZoomLevels() - 1; 
+                }
+                
+                // calculate the new tile size for the scale...
+                // ...zoomIn
+                if (this.zoomlevel_startScale < this.zoomlevel_scale) {
+                    this.tileSize_scale.w = 
+                      Math.pow(2,(this.zoomlevel_scale -
+                      this.zoomlevel_startScale)) * this.tileSize_startScale.w;
+                    this.tileSize_scale.h = 
+                      Math.pow(2,(this.zoomlevel_scale -
+                      this.zoomlevel_startScale)) * this.tileSize_startScale.h;
+
+                    // set new map resolution
+                    this.resolution_scale = 
+                      1/(Math.pow(2,(this.zoomlevel_scale - 
+                      this.zoomlevel_startScale))) *  this.map.getResolution();    
+                }
+                // ...zoomOut / no zoom changes
+                if (this.zoomlevel_startScale >= this.zoomlevel_scale) {             
+                    this.tileSize_scale.w =
+                      1/(Math.pow(2,(this.zoomlevel_startScale -
+                      this.zoomlevel_scale))) * this.tileSize_startScale.w;
+                    this.tileSize_scale.h =
+                      1/(Math.pow(2,(this.zoomlevel_startScale - 
+                      this.zoomlevel_scale))) * this.tileSize_startScale.h;
+
+                    // set new map resolution
+                    this.resolution_scale = 
+                      Math.pow(2,(this.zoomlevel_startScale - 
+                      this.zoomlevel_scale)) * this.map.getResolution(); 
+                }
+
+
+                // scale all tiles to the new scaled size           
+                this.map.baseLayer.scaleTileTo(this.tileSize_scale);
+                
+                // scale the zoomOut tile (to prevent a white frame during
+                // zoomOut)
+                this.map.baseLayer.scaleZoomOutTile(this.tileSize_scale,
+                                                    this.zoomlevel_scale, 
+                                                    this.resolution_scale);
+
+                // set new scaled map resolution
+                this.map.setScaleResolution(this.resolution_scale);
+            }
-        }
-    },
@@ -207 +298 @@
-            this.mouseDragStart = null;
-            OpenLayers.Event.stop(evt);
+    
+            // only for WMS layer
+            if (this.map.baseLayer.CLASS_NAME == "OpenLayers.Layer.WMS") {
+                // set zoomOutTile invisible 
+                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
+            }
-        }
-    },

sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/Grid.js

@@ -23 +23 @@
-    /** @type Integer */
-    buffer: 2,
+
+    /** @type OpenLayers.Tile */
+    centerTile: null,
+
+    /** @type Integer */
+    centerRow: null,
+
+    /** @type Integer */
+    centerCol: null,
+
+    /** @type OpenLayers.Pixel */   
+    centerTileStartScalePos: null,
+
+    /** @type OpenLayers.Tile */
+    zoomOutTile: null,
+
+    layerClone: null,
+    
-
-    /**
@@ -36 +54 @@
-                                                                arguments);
-        this.grid = new Array();
+        this.layerClone = new Array();
-    },
-
@@ -140 +159 @@
-    },
-    
+
+    /** 
+     * Finds and sets the tile, which contains the center 
+     * of the viewport.
+     *
+     */
+    setCenterTile:function() {
+        
+        //get the center of the map (viewport)
+        var center = this.map.getCenter();
+
+        //find tile, which contains the center of the viewport
+        this.centerTile = null;
+        if (this.grid) {
+            for (var iRow=0; iRow < this.grid.length; iRow++) {
+                for (var iCol=0; iCol < this.grid[iRow].length; iCol++) {
+                    var tileBounds = this.grid[iRow][iCol].bounds;
+                    if (tileBounds.containsLonLat(center, true)) {
+                        this.centerTile = this.grid[iRow][iCol];
+                        this.centerRow = iRow;
+                        this.centerCol = iCol;
+                        break; 
+                    }
+                }
+                if (this.centerTile)
+                    break;
+            }
+        }
+        
+        //define real position of the center tile before scaling
+        //(It is tricky if you pan the map before scaling. Then the
+        //layerContainerDiv is only slided and you have to add this
+        //difference to the tile position)
+        var x = parseInt(this.centerTile.imgDiv.style.left) 
+          + parseInt(this.map.layerContainerDiv.style.left);
+        var y = parseInt(this.centerTile.imgDiv.style.top)
+          + parseInt(this.map.layerContainerDiv.style.top);
+
+        this.centerTileStartScalePos = new OpenLayers.Pixel(x,y);
+
+
+        this.grid_visible = [];
+        var extent = this.map.getExtent();
+
+        // find all visible tiles of each active layers
+        for (var i = 0; i < this.map.layers.length; i++) {
+            // find only active layers
+            if (this.map.layers[i].visibility) {
+                var layerGrid = this.map.layers[i].grid;
+                
+                this.layerClone[i] = this.map.layers[i].clone();
+                // go through the whole grid of every layer
+                for (var iRow=0; iRow < layerGrid.length; iRow++) {
+                    for (var iCol=0; iCol < layerGrid[iRow].length; iCol++) { 
+                        var tile = layerGrid[iRow][iCol];
+                        if (tile.imgDiv){
+                            // if tile outside the viewport, set it
+                            // invisible 
+                            if (extent.containsBounds(tile.bounds,true, false)) {
+                                tile.imgDiv.style.display = "block";
+                            }
+                        }
+                    }
+                } 
+            }
+        }            
+
+    },
+
+
+    /**
+     * Scales all tiles of each active layer to the new tile size 
+     * (changes size and position of every tile).
+     * 
+     * @param {OpenLayers.Size} newTileSize
+     */
+    scaleTileTo:function(newTileSize) {
+        
+        //convert the current center of the map in pixel
+        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+
+        //reposition the center tile 
+        if (this.centerTile ) {
+            //set new left position
+            var leftOffset = newTileSize.w / this.centerTile.size.w
+              * ( centerPx.x -  this.centerTileStartScalePos.x);
+            leftOffset = Math.round(leftOffset);
+            var newLeftPos = centerPx.x - leftOffset
+              - parseInt(this.map.layerContainerDiv.style.left);
+            this.centerTile.imgDiv.style.left = newLeftPos + "px";
+
+            //set new top position
+            var topOffset = newTileSize.h / this.centerTile.size.h
+              * (centerPx.y - this.centerTileStartScalePos.y);
+            topOffset = Math.round(topOffset);
+            var newTopPos = centerPx.y - topOffset 
+              - parseInt(this.map.layerContainerDiv.style.top);
+            this.centerTile.imgDiv.style.top = newTopPos + "px";
+        }
+        
+        // reposition and resize all _visible_ tiles of all active layers
+        for (var i = 0; i < this.map.layers.length; i++) {
+            // find only active layers
+            if (this.map.layers[i].visibility) {
+                var layerGrid = this.map.layers[i].grid;
+
+                // go through the whole grid of every layer
+                for (var iRow=0; iRow < layerGrid.length; iRow++) {
+                    for (var iCol=0; iCol < layerGrid[iRow].length; iCol++) {                         
+                        var tile = layerGrid[iRow][iCol];
+                        if (tile.imgDiv) {
+                            if (tile.imgDiv.style.display == "block") {
+                                //define the factors for rows and columns
+                                //(relates to the center tile)
+                                var deltaRow = iRow - this.centerRow;
+                                var deltaCol = iCol - this.centerCol;
+                                
+                                //set new left position
+                                var newLeftPos = parseInt(this.centerTile.imgDiv.style.left)
+                                  + deltaCol * newTileSize.w ;
+                                tile.imgDiv.style.left = newLeftPos + "px";
+
+                                //set new top position
+                                var newTopPos = parseInt(this.centerTile.imgDiv.style.top)
+                                  + deltaRow * newTileSize.h ;
+                                tile.imgDiv.style.top = newTopPos + "px";
+
+                                //set new width and height
+                                tile.imgDiv.style.width = newTileSize.w + "px";
+                                tile.imgDiv.style.height = newTileSize.h + "px";
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    
+    /**
+     * Returns the only tile of zoomlevel 0.
+     *
+     * @returns the tile of zoomlevel 0
+     * @type OpenLayers.Tile
+     */
+    getZoomOutTile:function() {
+        var bounds = this.map.getMaxExtent();
+        var resolution = this.map.getMaxResolution();
+
+        var tilelon = resolution * this.tileSize.w;
+        var tilelat = resolution * this.tileSize.h;
+        
+        var tileoffsetlon = bounds.left;
+        var tileoffsetlat = bounds.bottom;
+        
+        var tileBounds = new OpenLayers.Bounds(tileoffsetlon, 
+                                               tileoffsetlat, 
+                                               tileoffsetlon + tilelon,
+                                               tileoffsetlat + tilelat);
+
+        this.zoomOutTile = this.addTile(tileBounds, null);
+        return this.zoomOutTile;
+    },
+
+
+    /**
+     * Initializes zoomOut tile and sets a bigger tile size.
+     *
+     */
+    setZoomOutTile:function() {
+        //get zoomOut tile
+        this.zoomOutTile = this.getZoomOutTile();
+
+        // draw tile -> sets imgDiv
+        this.zoomOutTile.draw();
+
+        // hid tile until the user drags the zoombar
+        this.zoomOutTile.imgDiv.style.width = 0;
+        this.zoomOutTile.imgDiv.style.height = 0;
+
+        // set a bigger tile size for zoomOutTile (change WMS url in imgDiv)
+        var newTileSize = new OpenLayers.Size(this.tileSize.w*4, this.tileSize.h * 4);        
+        var wmsUrl = this.zoomOutTile.imgDiv.src;
+        var sizeStr_old = "WIDTH="+this.tileSize.w+"&HEIGHT="+this.tileSize.h;
+        var sizeStr_new = "WIDTH="+newTileSize.w+"&HEIGHT="+newTileSize.h;
+
+        wmsUrl = url.replace(sizeStr_old,sizeStr_new); 
+        this.zoomOutTile.imgDiv.src = wmsUrl;
+    },
+
+
+    /**
+     * Reposition and resize the zoomOut tile to prevent a white frame
+     * during zoomOut.
+     *
+     * @param {OpenLayers.Size} newTileSize
+     * @param {float} newZoomlevel
+     * @param {float} newResolution
+     */
+    scaleZoomOutTile: function(newTileSize, newZoomlevel, newResolution) {
+
+        //convert the current center of the map in pixel
+        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+   
+        //set new size (width and height)
+        this.zoomOutTile.imgDiv.style.width = this.map.tileSize.w 
+          * Math.pow(2, newZoomlevel);
+        this.zoomOutTile.imgDiv.style.height = this.map.tileSize.h 
+          * Math.pow(2, newZoomlevel);
+
+        //set new position (top and left)
+        var bounds = this.zoomOutTile.bounds;
+        var extent = this.map.getExtent();
+        var maxExtent = this.map.getMaxExtent();
+
+        var resolution = this.map.getMaxResolution();
+        var centerLonLat = extent.getCenterLonLat();
+         
+        if( bounds.containsLonLat(centerLonLat)
+            && !(extent.equals(maxExtent))) {
+            var offsetlon = bounds.left - centerLonLat.lon;
+            var offsetlat = -bounds.top + centerLonLat.lat;
+            
+            var offsetx = offsetlon / newResolution
+              - parseInt(this.map.layerContainerDiv.style.left);
+            var offsety = offsetlat / newResolution
+              - parseInt(this.map.layerContainerDiv.style.top);
+            
+            this.zoomOutTile.imgDiv.style.left = centerPx.x + offsetx;  
+            this.zoomOutTile.imgDiv.style.top = centerPx.y + offsety;
+        }
+    },
+    
+    
-    /**
-     * @private

sandbox/emanuel/animatedZooming/lib/OpenLayers/Map.js

@@ -301 +301 @@
-                // set the first baselaye we add as the baselayer
-                this.setBaseLayer(layer);
+
+                // only for WMS layer: preload a bigger tile for zooming out
+                if (layer.CLASS_NAME == "OpenLayers.Layer.WMS") {
+                    layer.setZoomOutTile();
+                }
+              
-            } else {
-                layer.setVisibility(false);
@@ -709 +715 @@
-        }
-        
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-        var centerChanged = (this.isValidLonLat(lonlat)) && 
@@ -835 +860 @@
-    },
-
+
+    /** Sets the map resolution during zooming/scaling.
+     * 
+     * @param {float} newResolution
+     */ 
+    setScaleResolution: function (newResolution) {
+        //calculate the current bounds of the new viewport
+        var newScaleBounds = this.calculateBounds(this.getCenter(), newResolution);
+        
+        //update the overviewMap
+        for (i=0; i<this.controls.length; i++) {
+            if (this.controls[i].CLASS_NAME == "OpenLayers.Control.OverviewMap") 
+                this.controls[i].updateOverview(newResolution, newScaleBounds);
+        }          
+    },
+
+
+
-  /********************************************************/
-  /*                                                      */