Changeset 2292

Timestamp:

03/01/07 11:57:42 (2 years ago)

Author:

emanuel

Message:

animated zooming 1.4

Files:

• sandbox/emanuel/animatedZooming/demo.html (modified) (4 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control.js (modified) (1 diff)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/KeyboardDefaults.js (modified) (3 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseDefaults.js (modified) (3 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseToolbar.js (modified) (3 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoom.js (modified) (2 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoomBar.js (modified) (7 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer.js (modified) (7 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/Grid.js (modified) (1 diff)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Map.js (modified) (8 diffs)
• sandbox/emanuel/animatedZooming/lib/OpenLayers/Util.js (modified) (1 diff)

sandbox/emanuel/animatedZooming/demo.html

@@ -4 +4 @@
-        #map {
-            width: 100%;
-2
+1
-            border: 1px solid black;
-        }
@@ -10 +10 @@
-    <title>Animated Zooming Demo</title>
-    
-    <!-- this gmaps key generated for http://openlayers.org/dev/ -->
- <!--   <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>-->
-
-    <script src="./lib/OpenLayers.js"></script>
-    <script type="text/javascript">
@@ -23 +20 @@
-                map.addControl(new OpenLayers.Control.PanZoomBar());
-                map.addControl(new OpenLayers.Control.MouseToolbar());
+                map.addControl(new OpenLayers.Control.KeyboardDefaults());
-                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
-                map.addControl(new OpenLayers.Control.MousePosition());
@@ -43 +41 @@
-                new OpenLayers.Size(580, 288),
-                {maxResolution: 'auto', numZoomLevels: 5}); 
-
-
-
-
-
+
-            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
-                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",

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

@@ -71 +71 @@
-        }
-        this.moveTo(this.position);        
+
-        return this.div;
-    },

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

@@ -14 +14 @@
-
-    /** @type int */
-5
+10
-
-    /**
@@ -27 +27 @@
-     */
-    draw: function() {
+//keypress
-        OpenLayers.Event.observe(document, 
-                      'keypress', 
-
+
+
+
+
-    },
-    
@@ -38 +42 @@
-        switch(evt.keyCode) {
-            case OpenLayers.Event.KEY_LEFT:
-50
+75
-                break;
-            case OpenLayers.Event.KEY_RIGHT: 
-50
+75
-                break;
-            case OpenLayers.Event.KEY_UP:
-50
+75
-                break;
-            case OpenLayers.Event.KEY_DOWN:
-50
+75
-                break;
+            case 33: // Page Up  
+                var size = this.map.getSize();
+                this.map.pan(0, -0.75*size.h);
+                break;
+            case 34: // Page Down  
+                var size = this.map.getSize();
+                this.map.pan(0, 0.75*size.h);
+                break; 
+            case 35: // End  
+                var size = this.map.getSize();
+                this.map.pan(0.75*size.w, 0);
+                break; 
+            case 36: // Pos1  
+                var size = this.map.getSize();
+                this.map.pan(-0.75*size.w, 0);
+                break; 
-        }
+        switch(evt.charCode) { 
+            case 43: // + 
+                // get and set some settings for zoom animation 
+                this.map.prepareZoomAnimation();
+                this.map.zoomlevel_scale += 0.2;
+                // run zoom animation -> scale tile(s)
+                this.map.runZoomAnimation();
+                break; 
+            case 45: // - 
+                // get and set some settings for zoom animation 
+                this.map.prepareZoomAnimation();
+                this.map.zoomlevel_scale -= 0.2;
+                // run zoom animation -> scale tile(s)
+                this.map.runZoomAnimation();
+                break; 
+        }     
-    },
-    
+    defaultKeyUp: function (evt) {
+        switch(evt.keyCode) {
+            case 107:
+                if((this.map.zoomlevel_scale-this.map.zoomlevel_startScale) < 1)
+                {
+                    //this.map.zoomlevel_scale = Math.ceil(this.map.zoomlevel_scale);
+                    //this.map.runZoomAnimation();
+                    this.map.zoomTo(this.map.zoomlevel_startScale+1);
+                }
+                //this.map.finishZoomAnimation(Math.round(this.map.zoomlevel_scale));
+
+            case 109:
+                if((this.map.zoomlevel_scale-this.map.zoomlevel_startScale) < 1)
+                {
+                    Math.floor(this.map.zoomlevel_scale);
+                    this.map.runZoomAnimation();
+                }
+                // finish zoom animation
+                this.map.finishZoomAnimation(Math.round(this.map.zoomlevel_scale));
+                break;
+
+        }
+
+
+
+    },
+
+
-    /** @final @type String */
-    CLASS_NAME: "OpenLayers.Control.KeyboardDefaults"

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

@@ -69 +69 @@
-    */
-    defaultDblClick: function (evt) {
+        //var newCenter = this.map.getLonLatFromViewPortPx( evt.xy ); 
+        //this.map.setCenter(newCenter, this.map.zoom + 1);
+
+        // convert the (old) center of the map in pixel
+        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+        
+        // pan to new center   
+        var deltaX = evt.xy.x - centerPx.x; 
+        var deltaY = evt.xy.y - centerPx.y; 
+        // some problems if you pan AND zoom in the same time... TODO
+        this.map.pan(deltaX, deltaY,true);
+
+        // 1. jump to new center (no pan animation!)
-        var newCenter = this.map.getLonLatFromViewPortPx( evt.xy ); 
-
+
+
+
+
+
-        OpenLayers.Event.stop(evt);
-        return false;
@@ -171 +188 @@
-    defaultWheelUp: function(evt) {
-        if (this.map.getZoom() <= this.map.getNumZoomLevels()) {
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-    },
@@ -181 +218 @@
-    defaultWheelDown: function(evt) {
-        if (this.map.getZoom() > 0) {
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-    },

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

@@ -49 +49 @@
-        centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
-        this.switchModeTo("pan");
-
-
+
+
+
-
-        return this.div;
@@ -111 +112 @@
-        this.switchModeTo("pan");
-        this.performedDrag = false;
+
+        // convert the (old) center of the map in pixel
+        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+        
+        // pan to new center   
+        var deltaX = evt.xy.x - centerPx.x; 
+        var deltaY = evt.xy.y - centerPx.y; 
+        // some problems if you pan AND zoom in the same time... TODO
+        this.map.pan(deltaX, deltaY,true);
+
+        // jump to new center (no pan animation!)
-        var newCenter = this.map.getLonLatFromViewPortPx( evt.xy ); 
-
+
+
+
+
+
+
+
-        OpenLayers.Event.stop(evt);
-        return false;
@@ -240 +258 @@
-    */
-    defaultMouseMove: function (evt) {
+        // record the mouse position, used in onWheelEvent
+        this.mousePosition = evt.xy.clone();
+
-        if (this.mouseDragStart != null) {
-            switch (this.mode) {

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

@@ -16 +16 @@
-
-    /** @type int */
-5
+10
-
-    /** @type Array of Button Divs */
@@ -115 +115 @@
-        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/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 OpenLayers.Tile */
-    centerTile: null,
-    
-    /** @type float */
-    resolution_scale: null,
-
-    initialize: function() {
@@ -46 +29 @@
-        this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoomBar.X,
-                                             OpenLayers.Control.PanZoomBar.Y);
-        this.tileSize_scale = new OpenLayers.Size();
-    },
-
@@ -172 +154 @@
-        var top = OpenLayers.Util.pagePosition(evt.object)[1];
-        var levels = Math.floor((y - top)/this.zoomStopHeight);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-        // get current zoomlevel
-
+map.
-
-        // get current tile size (it's the base for scaling)
-
+map.
-      
-        // get tile, which contains the center of the viewport
-
+map.
-
-        //set all active overlays temporarily invisible
@@ -204 +171 @@
-            }
-        }        
+
+
+        this.map.zoomTo((this.map.getNumZoomLevels() -1) -  levels);
+        //this.moveZoomBar((this.map.getNumZoomLevels() -1) -  levels);
+        OpenLayers.Event.stop(evt);
+    },
+    
+    /* 
+     * @param evt
+     * event listener for clicks on the slider
+     */
+    zoomBarDown:function(evt) {
+        if (!OpenLayers.Event.isLeftClick(evt)) return;
+        this.map.events.register("mousemove", this, this.passEventToSlider);
+        this.map.events.register("mouseup", this, this.passEventToSlider);
+        this.mouseDragStart = evt.xy.clone();
+        this.map.zoomStart = evt.xy.clone();
+        this.div.style.cursor = "move";
+       
+        // get and set some settings for zoom animation 
+        this.map.prepareZoomAnimation();
-        
-        OpenLayers.Event.stop(evt);
@@ -224 +212 @@
-            }
-            this.mouseDragStart = evt.xy.clone();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-            OpenLayers.Event.stop(evt);
-        }
@@ -264 +230 @@
-    zoomBarUp:function(evt) {
-        if (!OpenLayers.Event.isLeftClick(evt)) return;
-
+map.
-            this.div.style.cursor="default";
-            this.map.events.unregister("mouseup", this, this.passEventToSlider);
-            this.map.events.unregister("mousemove", this, this.passEventToSlider);
-
-
-
-
-
+
+
-            // zoom map to new zoomlevel
-
+
+
+
+
+
-            this.moveZoomBar();
-            this.mouseDragStart = null;
@@ -282 +249 @@
-    
-    
-    /**
-     * Calculates new zoomlevel of current zoomslider position.
-     *
-     */
-    calculateNewZoomlevel:function(evt) {
-        // 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 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; 
-        }
-    },
-
-
-    /**
-     * Calculates new tile size and map resolution of current zoomlevel.
-     *
-     */
-    calculateNewTileSize:function() {
-        // calculate new tile size for...
-        // ...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(); 
-        }
-    },
-
-
-    /* 
-    * 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";
-    },    
-
+
+
-    CLASS_NAME: "OpenLayers.Control.PanZoomBar"
-});

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

@@ -529 +529 @@
-            var center = this.map.getCenter();
-            var res  = this.map.getResolution();
-
-(size.w / 2
-(size.h / 2
+    
+Math.ceil((size.w / 2)
+Math.ceil((size.h / 2)
-            
-            lonlat = new OpenLayers.LonLat(center.lon + delta_x * res ,
@@ -546 +546 @@
-     * @type OpenLayers.Pixel
-     */
-
+, resolution
-        var px = null; 
-        if (lonlat != null) {
-
+
+
-            var extent = this.map.getExtent();
-            px = new OpenLayers.Pixel(
@@ -700 +701 @@
-        // (now the cloned div is above the original; it hides the original)
-        this.map.viewPortDiv.appendChild(this.map.layerContainerDivClone);
+        
+        this.map.layerContainerDiv.style.display= "none";
+
-    },
-
@@ -713 +717 @@
-        // function for map only; not for overviewmap!
-        if (this.map.div.id == "map") {        
-            // set cloned layerDiv invisibile -> original div is visible               
-            if (this.map.layerContainerDivClone){
-                this.map.layerContainerDivClone.style.display= "none";
-            }
-
-            // set zoomOutTile invisible
-            if (this.map.baseLayer.zoomOutTile){
-                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
-            }
+            // set cloned layerDiv invisibile -> original div is visible               
+            if (this.map.layerContainerDivClone){
+                this.map.layerContainerDivClone.style.display= "none";
+                this.map.layerContainerDiv.style.display= "block";
+
+            }
+
+
-        }
-    },
@@ -750 +757 @@
-     */
-    scaleTileTo:function(tile, newTileSize) {
-        
-        //convert the center of the map in pixel
-        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
@@ -855 +861 @@
-        var centerLonLat = extent.getCenterLonLat();
-         
-
-
+/*
+*/
-            var offsetlon = bounds.left - centerLonLat.lon;
-            var offsetlat = -bounds.top + centerLonLat.lat;
@@ -869 +875 @@
-            
-            // set zoomOutTile visible if viewport < map bounds
-
+
+
-                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "block";
-
+/*
-                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
-
+
-        
-        return true;

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

@@ -547 +547 @@
-    /** 
-     * Gets tile, which contains the center of the viewport.
- 
+
-     * @returns the tile, which contains the center of the viewport
-     * @type OpenLayers.Tile
-     */
-    getCenterTile:function() {
+        var center = this.map.getCenter();
+
-        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;
-this.map.getCenter()
+center
-                        this.centerRow = iRow;
-                        this.centerCol = iCol;

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

@@ -131 +131 @@
-    theme: null,
-
+
+    //ANIMATION
+    
+    /** @type Boolean */
+    animated: true,
+
+    /** steps in the slide
+     * 
+     * @type int */
+    slideSteps: 7,  
+    
+    /** millisecondss between each step
+     * 
+     * @type int */
+    slideWait: 0,
+
+    /** power used to calculate width of slide steps
+     * 
+     * @type float*/
+    slidePower: 0.7,
+
+    /** @type int */
+    animatedPanningIntervalID: null,
+
+    /** @type int */
+    animatedZoomingIntervalID: null,
+
+
+    /** @type boolean */
+    zoomanimationActive: false,
+
-    /** @type int */
-    zoomOutTileSizeFactor: 4,
+
+    /** @type int */
+    zoomlevel_startScale: null,  
+    
+    /** @type float */
+    zoomlevel_scale: null,   
+     
+    /** @type OpenLayers.Size */
+    tileSize_startScale: null, 
+    
+    /** @type OpenLayers.Size */
+    tileSize_scale: null,
+ 
+    /** @type OpenLayers.Tile */
+    centerTile: null,
+    
+    /** @type float */
+    resolution_scale: null,
-
-    /**
@@ -212 +261 @@
-                      'unload', 
-                      this.destroy.bindAsEventListener(this));
+
+        this.tileSize_scale = new OpenLayers.Size();
-    },
-
@@ -711 +762 @@
-        return this.zoom;
-    },
-
+
-    /** Allows user to pan by a value of screen pixels
-     * 
-     * @param {int} dx
-     * @param {int} dy
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-    /**
@@ -840 +904 @@
-    },
-
+    /** Position changer with Memory by www.hesido.com
+     *  modified by dncpax for OpenLayers
+     * 
+     * @param {int} slideX
+     * @param {int} slideY
+     * @param {int} totalSteps
+     * @param {int} intervals
+     * @param {float} power 
+     */
+    panSlide: function( slideX, slideY, totalSteps, interval, power) {
+        if (this.animatedPanningIntervalID) {
+            window.clearInterval(this.animatedPanningIntervalID);
+            this.animatedPanningIntervalID = null;
+        }
+        var context = {
+            'map': this,
+            'slideX': slideX,
+            'slideY': slideY,
+            'totalSteps': totalSteps,
+            'step': 0,
+            'power': power
+        };
+        var move = function() {
+            var dx = OpenLayers.Util.easeInOut(this.slideX, 
+                                                this.totalSteps, 
+                                                this.step, 
+                                                this.power);
+            var dy = OpenLayers.Util.easeInOut(this.slideY,
+                                                this.totalSteps, 
+                                                this.step, 
+                                                this.power);
+            this.map.pan(dx, dy, false);
+            this.step++;
+            if (this.step > this.totalSteps) {
+                window.clearInterval(this.map.animatedPanningIntervalID);
+                this.map.animatedPanningIntervalID = null;
+            }
+        };
+
+        this.animatedPanningIntervalID = 
+            window.setInterval(move.bindAsEventListener(context), 
+                               interval);
+    },
+
+    /** Position changer with Memory by www.hesido.com
+     *  modified by dncpax for OpenLayers
+     * 
+     * @param {int} slideZoom
+     * @param {int} totalSteps
+     * @param {int} intervals
+     * @param {float} power 
+     */
+    zoomSlide: function( slideZoom, totalSteps, interval, power) {
+        if (this.animatedZoomingIntervalID) {
+            window.clearInterval(this.animatedZoomingIntervalID);
+            this.animatedZoomingIntervalID = null;
+        }
+        var context = {
+            'map': this,
+            'slideZoom': slideZoom,
+            'totalSteps': totalSteps,
+            'step': 0,
+            'power': power
+        };
+        var move = function() {
+            var delta = this.slideZoom - this.map.zoom;
+            var dZoom = OpenLayers.Util.easeInOutZoom(delta, 
+                                                this.totalSteps, 
+                                                this.step, 
+                                                this.power);
+
+            this.map.zoomTo(this.map.zoom + dZoom, false, this.step);
+            this.step++;
+            if (this.step > this.totalSteps) {
+                window.clearInterval(this.map.animatedZoomingIntervalID);
+                this.map.animatedZoomingIntervalID = null;
+            }
+        };
+
+        this.animatedZoomingIntervalID = 
+            window.setInterval(move.bindAsEventListener(context), 
+                               interval);
+    },
+
-    /**
-     * @private 
@@ -1044 +1192 @@
-    /** Zoom to a specific zoom level
-     * 
+     * @param {float} zoom
+     * @param {Boolean} animated 
+     * @param {int} step
+     * 
+     */
+    zoomTo: function(zoom, animated, step) {
+        if (this.isValidZoomLevel(zoom)) {
+            if (animated == null) { 
+                animated = this.animated; 
+            } 
+
+            if (animated) {
+                this.zoomSlide(zoom, 
+                              this.slideSteps, 
+                              this.slideWait, 
+                              this.slidePower);
+                
+                // prepare zoom animation
+                this.prepareZoomAnimation();
+            } else {
+                
+                if (step <= this.slideSteps ) {
+
+                    // set new zoomlevel from zoomSlide function
+                    this.zoomlevel_scale = zoom;
+
+                    // run zoom animation -> scale tile(s)