OpenLayers OpenLayers

Changeset 2296

Show
Ignore:
Timestamp:
03/02/07 09:53:32 (2 years ago)
Author:
emanuel
Message:

round scale values; zoom image layer fixed; zoomanimationActive with dblclick and zoombox

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

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

    r2295 r2296  
    6969    */ 
    7070    defaultDblClick: function (evt) { 
    71         //var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );  
    72         //this.map.setCenter(newCenter, this.map.zoom + 1); 
    73  
    74         // convert the (old) center of the map in pixel 
    75         var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
    76          
    77         // pan to new center    
    78         var deltaX = evt.xy.x - centerPx.x;  
    79         var deltaY = evt.xy.y - centerPx.y;  
    80         this.map.pan(deltaX, deltaY,true); 
    81  
    82         // zoom to new level  
    83         this.map.zoomIn();  
    84  
    85         OpenLayers.Event.stop(evt); 
    86         return false; 
     71        if (!this.map.zoomanimationActive){ 
     72            // convert the (old) center of the map in pixel 
     73            var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
     74             
     75            // pan to new center    
     76            var deltaX = evt.xy.x - centerPx.x;  
     77            var deltaY = evt.xy.y - centerPx.y;  
     78            this.map.pan(deltaX, deltaY,true); 
     79 
     80            // zoom to new level  
     81            this.map.zoomIn();  
     82 
     83            OpenLayers.Event.stop(evt); 
     84            return false; 
     85        } 
    8786    }, 
    8887 
    …… 
    243242    zoomBoxEnd: function(evt) { 
    244243        if (this.mouseDragStart != null) { 
    245             if (Math.abs(this.mouseDragStart.x - evt.xy.x) > 5 ||     
    246                 Math.abs(this.mouseDragStart.y - evt.xy.y) > 5) {    
    247                 var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart );  
    248                 var end = this.map.getLonLatFromViewPortPx( evt.xy ); 
    249                 var top = Math.max(start.lat, end.lat); 
    250                 var bottom = Math.min(start.lat, end.lat); 
    251                 var left = Math.min(start.lon, end.lon); 
    252                 var right = Math.max(start.lon, end.lon); 
    253                 var bounds = new OpenLayers.Bounds(left, bottom, right, top); 
    254                 this.map.zoomToExtent(bounds); 
    255             } else { 
    256                 var end = this.map.getLonLatFromViewPortPx( evt.xy ); 
    257                 this.map.setCenter(new OpenLayers.LonLat( 
    258                   (end.lon), 
    259                   (end.lat) 
    260                  ), this.map.getZoom() + 1); 
    261             }     
     244            if (!this.map.zoomanimationActive) { 
     245                if (Math.abs(this.mouseDragStart.x - evt.xy.x) > 5 ||     
     246                    Math.abs(this.mouseDragStart.y - evt.xy.y) > 5) {    
     247                    var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart );  
     248                    var end = this.map.getLonLatFromViewPortPx( evt.xy ); 
     249                    var top = Math.max(start.lat, end.lat); 
     250                    var bottom = Math.min(start.lat, end.lat); 
     251                    var left = Math.min(start.lon, end.lon); 
     252                    var right = Math.max(start.lon, end.lon); 
     253                    var bounds = new OpenLayers.Bounds(left, bottom, right, top); 
     254                    if (!this.map.zoomanimationActive) 
     255                        this.map.zoomToExtent(bounds); 
     256                } else { 
     257                    // convert the (old) center of the map in pixel 
     258                    var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()) 
     259                    // pan to new center    
     260                    var deltaX = evt.xy.x - centerPx.x;  
     261                    var deltaY = evt.xy.y - centerPx.y;  
     262                    this.map.pan(deltaX, deltaY,true); 
     263 
     264                    // zoom to new level  
     265                    this.map.zoomIn();         
     266                }     
     267            } 
    262268            this.removeZoomBox(); 
    263269       } 

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

    r2295 r2296  
    110110    */ 
    111111    defaultDblClick: function (evt) { 
    112         this.switchModeTo("pan"); 
    113         this.performedDrag = false; 
    114  
    115         // convert the (old) center of the map in pixel 
    116         var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
    117          
    118         // pan to new center    
    119         var deltaX = evt.xy.x - centerPx.x;  
    120         var deltaY = evt.xy.y - centerPx.y;  
    121         this.map.pan(deltaX, deltaY,true); 
    122  
    123         // zoom to new level  
    124         this.map.zoomIn();         
    125  
    126         OpenLayers.Event.stop(evt); 
    127         return false; 
     112        if (!this.map.zoomanimationActive){ 
     113            this.switchModeTo("pan"); 
     114            this.performedDrag = false; 
     115 
     116            // convert the (old) center of the map in pixel 
     117            var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
     118             
     119            // pan to new center    
     120            var deltaX = evt.xy.x - centerPx.x;  
     121            var deltaY = evt.xy.y - centerPx.y;  
     122            this.map.pan(deltaX, deltaY,true); 
     123 
     124            // zoom to new level  
     125            this.map.zoomIn();         
     126 
     127            OpenLayers.Event.stop(evt); 
     128            return false; 
     129        } 
    128130    }, 
    129131 

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

    r2295 r2296  
    691691     */ 
    692692    cloneLayerContainer_share:function() { 
    693          
    694693        // function for map only; not for overviewmap! 
    695694        if (this.map.div.id == "map") {   
    …… 
    701700            this.map.layerContainerDivClone = this.map.layerContainerDiv.cloneNode(true); 
    702701            this.map.layerContainerDivClone.id = "map_OpenLayers_Container_clone"; 
     702 
    703703            // 2. append layerContainerDivClone to viewPortDiv 
    704704            // (now the cloned div is above the original; it hides the original) 
    705705            this.map.viewPortDiv.appendChild(this.map.layerContainerDivClone); 
    706              
     706 
     707            // 3. set original div invisible during the tiles are loading             
    707708            this.map.layerContainerDiv.style.display= "none"; 
    708709        } 
    …… 
    724725                this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none"; 
    725726            } 
    726             // set cloned layerDiv invisibile -> original div is visible                
     727            // set cloned layerDiv invisibile and original div visible 
    727728            if (this.map.layerContainerDivClone){ 
     729                this.map.layerContainerDiv.style.display= "block"; 
    728730                this.map.layerContainerDivClone.style.display= "none"; 
    729                 this.map.layerContainerDiv.style.display= "block"; 
    730  
    731731            } 
    732  
    733  
    734         } 
     732        } 
     733 
     734        // set flag that zoom animation finished 
     735        this.map.zoomanimationActive = false; 
    735736    }, 
    736737 
    …… 
    774775            var newLeftPos = centerPx.x - leftOffset 
    775776              - parseInt(this.map.layerContainerDiv.style.left); 
    776             tile.imgDiv.style.left = newLeftPos + "px"; 
     777            tile.imgDiv.style.left = Math.round(newLeftPos) + "px"; 
    777778 
    778779            // set real start position of centerTile 
    …… 
    785786            var newTopPos = centerPx.y - topOffset  
    786787              - parseInt(this.map.layerContainerDiv.style.top); 
    787             tile.imgDiv.style.top = newTopPos + "px"; 
     788            tile.imgDiv.style.top = Math.round(newTopPos) + "px"; 
    788789 
    789790             //set new width and height 
    790             tile.imgDiv.style.width = newTileSize.w + "px"; 
    791             tile.imgDiv.style.height = newTileSize.h + "px"; 
     791            tile.imgDiv.style.width = Math.round(newTileSize.w) + "px"; 
     792            tile.imgDiv.style.height = Math.round(newTileSize.h) + "px"; 
    792793             
    793794            return true; 
    …… 
    851852    
    852853        //set new size (width and height) 
    853         this.zoomOutTile.imgDiv.style.width = this.map.tileSize.w  
    854           * Math.pow(2, newZoomlevel) + "px"; 
    855         this.zoomOutTile.imgDiv.style.height = this.map.tileSize.h  
    856           * Math.pow(2, newZoomlevel) + "px"; 
     854        this.zoomOutTile.imgDiv.style.width =  
     855          Math.round(this.map.tileSize.w * Math.pow(2, newZoomlevel)) + "px"; 
     856        this.zoomOutTile.imgDiv.style.height =  
     857          Math.round(this.map.tileSize.h * Math.pow(2, newZoomlevel)) + "px"; 
    857858 
    858859        //set new position (top and left) 
    …… 
    864865        var centerLonLat = extent.getCenterLonLat(); 
    865866          
    866     /*    if( bounds.containsLonLat(centerLonLat) 
    867             && !(extent.equals(maxExtent))) {*/ 
    868             var offsetlon = bounds.left - centerLonLat.lon; 
    869             var offsetlat = -bounds.top + centerLonLat.lat; 
    870              
    871             var offsetx = offsetlon / newResolution 
    872               - parseInt(this.map.layerContainerDiv.style.left); 
    873             var offsety = offsetlat / newResolution 
    874               - parseInt(this.map.layerContainerDiv.style.top); 
    875              
    876             this.zoomOutTile.imgDiv.style.left = centerPx.x + offsetx + "px";   
    877             this.zoomOutTile.imgDiv.style.top = centerPx.y + offsety + "px"; 
    878              
    879             // set zoomOutTile visible if viewport < map bounds 
    880            /* if ( (bounds.left < extent.left) || (bounds.right > 
    881  * extent.right) )*/  
    882                 this.map.baseLayer.zoomOutTile.imgDiv.style.display = "block"; 
    883 /*            else 
    884                 this.map.baseLayer.zoomOutTile.imgDiv.style.display = "none"; 
    885 //        }*/ 
    886          
     867        var offsetlon = bounds.left - centerLonLat.lon; 
     868        var offsetlat = -bounds.top + centerLonLat.lat; 
     869         
     870        var offsetx = offsetlon / newResolution 
     871          - parseInt(this.map.layerContainerDiv.style.left); 
     872        var offsety = offsetlat / newResolution 
     873          - parseInt(this.map.layerContainerDiv.style.top); 
     874         
     875        this.zoomOutTile.imgDiv.style.left =  
     876            Math.round(centerPx.x + offsetx) + "px";   
     877        this.zoomOutTile.imgDiv.style.top =  
     878            Math.round(centerPx.y + offsety) + "px"; 
     879         
     880        
     881        this.map.baseLayer.zoomOutTile.imgDiv.style.display = "block"; 
     882 
    887883        return true; 
    888884    }, 

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

    r2292 r2296  
    601601                        var newLeftPos = parseInt(centerTile.imgDiv.style.left) 
    602602                          + deltaCol * newTileSize.w ; 
    603                         tile.imgDiv.style.left = newLeftPos + "px"; 
     603                        tile.imgDiv.style.left = Math.round(newLeftPos) + "px"; 
    604604 
    605605                        //set new top position 
    606606                        var newTopPos = parseInt(centerTile.imgDiv.style.top) 
    607607                          + deltaRow * newTileSize.h ; 
    608                         tile.imgDiv.style.top = newTopPos + "px"; 
     608                        tile.imgDiv.style.top = Math.round(newTopPos) + "px"; 
    609609 
    610610                        //set new width and height 
    611                         tile.imgDiv.style.width = newTileSize.w + "px"; 
    612                         tile.imgDiv.style.height = newTileSize.h + "px"; 
     611                        tile.imgDiv.style.width = Math.round(newTileSize.w) + "px"; 
     612                        tile.imgDiv.style.height = Math.round(newTileSize.h) + "px"; 
    613613                    } 
    614614                } 

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

    r2275 r2296  
    135135                this.tile.position = ulPx.clone(); 
    136136            } 
     137 
     138            // fire loadstart event 
     139            this.events.triggerEvent("loadstart"); 
     140            this.doneLoading = false; 
     141 
    137142            this.tile.draw(); 
     143 
     144            var onload = function() {  
     145                this.doneLoading = true;  
     146                this.events.triggerEvent("loadend");  
     147            } 
     148 
     149            OpenLayers.Event.observe(this.tile.imgDiv, 'load', 
     150                                     onload.bindAsEventListener(this)); 
    138151        } 
    139152    },  
    …… 
    167180 
    168181    /**  
    169      * gets tile (image) size 
     182     * Gets tile (image) size. 
    170183     *   
    171      * @returns the image size 
     184     * @returns the image size if tile exists; otherwise 
     185     * null 
     186     * @type {OpenLayers.Size} 
    172187     */ 
    173188    getTileSize:function() { 
    174         return this.tile.size; 
     189        if (this.tile)  
     190            return this.tile.size; 
     191        else 
     192            return null; 
    175193    }, 
    176194 
    177195    /**  
    178      *  
     196     * Gets the tile of this image layer.  
     197     * 
    179198     * @returns the only tile of the layer 
    180199     * @type {OpenLayers.Tile} 
    181200     */ 
    182201    getCenterTile:function() {    
    183         return this.tile;  
    184     }, 
    185  
     202        if (this.tile) 
     203            return this.tile;  
     204        else 
     205            return null; 
     206    }, 
     207 
     208    /**  
     209     * Clones layerContainer for "smooth tile update".  
     210     * So, it gets no blank map while map is loading in new zoomlevel. 
     211     * 
     212     * @returns true after layerContainer is cloned 
     213     * @type Boolean 
     214     */ 
     215    cloneLayerContainer:function() { 
     216        // share clone algorithm with other baselayers 
     217        this.cloneLayerContainer_share(); 
     218 
     219        // remove the old imgDiv tile  
     220        // (so it doesn't becomes complicate with the same imgDiv of the 
     221        // cloned layerContainerDiv) 
     222        if (this.tile) 
     223            this.div.removeChild(this.tile.imgDiv); 
     224         
     225        this.tile = null;         
     226 
     227        return true; 
     228    }, 
    186229 
    187230    /** @final @type String */ 

  • sandbox/emanuel/animatedZooming/lib/OpenLayers/Layer/WMS/Untiled.js

    r2275 r2296  
    259259 
    260260    /**  
    261      * gets tile size 
     261     * Gets tile size. 
    262262     *   
    263      * @returns the current map tile size 
     263     * @returns the current map tile size if tile exists; otherwise 
     264     * null 
     265     * @type {OpenLayers.Size} 
    264266     */ 
    265267    getTileSize:function() { 
    266         return this.tile.size; //getTileSize(); 
     268        if (this.tile)  
     269            return this.tile.size; 
     270        else 
     271            return null; 
    267272    }, 
    268273 
    269274    /**  
    270      *  
    271      * @returns the only tile of the layer 
     275     * Gets the center tile. 
     276     * 
     277     * @returns the only tile of the layer if tile exists; otherwise 
     278     * null 
    272279     * @type {OpenLayers.Tile} 
    273280     */ 
    274281    getCenterTile:function() {    
    275         return this.tile;  
     282        if (this.tile) 
     283            return this.tile;  
     284        else 
     285            return null; 
    276286    }, 
    277287 
    …… 
    310320        // (so it doesn't becomes complicate with the same imgDiv of the 
    311321        // cloned layerContainerDiv) 
    312         this.div.removeChild(this.tile.imgDiv); 
     322        if (this.tile) 
     323            this.div.removeChild(this.tile.imgDiv); 
    313324         
    314325        this.tile = null;         

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

    r2292 r2296  
    140140     *  
    141141     * @type int */ 
    142     slideSteps: 7,     
     142    slideSteps: 4,     
    143143     
    144144    /** millisecondss between each step 
    …… 
    13861386            this.setCenter(null, finalZoomlevel); 
    13871387 
    1388         // end zoom animation -> set flag 
    1389         this.zoomanimationActive = false; 
     1388        // set zoomanimation flag to false _manually_  
     1389        // (only for image baselayer, because there is no onimageload event); 
     1390        // for all other layers it calls automatically from 
     1391        // loadendevent in layers.js 
     1392        if (this.baseLayer.CLASS_NAME == "OpenLayers.Layer.Image"){ 
     1393            this.zoomanimationActive = false; 
     1394        } 
     1395         
    13901396    }, 
    13911397 

  • sandbox/emanuel/animatedZooming/lib/OpenLayers/Util.js

    r2292 r2296  
    230230    // this code that turns its display on). 
    231231    // 
    232     var request; 
    233     if (!this.viewRequestID) 
    234         request = true; 
    235          
    236     if (this.map) { 
    237         if (this.viewRequestID == this.map.viewRequestID)  
    238             request = true; 
    239     } 
    240  
    241     if (request) { 
    242         this.style.backgroundColor = null; 
    243         this.style.display = "";   
    244     } 
     232     if (!this.viewRequestID || 
     233         (this.map && this.viewRequestID == this.map.viewRequestID)) {  
     234         this.style.backgroundColor = null; 
     235         this.style.display = "";   
     236     } 
    245237}; 
    246238