[OpenLayers-Commits] r2292 - in sandbox/emanuel/animatedZooming: . lib/OpenLayers lib/OpenLayers/Control lib/OpenLayers/Layer
commits at openlayers.org
commits at openlayers.org
Thu Mar 1 11:57:43 EST 2007
Author: emanuel
Date: 2007-03-01 11:57:42 -0500 (Thu, 01 Mar 2007)
New Revision: 2292
Modified:
sandbox/emanuel/animatedZooming/demo.html
sandbox/emanuel/animatedZooming/lib/OpenLayers/Control.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/KeyboardDefaults.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseDefaults.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseToolbar.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoom.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoomBar.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/Grid.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Map.js
sandbox/emanuel/animatedZooming/lib/OpenLayers/Util.js
Log:
animated zooming 1.4
Modified: sandbox/emanuel/animatedZooming/demo.html
===================================================================
--- sandbox/emanuel/animatedZooming/demo.html 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/demo.html 2007-03-01 16:57:42 UTC (rev 2292)
@@ -3,15 +3,12 @@
<style type="text/css">
#map {
width: 100%;
- height: 512px;
+ height: 511px;
border: 1px solid black;
}
</style>
<title>Animated Zooming Demo</title>
- <!-- this gmaps key generated for http://openlayers.org/dev/ -->
- <!-- <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>-->
-
<script src="./lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
@@ -22,6 +19,7 @@
tileSize: new OpenLayers.Size(256,256)});
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());
map.addControl(new OpenLayers.Control.OverviewMap());
@@ -42,11 +40,7 @@
new OpenLayers.Bounds(-180, -90, 180, 90),
new OpenLayers.Size(580, 288),
{maxResolution: 'auto', numZoomLevels: 5});
- /*
- var satellite_google = new OpenLayers.Layer.Google(
- "Google Satellite",
- {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );*/
-
+
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/KeyboardDefaults.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/KeyboardDefaults.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/KeyboardDefaults.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -13,7 +13,7 @@
OpenLayers.Class.inherit( OpenLayers.Control, {
/** @type int */
- slideFactor: 50,
+ slideFactor: 100,
/**
* @constructor
@@ -26,9 +26,13 @@
*
*/
draw: function() {
+//keypress
OpenLayers.Event.observe(document,
'keypress',
- this.defaultKeyDown.bind(this));
+ this.defaultKeyDown.bindAsEventListener(this));
+ OpenLayers.Event.observe(document,
+ 'keyup',
+ this.defaultKeyUp.bindAsEventListener(this));
},
/**
@@ -37,20 +41,80 @@
defaultKeyDown: function (evt) {
switch(evt.keyCode) {
case OpenLayers.Event.KEY_LEFT:
- this.map.pan(-50, 0);
+ this.map.pan(-75, 0);
break;
case OpenLayers.Event.KEY_RIGHT:
- this.map.pan(50, 0);
+ this.map.pan(75, 0);
break;
case OpenLayers.Event.KEY_UP:
- this.map.pan(0, -50);
+ this.map.pan(0, -75);
break;
case OpenLayers.Event.KEY_DOWN:
- this.map.pan(0, 50);
+ this.map.pan(0, 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"
});
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseDefaults.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseDefaults.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseDefaults.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -68,8 +68,25 @@
* @param {Event} evt
*/
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 );
- this.map.setCenter(newCenter, this.map.zoom + 1);
+ //this.map.setCenter(newCenter, this.map.zoom);
+
+ // 2. zoom to new level
+ this.map.zoomIn();
+
OpenLayers.Event.stop(evt);
return false;
},
@@ -170,8 +187,28 @@
*/
defaultWheelUp: function(evt) {
if (this.map.getZoom() <= this.map.getNumZoomLevels()) {
- this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
- this.map.getZoom() + 1);
+ if (!this.map.zoomanimationActive) {
+ // convert the current center of the map in pixel
+ var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+
+ // determine lonlat from target (mouse position)
+ var targetLonLat = this.map.getLonLatFromViewPortPx( evt.xy );
+
+ // determine offset target-center in pixel
+ var offset = new OpenLayers.Pixel();
+ offset.x = evt.xy.x - centerPx.x;
+ offset.y = evt.xy.y - centerPx.y;
+
+ // convert offset of zoomlevel n to zoomlevel n+1
+ offset.x = offset.x / 2;
+ offset.y = offset.y / 2;
+
+ // pan to new center
+ this.map.pan(offset.x, offset.y, true);
+
+ // zoom to new level
+ this.map.zoomIn();
+ }
}
},
@@ -180,8 +217,28 @@
*/
defaultWheelDown: function(evt) {
if (this.map.getZoom() > 0) {
- this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
- this.map.getZoom() - 1);
+ if (!this.map.zoomanimationActive) {
+ // convert the current center of the map in pixel
+ var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
+
+ // determine lonlat from target (mouse position)
+ var targetLonLat = this.map.getLonLatFromViewPortPx( evt.xy );
+
+ // determine offset target-center in pixel...
+ var offset = new OpenLayers.Pixel();
+ offset.x = evt.xy.x - centerPx.x;
+ offset.y = evt.xy.y - centerPx.y;
+
+ // convert offset of zoomlevel n to zoomlevel n-1
+ offset.x = -offset.x;
+ offset.y = -offset.y;
+
+ // pan to new center
+ this.map.pan(offset.x, offset.y, true);
+
+ // zoom to new level
+ this.map.zoomOut();
+ }
}
},
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseToolbar.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseToolbar.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/MouseToolbar.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -48,9 +48,10 @@
this._addButton("pan", "panning-hand-off.png", "panning-hand-on.png", centered, sz, "Drag the map to pan.");
centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
this.switchModeTo("pan");
+
+ // already registered in MouseDefaults
+ //this.registerWheelEvents();
- this.registerWheelEvents();
-
return this.div;
},
@@ -110,8 +111,25 @@
defaultDblClick: function (evt) {
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 );
- this.map.setCenter(newCenter, this.map.zoom + 1);
+ //this.map.setCenter(newCenter, this.map.zoom);
+
+ // get tile below mouseposition
+ var targetTile = evt.target;
+ // 2. zoom to new level
+ this.map.zoomIn(targetTile);
+
OpenLayers.Event.stop(evt);
return false;
},
@@ -239,6 +257,9 @@
* @param {Event} evt
*/
defaultMouseMove: function (evt) {
+ // record the mouse position, used in onWheelEvent
+ this.mousePosition = evt.xy.clone();
+
if (this.mouseDragStart != null) {
switch (this.mode) {
case "zoombox":
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoom.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoom.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoom.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -15,7 +15,7 @@
OpenLayers.Class.inherit( OpenLayers.Control, {
/** @type int */
- slideFactor: 50,
+ slideFactor: 100,
/** @type Array of Button Divs */
buttons: null,
@@ -114,16 +114,16 @@
switch (this.action) {
case "panup":
- this.map.pan(0, -50);
+ this.map.pan(0, -this.slideFactor);
break;
case "pandown":
- this.map.pan(0, 50);
+ this.map.pan(0, this.slideFactor);
break;
case "panleft":
- this.map.pan(-50, 0);
+ this.map.pan(-this.slideFactor, 0);
break;
case "panright":
- this.map.pan(50, 0);
+ this.map.pan(this.slideFactor, 0);
break;
case "zoomin":
this.map.zoomIn();
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoomBar.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoomBar.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Control/PanZoomBar.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -23,29 +23,11 @@
/** @type int */
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() {
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();
},
/**
@@ -171,7 +153,27 @@
var y = evt.xy.y;
var top = OpenLayers.Util.pagePosition(evt.object)[1];
var levels = Math.floor((y - top)/this.zoomStopHeight);
+
+ // get current zoomlevel
+ this.map.zoomlevel_startScale = this.map.zoom;
+
+ // get current tile size (it's the base for scaling)
+ this.map.tileSize_startScale = this.map.baseLayer.getTileSize();
+
+ // get tile, which contains the center of the viewport
+ this.map.centerTile = this.map.baseLayer.getCenterTile();
+
+ //set all active overlays temporarily invisible
+ for (var i = 0; i < this.map.layers.length; i++) {
+ var layer = this.map.layers[i];
+ if (!layer.isBaseLayer) {
+ this.map.layers[i].div.style.display = "none";
+ }
+ }
+
+
this.map.zoomTo((this.map.getNumZoomLevels() -1) - levels);
+ //this.moveZoomBar((this.map.getNumZoomLevels() -1) - levels);
OpenLayers.Event.stop(evt);
},
@@ -184,26 +186,12 @@
this.map.events.register("mousemove", this, this.passEventToSlider);
this.map.events.register("mouseup", this, this.passEventToSlider);
this.mouseDragStart = evt.xy.clone();
- this.zoomStart = 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();
- // get current zoomlevel
- this.zoomlevel_startScale = this.map.zoom;
-
- // get current tile size (it's the base for scaling)
- this.tileSize_startScale = this.map.baseLayer.getTileSize();
-
- // get tile, which contains the center of the viewport
- this.centerTile = this.map.baseLayer.getCenterTile();
-
- //set all active overlays temporarily invisible
- for (var i = 0; i < this.map.layers.length; i++) {
- var layer = this.map.layers[i];
- if (!layer.isBaseLayer) {
- this.map.layers[i].div.style.display = "none";
- }
- }
-
OpenLayers.Event.stop(evt);
},
@@ -223,35 +211,13 @@
this.slider.style.top = newTop+"px";
}
this.mouseDragStart = evt.xy.clone();
-
-
- // scale baselayer if tileSize and centerTile is set
- if ( this.tileSize_startScale && this.centerTile ) {
+
+ // set current slider position
+ var sliderPosition = new OpenLayers.Pixel(evt.xy.x, evt.xy.y);
- // determine zoomlevel
- this.calculateNewZoomlevel(evt);
-
- // determine tile size and map resolution
- this.calculateNewTileSize();
-
- // scale (center) tile to new scaled size
- this.map.baseLayer.scaleTileTo(this.centerTile,
- this.tileSize_scale);
-
- // scale all tiles to new scaled size (if there
- // are more than one tile)
- this.map.baseLayer.scaleTilesOfGrid(this.centerTile,
- this.tileSize_scale);
-
- // scale 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 (important for overviewmap)
- this.map.setScaleResolution(this.resolution_scale);
- }
-
+ // run zoom animation -> scale tile(s)
+ this.map.runZoomAnimation(this.zoomStopHeight, sliderPosition);
+
OpenLayers.Event.stop(evt);
}
},
@@ -263,17 +229,18 @@
*/
zoomBarUp:function(evt) {
if (!OpenLayers.Event.isLeftClick(evt)) return;
- if (this.zoomStart) {
+ if (this.map.zoomStart) {
this.div.style.cursor="default";
this.map.events.unregister("mouseup", this, this.passEventToSlider);
this.map.events.unregister("mousemove", this, this.passEventToSlider);
- var deltaY = this.zoomStart.y - evt.xy.y
-
- // clone layerContainer for "smooth tile update" without blank map
- this.map.baseLayer.cloneLayerContainer();
-
+ var deltaY = this.map.zoomStart.y - evt.xy.y
+
// zoom map to new zoomlevel
- this.map.zoomTo(this.map.zoom + Math.round(deltaY/this.zoomStopHeight));
+ var finalZoomlevel = this.map.zoom + Math.round(deltaY/this.zoomStopHeight);
+
+ // finish zoom animation
+ this.map.finishZoomAnimation(finalZoomlevel);
+
this.moveZoomBar();
this.mouseDragStart = null;
OpenLayers.Event.stop(evt);
@@ -281,66 +248,25 @@
},
- /**
- * 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
*/
- moveZoomBar:function() {
- var newTop =
- ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) *
+ moveZoomBar:function(zoomlevel) {
+ // check if zoomlevel is not a number
+ if (isNaN(zoomlevel)) {
+ zoomlevel = this.map.getZoom();
+ }
+
+ // set new top position
+ var newTop = ((this.map.getNumZoomLevels()-1) - zoomlevel) *
this.zoomStopHeight + this.startTop + 1;
this.slider.style.top = newTop + "px";
},
-
+
+
CLASS_NAME: "OpenLayers.Control.PanZoomBar"
});
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Control.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Control.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Control.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -70,6 +70,7 @@
this.position = px.clone();
}
this.moveTo(this.position);
+
return this.div;
},
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/Grid.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/Grid.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/Grid.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -546,16 +546,18 @@
/**
* 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;
- if (tileBounds.containsLonLat(this.map.getCenter(), true)) {
+ if (tileBounds.containsLonLat(center, true)) {
this.centerRow = iRow;
this.centerCol = iCol;
return this.grid[iRow][iCol];
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -528,10 +528,10 @@
var size = this.map.getSize();
var center = this.map.getCenter();
var res = this.map.getResolution();
-
- var delta_x = viewPortPx.x - (size.w / 2);
- var delta_y = viewPortPx.y - (size.h / 2);
+ var delta_x = viewPortPx.x - Math.ceil((size.w / 2));
+ var delta_y = viewPortPx.y - Math.ceil((size.h / 2));
+
lonlat = new OpenLayers.LonLat(center.lon + delta_x * res ,
center.lat - delta_y * res);
}
@@ -545,10 +545,11 @@
* translated into view port pixels
* @type OpenLayers.Pixel
*/
- getViewPortPxFromLonLat: function (lonlat) {
+ getViewPortPxFromLonLat: function (lonlat, resolution) {
var px = null;
if (lonlat != null) {
- var resolution = this.map.getResolution();
+ if (!resolution)
+ resolution = this.map.getResolution();
var extent = this.map.getExtent();
px = new OpenLayers.Pixel(
Math.round(1/resolution * (lonlat.lon - extent.left)),
@@ -699,6 +700,9 @@
// 2. append layerContainerDivClone to viewPortDiv
// (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";
+
},
@@ -712,15 +716,18 @@
setLoadendVisibility: function() {
// function for map only; not for overviewmap!
if (this.map.div.id == "map") {
+ // 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";
+
}
- // set zoomOutTile invisible
- if (this.map.baseLayer.zoomOutTile){
- this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
- }
+
}
},
@@ -749,7 +756,6 @@
* @type Boolean
*/
scaleTileTo:function(tile, newTileSize) {
-
//convert the center of the map in pixel
var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
@@ -854,8 +860,8 @@
var resolution = this.map.getMaxResolution();
var centerLonLat = extent.getCenterLonLat();
- if( bounds.containsLonLat(centerLonLat)
- && !(extent.equals(maxExtent))) {
+ /* if( bounds.containsLonLat(centerLonLat)
+ && !(extent.equals(maxExtent))) {*/
var offsetlon = bounds.left - centerLonLat.lon;
var offsetlat = -bounds.top + centerLonLat.lat;
@@ -868,11 +874,12 @@
this.zoomOutTile.imgDiv.style.top = centerPx.y + offsety + "px";
// set zoomOutTile visible if viewport < map bounds
- if ( (bounds.left < extent.left) || (bounds.right > extent.right) )
+ /* if ( (bounds.left < extent.left) || (bounds.right >
+ * extent.right) )*/
this.map.baseLayer.zoomOutTile.imgDiv.style.display = "block";
- else
+/* else
this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none";
- }
+// }*/
return true;
},
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Map.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Map.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Map.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -130,9 +130,58 @@
/** @type string */
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,
+
/**
* @constructor
*
@@ -211,6 +260,8 @@
OpenLayers.Event.observe(window,
'unload',
this.destroy.bindAsEventListener(this));
+
+ this.tileSize_scale = new OpenLayers.Size();
},
/**
@@ -710,28 +761,41 @@
getZoom: function () {
return this.zoom;
},
-
+
/** Allows user to pan by a value of screen pixels
*
* @param {int} dx
* @param {int} dy
+ * @param {Boolean} animated
*/
- pan: function(dx, dy) {
+ pan: function(dx, dy, animated) {
- // getCenter
- var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
+ if (animated == null) {
+ animated = this.animated;
+ }
+
+ if (animated) {
+ this.panSlide(dx, dy,
+ this.slideSteps,
+ this.slideWait,
+ this.slidePower);
+ } else {
- // adjust
- var newCenterPx = centerPx.add(dx, dy);
-
- // only call setCenter if there has been a change
- if (!newCenterPx.equals(centerPx)) {
- var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
- this.setCenter(newCenterLonLat);
+ // getCenter
+ var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
+
+ // adjust
+ var newCenterPx = centerPx.add(dx, dy);
+
+ // only call setCenter if there has been a change
+ if (!newCenterPx.equals(centerPx)) {
+ var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
+ this.setCenter(newCenterLonLat, null, null, this.animated);
+ }
}
+ },
+
- },
-
/**
* @param {OpenLayers.LonLat} lonlat
* @param {int} zoom
@@ -839,6 +903,90 @@
}
},
+ /** 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
*
@@ -1043,26 +1191,67 @@
/** Zoom to a specific zoom level
*
- * @param {int} zoom
+ * @param {float} zoom
+ * @param {Boolean} animated
+ * @param {int} step
+ *
*/
- zoomTo: function(zoom) {
+ zoomTo: function(zoom, animated, step) {
if (this.isValidZoomLevel(zoom)) {
- this.setCenter(null, 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)
+ this.runZoomAnimation(null,null);
+ }
+
+ // finish scaling -> redraw map in new zoomlevel
+ // or no animation set
+ if ( (step == this.slideSteps)
+ || ((step == null)&&(!animated)) ){
+
+ this.finishZoomAnimation(zoom);
+ }
+ }
}
},
/**
* @param {int} zoom
*/
- zoomIn: function() {
- this.zoomTo(this.getZoom() + 1);
+ zoomIn: function(animated) {
+ if (animated==null)
+ animated = true;
+
+ if (!this.zoomanimationActive)
+ this.zoomTo(this.getZoom() + 1,animated, null);
},
/**
* @param {int} zoom
*/
- zoomOut: function() {
- this.zoomTo(this.getZoom() - 1);
+ zoomOut: function(animated) {
+ if (animated==null)
+ animated = true;
+
+ if (!this.zoomanimationActive)
+ this.zoomTo(this.getZoom() - 1,animated, null);
},
/** Zoom to the passed in bounds, recenter
@@ -1070,8 +1259,14 @@
* @param {OpenLayers.Bounds} bounds
*/
zoomToExtent: function(bounds) {
- this.setCenter(bounds.getCenterLonLat(),
- this.getZoomForExtent(bounds));
+ // recenter map to new center of bounds (in OLD zoom level)
+ this.setCenter(bounds.getCenterLonLat(), this.getZoom());
+
+ // determine new zoomlevel
+ var newZoomlevel = this.getZoomForExtent(bounds);
+
+ // zoom to new zoomlevel
+ this.zoomTo(newZoomlevel);
},
/** Zoom to the full extent and recenter.
@@ -1099,6 +1294,156 @@
this.zoomToExtent(extent);
},
+
+ /**
+ * get and set some settings for zoom animation
+ *
+ *
+ */
+ prepareZoomAnimation:function() {
+ // begin zoom animation -> set flag
+ this.zoomanimationActive = true;
+
+ // get current zoomlevel
+ this.zoomlevel_startScale = this.zoom;
+
+ // get current tile size (it's the base for scaling)
+ this.tileSize_startScale = this.baseLayer.getTileSize();
+
+ // get tile, which contains the center of the viewport
+ this.centerTile = this.baseLayer.getCenterTile();
+
+ //set all active overlays temporarily invisible
+ for (var i = 0; i < this.layers.length; i++) {
+ var layer = this.layers[i];
+ if (!layer.isBaseLayer) {
+ this.layers[i].div.style.display = "none";
+ }
+ }
+ },
+
+ /**
+ * run zoom animation -> scale tile(s)
+ *
+ * @param {int} zoomStopHeight
+ * @param {OpenLayers.Pixel} sliderPosition
+ */
+ runZoomAnimation:function(zoomStopHeight, sliderPosition) {
+ // scale baselayer if tileSize and centerTile is set
+ if ( this.tileSize_startScale && this.centerTile ) {
+
+ // determine zoomlevel (only if slider used ->zoomStopHeight exists)
+ if (zoomStopHeight && sliderPosition )
+ this.calculateNewZoomlevel(zoomStopHeight,sliderPosition);
+
+ // determine tile size and map resolution
+ this.calculateNewTileSize();
+
+ // get tile, which contains the center of the viewport again
+ // (it's necessary for synchronous animated panning and zooming)
+ if (!zoomStopHeight)
+ this.centerTile = this.baseLayer.getCenterTile();
+
+ // scale (center) tile to new scaled size
+ this.baseLayer.scaleTileTo(this.centerTile,
+ this.tileSize_scale);
+
+ // scale all tiles to new scaled size (if there
+ // are more than one tile)
+ this.baseLayer.scaleTilesOfGrid(this.centerTile,
+ this.tileSize_scale);
+
+ // scale zoomOut tile (to prevent a white frame during zoomOut)
+ this.baseLayer.scaleZoomOutTile(this.tileSize_scale,
+ this.zoomlevel_scale,
+ this.resolution_scale);
+
+ // set new scaled map resolution (important for overviewmap)
+ this.setScaleResolution(this.resolution_scale);
+
+ // update zoom slider position (only if slider NOT used ->
+ // zoomStopHeight not exisits)
+ if (!zoomStopHeight){
+ for (i=0; i<this.controls.length; i++) {
+ if (this.controls[i].CLASS_NAME == "OpenLayers.Control.PanZoomBar")
+ this.controls[i].moveZoomBar(this.zoomlevel_scale);
+ }
+ }
+ }
+ },
+
+ /**
+ * finish zoom animation
+ *
+ * @param {int} finalZoomlevel
+ */
+ finishZoomAnimation:function(finalZoomlevel) {
+ // clone layerContainer for "smooth tile update" without blank map
+ this.baseLayer.cloneLayerContainer();
+
+ // zooom to final zoomlevel
+ if (this.isValidZoomLevel(finalZoomlevel))
+ this.setCenter(null, finalZoomlevel);
+
+ // end zoom animation -> set flag
+ this.zoomanimationActive = false;
+ },
+
+
+ /**
+ * Calculates new zoomlevel of current zoomslider position.
+ *
+ * @param {int} zoomStopHeight
+ * @param {OpenLayers.Pixel} sliderPosition
+ */
+ calculateNewZoomlevel:function(zoomStopHeight, sliderPosition) {
+ // convert current sliderposition to new zoomlevel
+ var deltaY_zoomlevel = this.zoomStart.y - sliderPosition.y;
+ this.zoomlevel_scale = this.zoomlevel_startScale +
+ deltaY_zoomlevel/zoomStopHeight;
+
+ // check zoomlevel validity
+ if (this.zoomlevel_scale < 0) {
+ this.zoomlevel_scale = 0;
+ }
+ if (this.zoomlevel_scale > (this.getNumZoomLevels()-1)) {
+ this.zoomlevel_scale = this.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.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.getResolution();
+ }
+ },
+
+
+
/********************************************************/
/* */
/* Translation Functions */
Modified: sandbox/emanuel/animatedZooming/lib/OpenLayers/Util.js
===================================================================
--- sandbox/emanuel/animatedZooming/lib/OpenLayers/Util.js 2007-03-01 16:21:16 UTC (rev 2291)
+++ sandbox/emanuel/animatedZooming/lib/OpenLayers/Util.js 2007-03-01 16:57:42 UTC (rev 2292)
@@ -961,3 +961,39 @@
}
return head;
};
+
+
+/** Generic Animation Step Value Generator By www.hesido.com, slightly modified
+ *
+ *
+ * @param {int} delta
+ * @param {int} totalSteps
+ * @param {int} step
+ * @param {float} power
+ *
+ * @returns The delta to the next position in the animation movement
+ * @type int
+ */
+OpenLayers.Util.easeInOut = function(delta, totalSteps, step, power) {
+ var prevStepVal = Math.pow(((1/totalSteps)*(step-1)),power) * delta;
+ var stepVal = Math.pow(((1/totalSteps)*step),power) * delta;
+ return Math.ceil(stepVal) - Math.ceil(prevStepVal);
+};
+
+
+/** Generic Animation Step Value Generator By www.hesido.com, slightly modified
+ *
+ *
+ * @param {int} delta
+ * @param {int} totalSteps
+ * @param {int} step
+ * @param {float} power
+ *
+ * @returns The delta to the next position in the animation movement
+ * @type float
+ */
+OpenLayers.Util.easeInOutZoom = function(delta, totalSteps, step, power) {
+ var prevStepVal = Math.pow(((1/totalSteps)*(step-1)),power) * delta;
+ var stepVal = Math.pow(((1/totalSteps)*step),power) * delta;
+ return stepVal;
+};
More information about the Commits
mailing list