OpenLayers OpenLayers

Changeset 6449

Show
Ignore:
Timestamp:
03/06/08 15:53:21 (10 months ago)
Author:
pagameba
Message:

update sandbox with tschaub's latest patch

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/pagameba/transition-resize/examples/transition.html

    r6440 r6449  
    11<html xmlns="http://www.w3.org/1999/xhtml"> 
    22  <head> 
     3    <title>OpenLayers Transitions Example</title> 
    34    <style type="text/css"> 
    45        #mapDiv { 
    …… 
    1415            map = new OpenLayers.Map('mapDiv', {maxResolution: 'auto'}); 
    1516 
    16             var single_default_effect = new OpenLayers.Layer.WMS( "WMS untiled default",  
    17                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},  
    18                 { singleTile: true, isBaseLayer: true} ); 
    19             var single_resize_effect = new OpenLayers.Layer.WMS( "WMS untiled resize",  
    20                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},  
    21                 { singleTile: true, isBaseLayer: true, transitionEffect: 'resize'} ); 
    22             var tiled_default_effect = new OpenLayers.Layer.WMS( "WMS tiled default ",  
    23                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},  
    24                 { isBaseLayer: true} ); 
    25             var tiled_resize_effect = new OpenLayers.Layer.WMS( "WMS tiled resize",  
    26                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},  
    27                 { isBaseLayer: true, transitionEffect: 'resize'} ); 
     17            var single_default_effect = new OpenLayers.Layer.WMS( 
     18                "WMS untiled default",  
     19                "http://labs.metacarta.com/wms/vmap0?", 
     20                {layers: 'basic'},  
     21                {singleTile: true} 
     22            ); 
     23            var single_resize_effect = new OpenLayers.Layer.WMS( 
     24                "WMS untiled resize",  
     25                "http://labs.metacarta.com/wms/vmap0?", 
     26                {layers: 'basic'},  
     27                {singleTile: true, transitionEffect: 'resize'} 
     28            ); 
     29            var tiled_default_effect = new OpenLayers.Layer.WMS( 
     30                "WMS tiled default ",  
     31                "http://labs.metacarta.com/wms/vmap0?", 
     32                {layers: 'basic'} 
     33            ); 
     34            var tiled_resize_effect = new OpenLayers.Layer.WMS( 
     35                "WMS tiled resize",  
     36                "http://labs.metacarta.com/wms/vmap0?", 
     37                {layers: 'basic'},  
     38                {transitionEffect: 'resize'} 
     39            ); 
    2840 
    2941            map.addLayers([single_default_effect, single_resize_effect, 
    …… 
    3749    <h1 id="title">Transition Example</h1> 
    3850    <p id="shortdesc"> 
    39       Demonstrates the use of transition effects in tiled and untiled layers.  There are two transitions that are currently implemented, 'default', 'resize'.  The default transition effect is used when no transition is specified and is implemented as no transition effect except for panning singleTile layers.  The 'resize' effect resamples the current tile and displays it stretched or compressed until the new tile is available.</p> 
    40     <p><em>Note: There is a small visual glitch that appears to affect singleTile layers with the resize effect in FireFox 2.0 with caching enabled (developers often disable their cache).  The map has a noticable flash when panning.  This appears to be a timing issue with showing and hiding the singleTile.  It</em></p> 
     51        Demonstrates the use of transition effects in tiled and untiled layers. 
     52    </p> 
    4153    <div id="mapDiv"></div> 
    42     <p> The first layer is an untiled WMS layer with no transition effect. </p> 
    43     <p> The second layer is an untiled WMS layer with a 'resize' effect. </p> 
    44     <p> The third layer is a tiled WMS layer with no transition effect. </p> 
    45     <p> The fourth layer is a tiled WMS layer with a 'resize' effect. </p> 
     54    <div id="docs"> 
     55        There are two transitions that are currently implemented: null (the 
     56        default) and 'resize'.  The default transition effect is used when no 
     57        transition is specified and is implemented as no transition effect except 
     58        for panning singleTile layers.  The 'resize' effect resamples the current 
     59        tile and displays it stretched or compressed until the new tile is available. 
     60    <ul> 
     61        <li>The first layer is an untiled WMS layer with no transition effect.</li> 
     62        <li>The second layer is an untiled WMS layer with a 'resize' effect. </li> 
     63        <li>The third layer is a tiled WMS layer with no transition effect. </li> 
     64        <li>The fourth layer is a tiled WMS layer with a 'resize' effect. </li> 
     65    </ul> 
     66    </div> 
     67  </body> 
    4668  </body> 
    4769</html> 

  • sandbox/pagameba/transition-resize/lib/OpenLayers/Layer.js

    r6448 r6449  
    261261     * APIProperty: transitionEffect 
    262262     * {String} The transition effect to use when the map is panned or 
    263      * zoomed.  There is currently two supported values: 
    264      * null - no transition effect (the default). 
    265      * keep - Keep tiles around. This uses double-buffering: this 
    266      *    type of transition effect is only useful for singleTile layers, 
    267      *    where the tile will be kept in place on drag. 
    268      * resize - existing tiles are resized on zoom to provide a visual 
    269      *   effect of the zoom having taken place immediately.  As the 
    270      *   new tiles become available, they are drawn over top of the 
     263     *     zoomed.   
     264     * 
     265     * There are currently two supported values: 
     266     *  - *null* No transition effect (the default). 
     267     *  - *resize*  Existing tiles are resized on zoom to provide a visual 
     268     *    effect of the zoom having taken place immediately.  As the 
     269     *    new tiles become available, they are drawn over top of the 
    271270     *    resized tiles. 
    272271     */ 

  • sandbox/pagameba/transition-resize/lib/OpenLayers/Tile.js

    r6324 r6449  
    8888     
    8989    /** 
     90     * Property: lastRatio 
     91     * {Float} Used in transition code only.  This is the previous ratio 
     92     *     of the back buffer tile resolution to the map resolution.  Compared 
     93     *     with the current ratio to determine if zooming occurred. 
     94     */ 
     95    lastRatio: 1, 
     96 
     97    /** 
    9098     * Property: isFirstDraw 
    9199     * {Boolean} Is this the first time the tile is being drawn? 
    92      * This is used to force resetBackBuffer to synchronize 
    93      * the backBufferTile with the foreground tile the first time 
    94      * the foreground tile loads so that if the user zooms 
    95      * before the layer has fully loaded, the backBufferTile for 
    96      * tiles that have been loaded can be used. 
     100     *     This is used to force resetBackBuffer to synchronize 
     101     *     the backBufferTile with the foreground tile the first time 
     102     *     the foreground tile loads so that if the user zooms 
     103     *     before the layer has fully loaded, the backBufferTile for 
     104     *     tiles that have been loaded can be used. 
    97105     */ 
    98106    isFirstDraw: true, 
    …… 
    101109     * Property: backBufferTile 
    102110     * {<OpenLayers.Tile>} A clone of the tile used to create transition 
    103      * effects when the tile is moved or changes resolution. 
     111     *     effects when the tile is moved or changes resolution. 
    104112     */ 
    105113    backBufferTile: null, 
    …… 
    193201     */ 
    194202    draw: function() { 
    195          
    196203        var maxExtent = this.layer.maxExtent; 
    197204        var withinMaxExtent = (maxExtent && 
    …… 
    201208        // tile is outside its layer's maxExtent. 
    202209        var drawTile = (withinMaxExtent || this.layer.displayOutsideMaxExtent); 
    203          
     210 
    204211        if (this.layer.transitionEffect != null) { 
    205212            if (drawTile) { 
    …… 
    233240            } 
    234241        } else { 
    235             if (this.isFirstDraw) { 
     242            if (drawTile && this.isFirstDraw) { 
    236243                this.events.register('loadend', this, this.showTile); 
    237244                this.isFirstDraw = false; 
    …… 
    317324    /**  
    318325     * Method: startTransition 
    319      * 
    320      * prepare the tile for a transition effect.  To be 
    321      * implemented by subclasses. 
     326     * Prepare the tile for a transition effect.  To be 
     327     *     implemented by subclasses. 
    322328     */ 
    323329    startTransition: function() {}, 
    …… 
    325331    /**  
    326332     * Method: resetBackBuffer 
    327      * 
    328      * triggered by two different events, layer loadend, and tile loadend. 
    329      * In any of these cases, we check to see if we can hide the  
    330      * backBufferTile yet and update its parameters to match the  
    331      * foreground tile.  Basic logic: 
    332      * 
    333      * - If the backBufferTile hasn't been drawn yet, reset it 
    334      * - If layer is still loading, show foreground tile but don't hide 
    335      *   the backBufferTile yet 
    336      * - If layer is done loading, reset backBuffer tile and show  
    337      *   foreground tile 
    338      */ 
    339     resetBackBuffer: function(args) { 
     333     * Triggered by two different events, layer loadend, and tile loadend. 
     334     *     In any of these cases, we check to see if we can hide the  
     335     *     backBufferTile yet and update its parameters to match the  
     336     *     foreground tile. 
     337     * 
     338     * Basic logic: 
     339     *  - If the backBufferTile hasn't been drawn yet, reset it 
     340     *  - If layer is still loading, show foreground tile but don't hide 
     341     *    the backBufferTile yet 
     342     *  - If layer is done loading, reset backBuffer tile and show  
     343     *    foreground tile 
     344     */ 
     345    resetBackBuffer: function() { 
     346        this.showTile(); 
    340347        if (this.backBufferTile &&  
    341348            (this.isFirstDraw || !this.layer.numLoadingTiles)) { 
    342             this.backBufferTile.hide(); 
    343349            this.isFirstDraw = false; 
    344350            // check to see if the backBufferTile is within the max extents 
    …… 
    348354                                   this.bounds.intersectsBounds(maxExtent, false)); 
    349355            if (withinMaxExtent) { 
    350                 this.backBufferTile.position = this.position.clone(); 
    351                 this.backBufferTile.bounds = this.bounds.clone(); 
    352                 this.backBufferTile.size = this.size.clone(); 
     356                this.backBufferTile.position = this.position; 
     357                this.backBufferTile.bounds = this.bounds; 
     358                this.backBufferTile.size = this.size; 
     359                this.backBufferTile.imageSize = this.layer.imageSize || this.size; 
     360                this.backBufferTile.imageOffset = this.layer.imageOffset; 
    353361                this.backBufferTile.resolution = this.layer.getResolution(); 
    354362                this.backBufferTile.renderTile(); 
    355363            } 
    356364        } 
    357         this.showTile(); 
    358365    }, 
    359366         
    360367    /**  
    361368     * Method: showTile 
    362      * 
    363      * show the tile only if it should be drawn. 
     369     * Show the tile only if it should be drawn. 
    364370     */ 
    365371    showTile: function() {  
    …… 
    371377    /**  
    372378     * Method: show 
    373      * 
    374      * show the tile.  To be implemented by subclasses. 
     379     * Show the tile.  To be implemented by subclasses. 
    375380     */ 
    376381    show: function() { }, 
    …… 
    378383    /**  
    379384     * Method: hide 
    380      * 
    381      * hide the tile.  To be implemented by subclasses. 
     385     * Hide the tile.  To be implemented by subclasses. 
    382386     */ 
    383387    hide: function() { }, 

  • sandbox/pagameba/transition-resize/lib/OpenLayers/Tile/Image.js

    r6109 r6449  
    152152    /** 
    153153     * Method: renderTile 
    154      * 
    155      * internal function to actually initialize the image tile, 
    156      * position it correctly, and set its url 
     154     * Internal function to actually initialize the image tile, 
     155     *     position it correctly, and set its url. 
    157156     */ 
    158157    renderTile: function() { 
    …… 
    319318    /** 
    320319     * Method: startTransition 
    321      * 
    322320     * This method is invoked on tiles that are backBuffers for tiles in the 
    323      * grid.  The grid tile is about to be cleared and a new tile source 
    324      * loaded.  This is where the transition effect needs to be started 
    325      * to provide visual continuity. 
     321     *     grid.  The grid tile is about to be cleared and a new tile source 
     322     *     loaded.  This is where the transition effect needs to be started 
     323     *     to provide visual continuity. 
    326324     */ 
    327325    startTransition: function() { 
    …… 
    330328            return; 
    331329        } 
    332  
    333         // show the backBufferTile and hide this tile 
    334         this.hide(); 
    335330 
    336331        // calculate the ratio of change between the current resolution of the 
    …… 
    340335        var ratio = 1; 
    341336        if (this.backBufferTile.resolution) { 
    342             ratio = this.backBufferTile.resolution / this.layer.getResolution() ; 
    343         } 
    344          
    345         // if the ratio is not 1 (i.e. we are zooming), then we might be  
    346         // resizing the backBuffer tile ... 
    347         if (ratio != 1) { 
     337            ratio = this.backBufferTile.resolution / this.layer.getResolution(); 
     338        } 
     339         
     340        // if the ratio is not the same as it was last time (i.e. we are 
     341        // zooming), then we need to adjust the backBuffer tile 
     342        if (ratio != this.lastRatio) { 
    348343            if (this.layer.transitionEffect == 'resize') { 
    349344                // In this case, we can just immediately resize the  
    350345                // backBufferTile. 
    351                 var upperLeft =  
    352                     new OpenLayers.LonLat(this.backBufferTile.bounds.left,  
    353                                           this.backBufferTile.bounds.top); 
    354                 var size =  
    355                     new OpenLayers.Size(this.backBufferTile.size.w * ratio,  
    356                                         this.backBufferTile.size.h * ratio); 
     346                var upperLeft = new OpenLayers.LonLat( 
     347                    this.backBufferTile.bounds.left,  
     348                    this.backBufferTile.bounds.top 
     349                ); 
     350                var size = new OpenLayers.Size( 
     351                    this.backBufferTile.size.w * ratio, 
     352                    this.backBufferTile.size.h * ratio 
     353                ); 
    357354 
    358355                var px = this.layer.map.getLayerPxFromLonLat(upperLeft); 
    359356                OpenLayers.Util.modifyDOMElement(this.backBufferTile.frame,  
    360                                                  null, px, size);    
    361                 var imageSize = this.backBufferTile.size.clone(); 
     357                                                 null, px, size); 
     358                var imageSize = this.backBufferTile.imageSize; 
    362359                imageSize = new OpenLayers.Size(imageSize.w * ratio,  
    363360                                                imageSize.h * ratio); 
    364  
    365                 OpenLayers.Util.modifyDOMElement(this.backBufferTile.imgDiv, 
    366                                                  null, null, imageSize) ; 
     361                var imageOffset = this.backBufferTile.imageOffset; 
     362                if(imageOffset) { 
     363                    imageOffset = new OpenLayers.Pixel( 
     364                        imageOffset.x * ratio, imageOffset.y * ratio 
     365                    ); 
     366                } 
     367 
     368                OpenLayers.Util.modifyDOMElement( 
     369                    this.backBufferTile.imgDiv, null, imageOffset, imageSize 
     370                ) ; 
    367371 
    368372                this.backBufferTile.show(); 
    …… 
    373377            // there was no change in resolution.  Otherwise we 
    374378            // don't bother to show the backBufferTile at all 
    375             if (this.layer.singleTile && ratio == 1) { 
     379            if (this.layer.singleTile) { 
    376380                this.backBufferTile.show(); 
    377381            } else { 
    …… 
    379383            } 
    380384        } 
     385        this.lastRatio = ratio; 
     386 
    381387    }, 
    382388     
    383389    /**  
    384390     * Method: show 
    385      * 
    386      * show the tile by showing its frame. 
     391     * Show the tile by showing its frame. 
    387392     */ 
    388393    show: function() { 
    389394        this.frame.style.display = ''; 
     395        // Force a reflow on gecko based browsers to actually show the element 
     396        // before continuing execution. 
     397        if (navigator.userAgent.toLowerCase().indexOf("gecko") != -1) {  
     398            this.frame.scrollLeft = this.frame.scrollLeft;  
     399        }  
    390400    }, 
    391401     
    392402    /**  
    393403     * Method: hide 
    394      * 
    395      * hide the tile by hiding its frame. 
     404     * Hide the tile by hiding its frame. 
    396405     */ 
    397406    hide: function() {