#632: fixing the image layer that broke with r2979 - layer now sets its tileSize and imageSize appropriately - this also addesses (dup) ticket 511

git-svn-id: http://svn.openlayers.org/trunk/openlayers@3020 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/image-layer.html

@@ -13,10 +13,11 @@
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         <!--
+        var map;
         function init(){
-            var map = new OpenLayers.Map('map');
+            map = new OpenLayers.Map('map');
 
-            var options = {maxResolution: 'auto', numZoomLevels: 3};
+            var options = {numZoomLevels: 3};
             
             var graphic = new OpenLayers.Layer.Image(
                                 'City Lights',

lib/OpenLayers/Layer/Image.js

@@ -24,17 +24,23 @@ OpenLayers.Layer.Image.prototype =
     /** @type String */
     url: null,
 
-    /** @type OpenLayers.Bounds */
+    /**
+     * The image bounds in map units
+     * @type OpenLayers.Bounds
+     */
     extent: null,
     
-    /** @type OpenLayers.Size */
+    /**
+     * The image size in pixels
+     * @type OpenLayers.Size
+     */
     size: null,
 
     /** @type OpenLayers.Tile.Image */
     tile: null,
 
-    /** The ratio of height/width represented by a single pixel in the graphic
+    /**
-     * 
+     * The ratio of height/width represented by a single pixel in the graphic
      * @type Float */
     aspectRatio: null,
 
@@ -94,10 +100,16 @@ OpenLayers.Layer.Image.prototype =
      * @param {OpenLayers.Map} map
      */
     setMap: function(map) {
-        // If nothing to do with resolutions has been set, assume a single
+        /**
-        //  resolution determined by extent/size
+         * If nothing to do with resolutions has been set, assume a single
+         * resolution determined by ratio*extent/size - if an image has a
+         * pixel aspect ratio different than one (as calculated above), the
+         * image will be stretched in one dimension only.
+         */
         if( this.options.maxResolution == null ) {
-            this.options.maxResolution = this.extent.getWidth() / this.size.w;
+            this.options.maxResolution = this.aspectRatio *
+                                         this.extent.getWidth() /
+                                         this.size.w;
         }
         OpenLayers.Layer.prototype.setMap.apply(this, arguments);
     },
@@ -116,11 +128,8 @@ OpenLayers.Layer.Image.prototype =
         if(zoomChanged || firstRendering) {
 
             //determine new tile size
-            var tileWidth = this.extent.getWidth() / this.map.getResolution();
+            this.setTileSize();
-            var tileHeight = this.extent.getHeight() /
+
-                             (this.map.getResolution() * this.aspectRatio);
-            var tileSize = new OpenLayers.Size(tileWidth, tileHeight);
-            
             //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);
@@ -128,16 +137,28 @@ OpenLayers.Layer.Image.prototype =
             if(firstRendering) {
                 //create the new tile
                 this.tile = new OpenLayers.Tile.Image(this, ulPx, this.extent, 
-                                                      this.url, tileSize);
+                                                      this.url, this.tileSize);
             } else {
                 //just resize the tile and set it's new position
-                this.tile.size = tileSize.clone();
+                this.tile.size = this.tileSize.clone();
                 this.tile.position = ulPx.clone();
             }
             this.tile.draw();
         }
     }, 
-    
+
+    /**
+     * Set the tile size based on the map size.  This also sets layer.imageSize
+     * and layer.imageOffset for use by Tile.Image.
+     */
+    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);
+        this.imageSize = this.tileSize;
+        this.imageOffset = new OpenLayers.Pixel(0, 0);
+    },
+
     /**
      * @param {String} newUrl
      */

tests/Layer/test_Image.html

@@ -18,7 +18,7 @@
 
         t.eq( layer.name, "Test Layer", "layer.name is correct" );
         t.ok( layer.id != null, "Layer is given an id");
-        t.ok( layer.projection, "none", "default layer projection correctly set");
+        t.eq( layer.projection, "none", "default layer projection correctly set");
         t.ok( ((layer.chicken == 151) && (layer.foo == "bar")), "layer.options correctly set to Layer Object" );
         t.ok( ((layer.options["chicken"] == 151) && (layer.options["foo"] == "bar")), "layer.options correctly backed up" );
 
@@ -39,7 +39,7 @@
     }
 
     function test_50_Layer_Image_tileTests (t) {
-        t.plan(4);
+        t.plan(9);
         var map = new OpenLayers.Map('map');
         
         layer = new OpenLayers.Layer.Image('Test Layer', 
@@ -49,8 +49,20 @@
 
         map.addLayer(layer);
         map.zoomToMaxExtent();
-        t.eq(layer.tile.position.x,-40, "Tile x positioned correctly at maxextent");
+        t.ok(layer.imageSize, "layer.imageSize is set");
-        t.eq(layer.tile.position.y,107, "Tile y positioned correctly at maxextent");
+        t.ok(layer.tileSize, "layer.tileSize is set");
+        t.ok(layer.tileSize.equals(layer.imageSize), "tileSize equals imageSize");
+
+        // no resolution info was sent, so maxResolution should be calculated
+        // by aspectRatio*extent/size (this is the pixel aspect ratio)
+        var aspectRatio =  (layer.extent.getHeight() / layer.size.h) /
+                           (layer.extent.getWidth() / layer.size.w);
+        t.eq(aspectRatio, layer.aspectRatio, "aspectRatio is properly set");
+        var maxExtent = aspectRatio * layer.extent.getWidth() / layer.size.w;
+        t.eq(maxExtent, layer.maxResolution, "maxResolution is properly set");
+
+        t.eq(layer.tile.position.x,-42, "Tile x positioned correctly at maxextent");
+        t.eq(layer.tile.position.y,106, "Tile y positioned correctly at maxextent");
         t.eq(layer.tile.imgDiv.src, "http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif", "URL is correct");
         map.zoomIn();
         t.eq(layer.tile.imgDiv.src, "http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif", "URL is correct");