OpenLayers OpenLayers

Ticket #442: animatedZooming_1.0.patch

File animatedZooming_1.0.patch, 15.7 kB (added by emanuel, 3 years ago)

  • demo.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <style type="text/css"> 
     4        #map { 
     5            width: 512px; 
     6            height: 512px; 
     7            border: 1px solid black; 
     8        } 
     9    </style> 
     10    <title>Animated Zooming Demo</title> 
     11    <script src="./lib/OpenLayers.js"></script> 
     12    <script type="text/javascript"> 
     13        <!-- 
     14        function init(){ 
     15            var map = new OpenLayers.Map('map', { controls: [] }); 
     16 
     17            map.addControl(new OpenLayers.Control.PanZoomBar()); 
     18            map.addControl(new OpenLayers.Control.MouseToolbar()); 
     19            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); 
     20            map.addControl(new OpenLayers.Control.MousePosition()); 
     21            map.addControl(new OpenLayers.Control.OverviewMap()); 
     22          
     23 
     24 
     25            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",  
     26                "http://labs.metacarta.com/wms/vmap0", 
     27                {layers: 'basic'} ); 
     28 
     29            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic", 
     30                "http://wms.jpl.nasa.gov/wms.cgi",  
     31                {layers: "modis,global_mosaic"}); 
     32 
     33            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo", 
     34                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", 
     35                {layers: "bathymetry,land_fn,park,drain_fn,drainage," + 
     36                         "prov_bound,fedlimit,rail,road,popplace", 
     37                 transparent: "true", format: "image/png" }); 
     38 
     39            ol_wms.setVisibility(false); 
     40            jpl_wms.setVisibility(false); 
     41            dm_wms.setVisibility(false); 
     42 
     43            map.addLayers([ol_wms, jpl_wms, dm_wms]); 
     44 
     45            if (!map.getCenter()) map.zoomToMaxExtent(); 
     46        } 
     47        // --> 
     48    </script> 
     49  </head> 
     50  <body onload="init()"> 
     51    <div id="map"></div> 
     52  </body> 
     53</html> 

  • demo_frida.html

    old new  
     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     2        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> 
     3<html xmlns="http://www.w3.org/1999/xhtml"> 
     4 
     5<head>   
     6  <style type="text/css"> 
     7      #map { 
     8          width: 512px; 
     9          height: 512px; 
     10          border: 1px solid black; 
     11      } 
     12  </style> 
     13  <title>Frida Demo - Free Vector-Geodata Osnabrueck, Germany</title> 
     14  <script src="./lib/OpenLayers.js"></script> 
     15  <script type="text/javascript"> 
     16  
     17  function init() { 
     18    var lon=0; 
     19    var lat=0; 
     20    var zoom=0; 
     21 
     22    var options = { 
     23      maxScale: 1000, 
     24      minScale: 90000, 
     25      maxExtent: new OpenLayers.Bounds(7.92881, 52.2131, 8.18349, 52.341), 
     26      projection:"EPSG:4326", 
     27      //alternative: projection:"EPSG:31467" 
     28      controls: [new OpenLayers.Control.MouseDefaults()] 
     29    };  
     30    var map = new OpenLayers.Map('map',options); 
     31 
     32 
     33    //baselayer 
     34    var baselayer_wms = new OpenLayers.Layer.WMS( "Frida WMS",  
     35      "http://demo.intevation.org/cgi/frida-wms", { 
     36        layers: 'strassenall', 
     37        isBaseLayer: 'true', 
     38        format: 'image/png' } 
     39      ); 
     40     
     41    //green spaces 
     42    var greenspaces_wms = new OpenLayers.Layer.WMS( "green spaces",  
     43      "http://demo.intevation.org/cgi/frida-wms", { 
     44        layers: 'gruenflaechen', 
     45        isBaseLayer: "false",  
     46        transparent: "true",  
     47        format:'image/png'} 
     48      ); 
     49    greenspaces_wms.setVisibility(false); 
     50 
     51    //waters 
     52    var waters_wms = new OpenLayers.Layer.WMS( "waters",  
     53      "http://demo.intevation.org/cgi/frida-wms", { 
     54        layers: 'gewaesser', 
     55        isBaseLayer: "false",  
     56        transparent: "true",  
     57        format:'image/png'} 
     58      ); 
     59    waters_wms.setVisibility(false); 
     60     
     61    //streets 
     62    var streets_wms = new OpenLayers.Layer.WMS( "streets",  
     63      "http://demo.intevation.org/cgi/frida-wms", { 
     64        layers: 'strassenall', 
     65        isBaseLayer: "false",  
     66        transparent: "true",  
     67        format:'image/png'} 
     68      ); 
     69    streets_wms.setVisibility(false); 
     70 
     71    //poi 
     72    var poi_wms = new OpenLayers.Layer.WMS( "POI",  
     73      "http://demo.intevation.org/cgi/frida-wms", { 
     74        layers: 'sehenswuerdigkeiten', 
     75        isBaseLayer: "false",  
     76        transparent: "true",  
     77        format:'image/png'} 
     78      ); 
     79    poi_wms.setVisibility(false);         
     80     
     81 
     82    //add all layers 
     83    map.addLayers([baselayer_wms, greenspaces_wms, waters_wms,  poi_wms]); 
     84     
     85    //add controls 
     86    map.addControl(new OpenLayers.Control.PanZoomBar()); 
     87    map.addControl( new OpenLayers.Control.LayerSwitcher() ); 
     88    map.addControl(new OpenLayers.Control.MousePosition()); 
     89 
     90    //set center and zoomlevel 
     91    //map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
     92    map.zoomToMaxExtent(); 
     93}   
     94</script> 
     95</head> 
     96 
     97<body onload="init()"> 
     98    <div id="map"></div> 
     99    Free geodata powered by <a href="http://frida.intevation.de">Frida project</a> 
     100</body> 
     101 
     102</html> 

  • lib/OpenLayers/Control/PanZoomBar.js

    old new  
    2323    /** @type int */ 
    2424    zoomStopHeight: 11, 
    2525 
     26 
     27/*** emanuel (31.1.07) ***/ 
     28 
     29    /** @type int */ 
     30    zoomlevel_startScale: null,   
     31     
     32    /** @type int */ 
     33    zoomlevel_scale: null,    
     34      
     35    /** @type OpenLayers.Size */ 
     36    tileSize_startScale: null,  
     37     
     38    /** @type OpenLayers.Size */ 
     39    tileSize_scale: null, 
     40 
     41/***/ 
     42 
    2643    initialize: function() { 
    2744        OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments); 
    2845        this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoomBar.X, 
    2946                                             OpenLayers.Control.PanZoomBar.Y); 
     47/*** emanuel (31.1.07) ***/ 
     48        this.tileSize_scale = new OpenLayers.Size(); 
     49/***/                                              
    3050    }, 
    3151 
    3252    /** 
    …… 
    168188        this.zoomStart = evt.xy.clone(); 
    169189        this.div.style.cursor = "move"; 
    170190        OpenLayers.Event.stop(evt); 
     191 
     192/*** emanuel (31.1.07) ***/ 
     193 
     194    //get current zoomlevel 
     195    this.zoomlevel_startScale = this.map.zoom; 
     196 
     197    //get original tile size 
     198    this.tileSize_startScale = this.map.getTileSize(); 
     199 
     200    //find tile, which contains the center of the viewport 
     201    this.map.findCenterTile(); 
     202 
     203    /*    
     204    //set all active overlays temporarily invisible 
     205    for (var i = 0; i < this.map.layers.length; i++) { 
     206        var layer = this.map.layers[i]; 
     207        if (!layer.isBaseLayer) { 
     208            this.map.layers[i].div.style.display = "none"; 
     209        } 
     210    } 
     211    */ 
     212/***/         
     213 
    171214    }, 
    172215     
    173216    /* 
    …… 
    187230            } 
    188231            this.mouseDragStart = evt.xy.clone(); 
    189232            OpenLayers.Event.stop(evt); 
     233 
     234 
     235/*** emanuel (31.1.07) ***/ 
     236 
     237            //convert current sliderposition to new zoomlevel 
     238            var deltaY_zoomlevel = this.zoomStart.y - evt.xy.y 
     239            this.zoomlevel_scale=this.zoomlevel_startScale +  
     240              deltaY_zoomlevel/this.zoomStopHeight; 
     241            
     242            //check the zoomlevel validity   
     243            if (this.zoomlevel_scale < 0){ 
     244                this.zoomlevel_scale = 0;  
     245            }  
     246            if (this.zoomlevel_scale >= this.map.getNumZoomLevels()){  
     247                this.zoomlevel_scale = this.map.getNumZoomLevels() - 1;  
     248            } 
     249             
     250            //calculate the new tile size for the scale... 
     251            //...zoomIn 
     252            if (this.zoomlevel_startScale < this.zoomlevel_scale) { 
     253                this.tileSize_scale.w =  
     254                  Math.pow(2,(this.zoomlevel_scale - 
     255                  this.zoomlevel_startScale)) * this.tileSize_startScale.w; 
     256                this.tileSize_scale.h =  
     257                  Math.pow(2,(this.zoomlevel_scale - 
     258                  this.zoomlevel_startScale)) * this.tileSize_startScale.h; 
     259            } 
     260            //...zoomOut / no zoomchanges 
     261            if (this.zoomlevel_startScale >= this.zoomlevel_scale) {              
     262                this.tileSize_scale.w = 
     263                  1/(Math.pow(2,(this.zoomlevel_startScale - 
     264                  this.zoomlevel_scale))) * this.tileSize_startScale.w; 
     265                this.tileSize_scale.h = 
     266                  1/(Math.pow(2,(this.zoomlevel_startScale -  
     267                  this.zoomlevel_scale))) * this.tileSize_startScale.h; 
     268            } 
     269 
     270            // set new scaled tile size  
     271            this.map.scaleTileTo(this.tileSize_scale); 
     272                         
     273/***/ 
     274             
    190275        } 
    191276    }, 
    192277     

  • lib/OpenLayers/Map.js

    old new  
    708708            lonlat = this.maxExtent.getCenterLonLat(); 
    709709        } 
    710710         
    711         var zoomChanged = (this.isValidZoomLevel(zoom)) &&  
    712                           (zoom != this.getZoom()); 
     711        var zoomChanged; 
     712        //if zoomlevel not changed -> is at least one overlay active? 
     713        //The active (temporarily invisible) overlays will not 
     714        //reposition after scaling to the _same_ zoomlevel.  
     715        //So, it it is necessary to redraw the grid by calling this  
     716        //setCenter function. 
     717        if (zoom == this.getZoom()) 
     718        { 
     719            for (var i = 0; i < this.layers.length; i++) { 
     720                var layer = this.layers[i]; 
     721                if (!layer.isBaseLayer) { 
     722                    if (layer.getVisibility()) 
     723                        zoomChanged = true; 
     724                } 
     725            } 
     726        } 
     727        else { //zoomlevel changed 
     728            zoomChanged = true; 
     729        } 
     730         
     731        zoomChanged = (this.isValidZoomLevel(zoom) && zoomChanged); 
    713732 
    714733        var centerChanged = (this.isValidLonLat(lonlat)) &&  
    715734                            (!lonlat.equals(this.center)); 
    …… 
    834853        return valid; 
    835854    }, 
    836855 
     856 
     857/*** emanuel (31.1.07) ***/ 
     858 
     859    /** finds and sets the tile, which contains the center  
     860     *  of the viewport 
     861     * 
     862     */ 
     863    findCenterTile: function () { 
     864        this.baseLayer.findCenterTile(); 
     865    }, 
     866 
     867    /** scales all tiles to the new size (changes size  
     868     *  and position of every tile) 
     869     *  
     870     * @param {OpenLayers.Size} 
     871     */    
     872    scaleTileTo: function (newTileSize) { 
     873       this.baseLayer.scaleTileTo(newTileSize); 
     874    }, 
     875 
     876/***/ 
     877 
     878 
    837879  /********************************************************/ 
    838880  /*                                                      */ 
    839881  /*                 Layer Options                        */ 

  • lib/OpenLayers/Layer/Grid.js

    old new  
    2323    /** @type Integer */ 
    2424    buffer: 2, 
    2525 
     26 
     27/*** emanuel (31.1.07) ***/ 
     28     
     29    /** @type OpenLayers.Tile */ 
     30    centerTile: null, 
     31 
     32    /** @type Integer */ 
     33    centerRow: null, 
     34 
     35    /** @type Integer */ 
     36    centerCol: null, 
     37 
     38    /** @type OpenLayers.Pixel */    
     39    centerTileStartScalePos: null, 
     40 
     41/***/ 
     42 
     43 
    2644    /** 
    2745     * @constructor 
    2846     *  
    …… 
    139157        } 
    140158    }, 
    141159     
     160 
     161/*** emanuel (31.1.07) ***/ 
     162 
     163    /** finds and sets the tile, which contains the center  
     164     *  of the viewport 
     165     * 
     166     */ 
     167    findCenterTile:function() { 
     168         
     169        //get the center of the map (viewport) 
     170        var center = this.map.getCenter(); 
     171 
     172        //find tile, which contains the center of the viewport 
     173        this.centerTile = null; 
     174        if (this.grid) { 
     175            for (var iRow=0; iRow < this.grid.length; iRow++) { 
     176                for (var iCol=0; iCol < this.grid[iRow].length; iCol++) { 
     177                    var tileBounds = this.grid[iRow][iCol].bounds; 
     178                    if (tileBounds.containsLonLat(center, true)) { 
     179                        this.centerTile = this.grid[iRow][iCol]; 
     180                        this.centerRow = iRow; 
     181                        this.centerCol = iCol; 
     182                        break;  
     183                    } 
     184                } 
     185                if (this.centerTile) 
     186                    break; 
     187            } 
     188        } 
     189         
     190        //define real position of the center tile before scaling 
     191        //(It is tricky if you pan the map before scaling. Then the 
     192        //layerContainerDiv is only slided and you have to add this 
     193        //difference to the tile position) 
     194        var x = parseInt(this.centerTile.imgDiv.style.left) + 
     195          parseInt(this.map.layerContainerDiv.style.left); 
     196        var y = parseInt(this.centerTile.imgDiv.style.top) + 
     197          parseInt(this.map.layerContainerDiv.style.top); 
     198 
     199        this.centerTileStartScalePos = new OpenLayers.Pixel(x,y); 
     200    }, 
     201 
     202 
     203    /** scales all tiles to the new size (changes size  
     204     *  and position of every tile) 
     205     *  
     206     * @param {OpenLayers.Size} 
     207     */ 
     208    scaleTileTo:function(newTileSize) { 
     209         
     210        //convert the current center of the map in pixel 
     211        var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
     212 
     213        //reposition the center tile  
     214        if (this.centerTile ) { 
     215            //set new left position 
     216            var leftOffset = newTileSize.w / this.centerTile.size.w * 
     217              (centerPx.x - this.centerTileStartScalePos.x); 
     218            leftOffset = Math.round(leftOffset); 
     219            var newLeftPos = centerPx.x - leftOffset 
     220              - parseInt(this.map.layerContainerDiv.style.left); 
     221            this.centerTile.imgDiv.style.left = newLeftPos + "px"; 
     222 
     223            //set new top position 
     224            var topOffset = newTileSize.h / this.centerTile.size.h * 
     225              (centerPx.y - this.centerTileStartScalePos.y); 
     226            topOffset = Math.round(topOffset); 
     227            var newTopPos = centerPx.y - topOffset  
     228              - parseInt(this.map.layerContainerDiv.style.top); 
     229            this.centerTile.imgDiv.style.top = newTopPos + "px"; 
     230        } 
     231         
     232        //reposition and resize all tiles of all active layers 
     233        var baseLayerGrid = this.grid; 
     234        for (var i = 0; i < this.map.layers.length; i++) { 
     235            var layerGrid = this.map.layers[i].grid; 
     236            //go through the whole grid of every layer 
     237            for (var iRow=0; iRow < layerGrid.length; iRow++) { 
     238                for (var iCol=0; iCol < layerGrid[iRow].length; iCol++) {  
     239                    if (layerGrid[iRow][iCol].imgDiv) { 
     240                        //define the factors for rows and columns (relates to the center tile) 
     241                        var deltaRow = iRow - this.centerRow; 
     242                        var deltaCol = iCol - this.centerCol; 
     243                         
     244                        //set new left position 
     245                        var newLeftPos = parseInt(this.centerTile.imgDiv.style.left) 
     246                          + deltaCol * newTileSize.w ; 
     247                        layerGrid[iRow][iCol].imgDiv.style.left = newLeftPos + "px"; 
     248 
     249                        //set new top position 
     250                        var newTopPos = parseInt(this.centerTile.imgDiv.style.top) 
     251                          + deltaRow * newTileSize.h ; 
     252                        layerGrid[iRow][iCol].imgDiv.style.top = newTopPos + "px"; 
     253 
     254                        //set new width and height 
     255                        layerGrid[iRow][iCol].imgDiv.style.width = newTileSize.w + "px"; 
     256                        layerGrid[iRow][iCol].imgDiv.style.height = newTileSize.h + "px"; 
     257                    } 
     258                } 
     259            } 
     260        } 
     261    }, 
     262 
     263/***/ 
     264 
     265 
     266     
    142267    /** 
    143268     * @private 
    144269     *