Changeset 3189

Timestamp:

05/26/07 15:11:05 (2 years ago)

Author:

emanuel

Message:

OL 2.4 RC5 with animated zooming and panning

Files:

• sandbox/emanuel/animatedZooming_final (copied) (copied from trunk/openlayers)
• sandbox/emanuel/animatedZooming_final/examples/controls.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/MouseDefaults.js (modified) (4 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/MouseToolbar.js (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/OverviewMap.js (modified) (11 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/PanZoom.js (modified) (2 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/PanZoomBar.js (modified) (5 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Layer.js (modified) (7 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Layer/Grid.js (modified) (4 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Layer/Image.js (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Layer/WMS.js (modified) (3 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Layer/WMS/Untiled.js (modified) (4 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Map.js (modified) (16 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Tile/Image.js (modified) (7 diffs)
• sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Util.js (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/Control/test_MouseToolbar.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/Control/test_OverviewMap.html (modified) (4 diffs)
• sandbox/emanuel/animatedZooming_final/tests/Control/test_PanZoom.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/Control/test_PanZoomBar.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/Control/test_Permalink.html (modified) (2 diffs)
• sandbox/emanuel/animatedZooming_final/tests/Control/test_Scale.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/Layer/test_Grid.html (modified) (9 diffs)
• sandbox/emanuel/animatedZooming_final/tests/Layer/test_Image.html (modified) (3 diffs)
• sandbox/emanuel/animatedZooming_final/tests/Layer/test_MapServer.html (modified) (3 diffs)
• sandbox/emanuel/animatedZooming_final/tests/Layer/test_MapServer_Untiled.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/Layer/test_WMS.html (modified) (11 diffs)
• sandbox/emanuel/animatedZooming_final/tests/Marker/test_Box.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/test_Feature.html (modified) (1 diff)
• sandbox/emanuel/animatedZooming_final/tests/test_Map.html (modified) (4 diffs)
• sandbox/emanuel/animatedZooming_final/tests/test_Marker.html (modified) (4 diffs)
• sandbox/emanuel/animatedZooming_final/tests/test_Util.html (modified) (2 diffs)

sandbox/emanuel/animatedZooming_final/examples/controls.html

@@ -15 +15 @@
-
-            map.addControl(new OpenLayers.Control.PanZoomBar());
-Toolbar
+Defaults
-            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
-            map.addControl(new OpenLayers.Control.Permalink());

sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/MouseDefaults.js

@@ -102 +102 @@
-    */
-    defaultDblClick: function (evt) {
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-
@@ -204 +215 @@
-    defaultWheelUp: function(evt) {
-        if (this.map.getZoom() <= this.map.getNumZoomLevels()) {
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-    },
@@ -214 +245 @@
-    defaultWheelDown: function(evt) {
-        if (this.map.getZoom() > 0) {
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-    },
@@ -224 +275 @@
-    zoomBoxEnd: function(evt) {
-        if (this.mouseDragStart != null) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-            this.removeZoomBox();
-
+ 
-    },
-

sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/MouseToolbar.js

@@ -124 +124 @@
-    */
-    defaultDblClick: function (evt) {
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-

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

@@ -165 +165 @@
-        this.div.appendChild(this.element);
-
-
-
-
+
+
+
+
-        // The extent rectangle can be dragged to recenter the map.
-        // If the mousedown happened elsewhere, then mousemove and mouseup
@@ -190 +191 @@
-            OpenLayers.Event.stop(e);
-        });
-        this.rectEvents.register('dblclick', this, this.rectDblClick );
-        this.mapDivEvents = new OpenLayers.Events(this, this.mapDiv);
-click', this, this.mapDiv
+dblclick', this, this.mapDivDbl
-
-        // Optionally add min/max buttons if the control will go in the
@@ -330 +330 @@
-    },
-    
+
-    /**
-    * @param {OpenLayers.Event} evt
-    */
-
-
-
-
-
-
-
-
-
-
+
-        var pxBounds = this.getRectPxBounds();
-        var pxCenter = pxBounds.getCenterPixel();
@@ -355 +347 @@
-        var newLeft = Math.max(0, (left + deltaX));
-        newLeft = Math.min(newLeft, this.ovmap.size.w - width);
-this.setRectPxBounds(
+pxBounds = 
-                                                   newTop + height,
-                                                   newLeft + width,
-)
-
+
+pxBounds
-        OpenLayers.Event.stop(evt);
-    },
@@ -407 +399 @@
-            this.createMap();
-        }
-
+
-        if(!this.isSuitableOverview()) {
-            this.updateOverview();
-        }
-
+
-        // update extent rectangle
-        this.updateRectToMap();
-
-
+
+
+
+
-    /**
-     * Determines if the overview map is suitable given the extent and
@@ -427 +421 @@
-                                Math.max(mapExtent.bottom, maxExtent.bottom),
-                                Math.min(mapExtent.right, maxExtent.right),
-        
+
-        var resRatio = this.ovmap.getResolution() / this.map.getResolution();
-        return ((resRatio > this.minRatio) &&
@@ -433 +427 @@
-                (this.ovmap.getExtent().containsBounds(testExtent)));
-    },
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        var targetRes = this.ovmap.getResolution();
-        var resRatio = targetRes / mapRes;
@@ -447 +452 @@
-        this.ovmap.setCenter(this.map.center,
-                            this.ovmap.getZoomForResolution(targetRes));
-
+bounds
-    },
-    
@@ -471 +476 @@
-        
-    /**
-
-
-
+
+
+
+
+
+
+
-        // 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.
@@ -481 +490 @@
-            }
-        }
-
+
+
+
+
-        if (pxBounds) {
-          this.setRectPxBounds(pxBounds);
@@ -490 +502 @@
-     * Updates the map extent to match the extent rectangle position and size
-     */
-
-
+
+
+
-        var lonLatBounds = this.getMapBoundsFromRectBounds(pxBounds);
-
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-    

sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Control/PanZoom.js

@@ -16 +16 @@
-
-    /** @type int */
-50
+75
-
-    /** @type Array of Button Divs */
@@ -134 +134 @@
-        switch (this.action) {
-            case "panup": 
-50
+this.slideFactor
-                break;
-            case "pandown": 
-50
+this.slideFactor
-                break;
-            case "panleft": 
-50
+this.slideFactor
-                break;
-            case "panright": 
-50
+this.slideFactor
-                break;
-            case "zoomin": 

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

@@ -181 +181 @@
-        var top = OpenLayers.Util.pagePosition(evt.object)[1];
-        var levels = Math.floor((y - top)/this.zoomStopHeight);
-
+
+
+
+
-        OpenLayers.Event.stop(evt);
-    },
@@ -194 +197 @@
-        this.map.events.register("mouseup", this, this.passEventToSlider);
-        this.mouseDragStart = evt.xy.clone();
-
+map.
-        this.div.style.cursor = "move";
+
+        // get and set some settings for zoom animation 
+        this.map.prepareZoomAnimation();
+        
-        // reset the div offsets just in case the div moved
-        this.zoombarDiv.offsets = null; 
@@ -217 +224 @@
-            }
-            this.mouseDragStart = evt.xy.clone();
+           
+            // set current slider position
+            var sliderPosition = new OpenLayers.Pixel(evt.xy.x, evt.xy.y); 
+
+            // run zoom animation -> scale tile(s)
+            this.map.runZoomAnimation(this.zoomStopHeight, sliderPosition);
+      
-            OpenLayers.Event.stop(evt);
-        }
@@ -228 +242 @@
-    zoomBarUp:function(evt) {
-        if (!OpenLayers.Event.isLeftClick(evt)) return;
-
+map.
-            this.div.style.cursor="";
-            this.map.events.unregister("mouseup", this, this.passEventToSlider);
-            this.map.events.unregister("mousemove", this, this.passEventToSlider);
-
-
+
+
+
+
+
+
+
+
-            this.moveZoomBar();
-            this.mouseDragStart = null;
@@ -242 +262 @@
-    /* 
-    * Change the location of the slider to match the current zoom level.
+    *
+    * @param {float} zoomlevel
-    */
-
-
-
+
+
+
+
+
+
+
+
-            this.zoomStopHeight + this.startTop + 1;
-        this.slider.style.top = newTop + "px";

sandbox/emanuel/animatedZooming_final/lib/OpenLayers/Layer.js

@@ -141 +141 @@
-    displayOutsideMaxExtent: false,
-    
-
+
+
+
+
+
+
+
+
-    /**
-     * @constructor
@@ -165 +172 @@
-            this.events = new OpenLayers.Events(this, this.div, 
-                                                this.EVENT_TYPES);
-
+
+
+
-    },
-    
@@ -546 +555 @@
-    getResolution: function() {
-        var zoom = this.map.getZoom();
+        if (zoom >= this.map.getNumZoomLevels())
+            zoom = this.map.getNumZoomLevels() - 1;
-        return this.resolutions[zoom];
-    },
@@ -611 +622 @@
-            if (center) {
-                var res  = this.map.getResolution();
-
-
-
+
+
+
+
-            
-                lonlat = new OpenLayers.LonLat(center.lon + delta_x * res ,
@@ -629 +641 @@
-     * @type OpenLayers.Pixel
-     */
-
+, resolution
-        var px = null; 
-        if (lonlat != null) {
-
+
+
-            var extent = this.map.getExtent();
-            px = new OpenLayers.Pixel(
@@ -667 +680 @@
-            this.opacity = opacity;
-            for(var i=0; i<this.div.childNodes.length; ++i) {
-.firstChild
+
-                OpenLayers.Util.modifyDOMElement(element, null, null, null, 
-                                                 null, null, null, opacity);
@@ -682 +695 @@
-    },
-
+
+
+
+    /********************************************************/
+    /*                                                      */
+    /*       Baselayer Functions for zooming/scaling        */
+    /*                                                      */
+    /********************************************************/
+
+    /** 
+     * Initializes zoomOut tile and sets a x-times bigger tile size.
+     *
+     * Default function; will override in subclasses,
+     * otherwise it returns false
+     * 
+     * @returns false if no zoomOutTile is set
+     * @type Boolean
+     */
+    setZoomOutTile:function() {
+        return false;
+    },
+
+    /**
+     * Initializes zoomOut tile and sets a x-times bigger tile size.
+     * 
+     * special function; shares with some baselayers; calls from subclasses
+     *
+     */
+    setZoomOutTile_share:function() {
+        if (!this.zoomOutTile) {
+            var bounds = this.map.getMaxExtent();
+            var resolution = this.resolutions[0]; 
+
+            // calculate tile bounds
+            var n = 0;
+            do {
+                resolution = resolution * Math.pow(2, n);
+                
+                var tilelon = resolution * this.map.tileSize.w;
+                var tilelat = resolution * this.map.tileSize.h;
+            
+                var tileoffsetlon = bounds.left;
+                var tileoffsetlat = bounds.bottom;
+                
+                var tileBounds = new OpenLayers.Bounds(tileoffsetlon, 
+                                                       tileoffsetlat, 
+                                                       tileoffsetlon + tilelon,
+                                                       tileoffsetlat + tilelat);
+                n++;
+            }
+            while (!tileBounds.containsBounds(bounds, false, true));
+
+            var tileSize = new OpenLayers.Size();
+            tileSize.w = this.map.zoomOutTileSizeFactor * this.map.tileSize.w;
+            tileSize.h = this.map.zoomOutTileSizeFactor * this.map.tileSize.h;
+
+            // formulate request url string
+            var url = this.getURL(tileBounds, tileSize); 
+            // default start position
+            var pos = new OpenLayers.Pixel (0,0); 
+            // default start size
+            var tilesize = new OpenLayers.Size(0,0);
+
+            this.zoomOutTile = new OpenLayers.Tile.Image(this, pos, tileBounds, 
+                                                        url, tileSize);
+
+            // draw tile -> sets imgDiv
+            this.zoomOutTile.draw();
+
+            // resize zoomOutTile
+            this.zoomOutTile.imgDiv.style.width = 0;
+            this.zoomOutTile.imgDiv.style.height = 0;
+            
+            // set zoomOut tile invisible 
+            if (this.map.baseLayer.zoomOutTile)
+                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
+        }
+    },
+ 
+    /** 
+     * Gets the current tile size of the layer.
+     *
+     * Default function; will override in subclasses,
+     * otherwise it returns false - that means: no scaling possible!
+     * 
+     * @returns null if no tile size set
+     * @type OpenLayers.Size
+     */
+    getTileSize:function() {
+        return null;
+    },
+
+
+    /** 
+     * Gets tile, which contains the center of the viewport.
+     *
+     * Default function; will override in subclasses,
+     * otherwise it returns null - that means: no scaling possible!
+     * 
+     * @returns returns null if no center tile set
+     * @type OpenLayers.Tile
+     */
+    getCenterTile:function() {
+        return null;
+    },
+
+
+    /** 
+     * Sets all tiles outside the viewport invisible. 
+     * Only for baselayers with a grid of tiles.
+     *
+     * Default function; will override in subclasses,
+     * otherwise it returns false
+     * 
+     * @returns false if baselayer has no grid
+     * @type Boolean
+     */
+    setTilesOutsideInvisible:function() {
+        return false;
+    },
+
+    /**
+     * Scales tile to the new tile size (changes size and position).
+     * If you have a grid, the tile is the center tile. Otherwise it's
+     * the only one.
+     * 
+     * @param {OpenLayers.Tile} tile
+     * @param {OpenLayers.Size} newTileSize
+     * 
+     * @returns true if tile is scaled, otherwise false
+     * @type Boolean
+     */
+    scaleTileTo:function(tile, newTileSize) {
+        //convert the center of the map in pixel
+        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+
+        //reposition and resize the tile 
+        if (tile) {
+            if ((newTileSize.w < Math.pow(2,15)) &&
+                (newTileSize.h < Math.pow(2,15)) ){
+
+                // set real start position of centerTile
+                var startPosX = (tile.position.x +
+                  parseInt(this.map.layerContainerDiv.style.left));
+                // set new left position
+                var leftOffset = newTileSize.w / tile.size.w
+                  * (centerPx.x - startPosX);
+                leftOffset = Math.round(leftOffset);
+                var newLeftPos = centerPx.x - leftOffset
+                  - parseInt(this.map.layerContainerDiv.style.left);
+                tile.imgDiv.style.left = Math.round(newLeftPos) + "px";
+
+                // set real start position of centerTile
+                var startPosY = (tile.position.y +
+                  parseInt(this.map.layerContainerDiv.style.top));
+                //set new top position
+                var topOffset = newTileSize.h / tile.size.h
+                  * (centerPx.y - startPosY);
+                topOffset = Math.round(topOffset);
+                var newTopPos = centerPx.y - topOffset 
+                  - parseInt(this.map.layerContainerDiv.style.top);
+                tile.imgDiv.style.top = Math.round(newTopPos) + "px";
+
+                //set new width and height
+                tile.imgDiv.style.width = Math.round(newTileSize.w) + "px";
+                tile.imgDiv.style.height = Math.round(newTileSize.h) + "px";
+            }
+            return true;
+        }
+        else {
+            return false;
+        }
+    }, 
+
+    /** 
+     * Scales all tiles of a grid to the new tile size 
+     * (changes size and position).
+     *
+     * Default function; will override in subclasses,
+     * otherwise it returns false
+     * 
+     * @param {OpenLayers.Tile} centerTile
+     * @param {OpenLayers.Size} newTileSize
+     *
+     * @returns false if no grid is scaled
+     * @type Boolean
+     */
+    scaleTilesOfGrid:function(centertile, newTileSize) {
+        return false;
+    },
+
+
+    /**
+     * Reposition and resize the zoomOut tile to prevent a white frame
+     * during zoomOut.
+     *
+     * @param {float} newZoomlevel
+     * @param {float} newResolution
+     *
+     * @returns false if no zoomOutTile scaled
+     * @type Boolean
+     */
+    scaleZoomOutTile: function(newZoomlevel, newResolution) {
+        return false;
+    },
+
+    /**
+     * The actual zoomOutTile scale function:
+     * Reposition and resize the zoomOut tile to prevent a white frame
+     * during zoomOut.
+     *
+     * special function; shares with some baselayers; calls from subclasses
+     *
+     * @param {float} newZoomlevel
+     * @param {float} newResolution
+     *
+     * @returns true after the zoomOutTile is scaled
+     * @type Boolean
+     */
+    scaleZoomOutTile_share: function(newZoomlevel, newResolution) {
+
+        //convert the current center of the map in pixel
+        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+
+
+        var newTileSize = new OpenLayers.Size();
+        newTileSize.w = Math.round(this.map.tileSize.w * Math.pow(2, newZoomlevel));
+        newTileSize.h = Math.round(this.map.tileSize.h * Math.pow(2, newZoomlevel));
+
+        // handles bug in ie: 
+        // turn zoomOut tile scale off, if tileSize > 2^15 
+        var ieBug;
+        if (navigator.appName == "Microsoft Internet Explorer"){ 
+            if ((newTileSize.w > Math.pow(2,15)) &&
+                (newTileSize.h > Math.pow(2,15)) ){
+                ieBug = true;
+                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
+            }
+            else {
+                ieBug = false;
+            }
+        }
+        else {
+            ieBug = false;
+        }
+
+        if (!ieBug && !this.firstCall) {
+            //set new size (width and height)
+            this.zoomOutTile.imgDiv.style.width = newTileSize.w + "px";          
+            this.zoomOutTile.imgDiv.style.height = newTileSize.h + "px";
+
+            //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();
+             
+            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 = 
+                Math.round(centerPx.x + offsetx) + "px";  
+            this.zoomOutTile.imgDiv.style.top = 
+                Math.round(centerPx.y + offsety) + "px";
+        
+            
+            this.map.baseLayer.zoomOutTile.imgDiv.style.display = "block";
+        }
+        
+        return true;
+    },
+
+    /** 
+     * Clones layerContainer for "smooth tile update".
+     * So, it gets no blank map while map is loading in new zoomlevel.
+     *
+     * Default function; will override in subclasses,
+     * otherwise it returns false
+     * 
+     * @returns false if no layerContainer cloned
+     * @type Boolean
+     */
+    cloneBaseLayerDiv:function() {
+        return false;
+    },
+
+    /** 
+     * The actual clone function:
+     * Hold scaled map while tiles are loading successive.
+     *  
+     * special function; shares with some baselayers; calls from subclasses
+     *
+     */
+    cloneBaseLayerDiv_share:function() {
+        // function for map only; not for overviewmap!
+        if (this.map.div.id == "map") {  
+            
+            // 1. clone baseLayerDiv with all childs (replace, if already exist)
+            if (this.map.baseLayerDivClone){
+                this.map.layerContainerDiv.removeChild(this.map.baseLayerDivClone);
+                this.map.baseLayerDivClone = null;
+            }
+            this.map.baseLayerDivClone = this.map.baseLayer.div.cloneNode(true);
+            this.map.baseLayerDivClone.id =
+                this.map.baseLayer.div.id + "_clone";
+                    
+    
+            // 2. append baseLayerDivClone to layerContainer
+            // (now the cloned div is above the original; it hides the original)
+            this.map.layerContainerDiv.appendChild(this.map.baseLayerDivClone);
+
+            // 3. set zIndex 
+            this.map.baseLayerDivClone.style.zIndex--; 
+                
+            // 4. set zoomOut tile (of original div) invisible 
+            if (this.map.baseLayer.zoomOutTile)
+                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
+
+            // 5. adjust left and top position 
+            // (if map is panning before, layerContainer is displaced)
+            if (this.map.layerContainerDiv.style.left != "")
+                this.map.baseLayerDivClone.style.left += 
+                    parseInt(this.map.layerContainerDiv.style.left);
+            if (this.map.layerContainerDiv.style.top != "")
+                this.map.baseLayerDivClone.style.top += 
+                    parseInt(this.map.layerContainerDiv.style.top);           
+        }
+    },