[OpenLayers-Users] Static images, bounds and zoom

[Florian Klumb]

Hi,

Li, thanks very much for the patch, as far as I can judge it corrects an annoying aspect ratio issue. That's very helpful indeed!

Still, how do I now adjust the zoom level to allow users zoom in until the natural image resolution is reached? Could anyone please give me a hint?

Flo

> You can use below patch:
> 
> Index: lib/OpenLayers/Layer/Image.js
> ===================================================================
> --- lib/OpenLayers/Layer/Image.js    (revision 8489)
> +++ lib/OpenLayers/Layer/Image.js    (working copy)
> @@ -47,13 +47,6 @@
>      tile: null,
> 
>      /**
> -     * Property: aspectRatio
> -     * {Float} The ratio of height/width represented by a single 
> pixel in
> the
> -     * graphic
> -     */
> -    aspectRatio: null,
> -
> -    /**
>       * Constructor: OpenLayers.Layer.Image
>       * Create a new image layer
>       *
> @@ -69,9 +62,6 @@
>          this.extent = extent;
>          this.size = size;
>          OpenLayers.Layer.prototype.initialize.apply(this, [name, options]);
> -
> -        this.aspectRatio = (this.extent.getHeight() / this.size.h) /
> -                           (this.extent.getWidth() / this.size.w);
>      },
> 
>      /**
> @@ -128,9 +118,9 @@
>           * image will be stretched in one dimension only.
>           */
>          if( this.options.maxResolution == null ) {
> -            this.options.maxResolution = this.aspectRatio *
> -                                         this.extent.getWidth() /
> -                                         this.size.w;
> +            var wRes = this.extent.getWidth() / this.size.w;
> +            var hRes = this.extent.getHeight() / this.size.h;
> +            this.options.maxResolution = Math.min(wRes, hRes);
>          }
>          OpenLayers.Layer.prototype.setMap.apply(this, arguments);
>      },
> @@ -155,8 +145,10 @@
>              this.setTileSize();
> 
>              //determine new position (upper left corner of new bounds)
> -            var ul = new OpenLayers.LonLat(this.extent.left,
> this.extent.top);
> -            var ulPx = this.map.getLayerPxFromLonLat(ul);
> +            var center = this.extent.getCenterLonLat();
> +            var centerPx = this.map.getLayerPxFromLonLat(center);
> +            var ulPx = new OpenLayers.Pixel(centerPx.x - 
> (this.tileSize.w /
> 2),
> +                     centerPx.y - (this.tileSize.h / 2));
> 
>              if(firstRendering) {
>                  //create the new tile
> @@ -175,10 +167,23 @@
>       * Set the tile size based on the map size.
>       */
>      setTileSize: function() {
> -        var tileWidth = this.extent.getWidth() / this.map.getResolution();
> -        var tileHeight = this.extent.getHeight() /
> this.map.getResolution();
> -        this.tileSize = new OpenLayers.Size(tileWidth, tileHeight);
> +        var w = this.extent.getWidth() / this.map.getResolution();
> +        var h = this.extent.getHeight() / this.map.getResolution();
> +
> +        this.tileSize = this.getLockedSize(w, h);
>      },
> +
> +    getLockedSize: function(w, h) {
> +        var tileWidth = w;
> +        var tileHeight = h;
> +        if(this.size.h > this.size.w) {
> +            tileHeight = Math.floor(this.size.h * (w / this.size.w));
> +        } else {
> +            tileWidth = Math.floor(this.size.w * (h / this.size.h));
> +        }
> +
> +        return new OpenLayers.Size(tileWidth, tileHeight);
> +    },
> 
>      /**
>       * APIMethod: setUrl
> 
> If this is the right way for the image layer, I will open a ticket for 
> this
> patch.
> 
> 
> > Hi,
> >
> > I'm using OpenLayers to develop a viewing application for medical images.
> > So far I'm just using static images, i.e. I'm using the Image layer, 
> and I'm
> > a bit puzzled as to the interdependence of bounds, extent, 
> resolution and
> > all this stuff. I simply want to fit an image which might be quite high-res
> > into the viewport for a start and then let the users zoom in until the
> > natural resolution of the image is reached. I played with all the parameters
> > but to be honest I still haven't quite gotten the gist, so even 
> after hours
> > it seems as if I'm not a step further. A hint or short explanation 
> as to how
> > to approach this would be greatly appreciated!
> >
> > My code is something like this:
> > var oMapWest = new OpenLayers.Map('viewportWest');
> > var graphic = new OpenLayers.Layer.Image(
> >  'City Lights',
> >  'images/political_world_map.jpg',  // which is 8000x4000pxs
> >  new OpenLayers.Bounds(-180, -90, 180, 90),
> >  new OpenLayers.Size(700, 350),
> >  {numZoomLevels:10}
> > );
> > oMapWest.addLayers([graphic]);
> > oMapWest.zoomToMaxExtent();
> >
> > Thanks!
> >
> > Flo
> >
> >
> 
> 
> -- 
> Li XinGang
> EMail: slinavlee at gmail.com
> Blog:   avlee.cnblogs.com
> Site:    www.mapboost.org.cn
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Image.js.patch
Type: application/octet-stream
Size: 3038 bytes
Desc: not available
Url : http://lists.osgeo.org/pipermail/openlayers-users/attachments/20081211/a711fa13/Image.js.obj