Changeset 2979

Timestamp:

04/02/07 13:18:38 (2 years ago)

Author:

tschaub

Message:

#529 give tiles gutters - all layers that use Tile.Image must now look after layer.imageSize and layer.imageOffset - this is handled by layer.setTileSize - for untiled layers, setTileSize must be defined by the subclass - gutters are currently supported in Layer.Mapserver and Layer.WMS

Files:

• trunk/openlayers/examples/gutter.html (added)
• trunk/openlayers/examples/mapserver.html (modified) (1 diff)
• trunk/openlayers/examples/mapserver_untiled.html (modified) (1 diff)
• trunk/openlayers/examples/wms-untiled.html (added)
• trunk/openlayers/lib/OpenLayers/Layer.js (modified) (5 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/MapServer.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/MapServer/Untiled.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/WMS.js (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/WMS/Untiled.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Tile/Image.js (modified) (7 diffs)
• trunk/openlayers/tests/Layer/test_MapServer.html (modified) (2 diffs)
• trunk/openlayers/tests/Layer/test_MapServer_Untiled.html (modified) (1 diff)
• trunk/openlayers/tests/Layer/test_WMS.html (modified) (3 diffs)
• trunk/openlayers/tests/Tile/test_Image.html (modified) (3 diffs)

trunk/openlayers/examples/mapserver.html

@@ -19 +19 @@
-            map = new OpenLayers.Map( 'map' );
-            layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS", 
-
+
+
-            map.addLayer(layer);
-

trunk/openlayers/examples/mapserver_untiled.html

@@ -3 +3 @@
-    <style type="text/css">
-        #map {
-800px
-475px
+100%
+100%
-            border: 1px solid black;
-        }

trunk/openlayers/lib/OpenLayers/Layer.js

@@ -66 +66 @@
-     */
-    inRange: false,
+    
+    /**
+     * For layers that use Tile.Image, the image size is cached here.  For
+     * layers without a gutter, the image size is equal to the tile size.
+     * For layers with a gutter, the image is larger than the tile by twice
+     * the gutter in each dimension.
+     * 
+     * @type OpenLayers.Size
+     * @private
+     */
+    imageSize: null,
+    
+    /**
+     * For layers that use Tile.Image, the image offset is cached here.
+     * Layers without a gutter have zero offset.  For layers with a gutter,
+     * the image offset represents displacement due to the gutter.
+     * 
+     * @type OpenLayers.Pixel
+     * @private
+     */
+    imageOffset: null,
-
-  // OPTIONS
@@ -71 +92 @@
-    /** @type Array */
-    options: null,
+
+    /** Determines the width (in pixels) of the gutter around image tiles 
+     * to ignore.  By setting this property to a non-zero value, images 
+     * will be requested that are wider and taller than the tile size by 
+     * a value of 2 x gutter.  This allows artifacts of rendering at tile 
+     * edges to be ignored.  Set a gutter value that is equal to half the size 
+     * of the widest symbol that needs to be displayed.  Defaults to zero.
+     * Non-tiled layers always have zero gutter.
+     *  
+     * @type Int 
+    */ 
+    gutter: 0, 
-
-    /** @type String */
@@ -244 +277 @@
-        if (!this.isBaseLayer) {
-            this.inRange = this.calculateInRange();
-
+
+
+
+
-    },
-  
+    /**
+     * Set the tile size based on the map size.  This also sets layer.imageSize
+     * and layer.imageOffset for use by Tile.Image.
+     *
+     * @param OpenLayers.Size
+     */
+    setTileSize: function(size) {
+        var tileSize = (size) ? size :
+                                ((this.tileSize) ? this.tileSize :
+                                                   this.map.getTileSize());
+        this.tileSize = tileSize;
+        if(this.gutter) {
+            // layers with gutters need non-null tile sizes
+            //if(tileSize == null) {
+            //    OpenLayers.console.error("Error in layer.setMap() for " +
+            //                              this.name + ": layers with gutters " +
+            //                              "need non-null tile sizes");
+            //}
+            this.imageOffset = new OpenLayers.Pixel(-this.gutter, -this.gutter); 
+            this.imageSize = new OpenLayers.Size(tileSize.w + (2 * this.gutter), 
+                                                 tileSize.h + (2 * this.gutter)); 
+        } else {
+            // layers without gutters may have null tile size - as long
+            // as they don't rely on Tile.Image
+            this.imageSize = tileSize;
+            this.imageOffset = new OpenLayers.Pixel(0, 0);
+        }
+    },
+
-    /**
-    * @returns Whether or not the layer should be displayed (if in range)
@@ -561 +626 @@
-    
-    /**
+     * Adjusts the extent of a bounds in map units by the layer's gutter
+     * in pixels.
+     * 
+     * @param {OpenLayers.Bounds} bounds
+     * @type OpenLayers.Bounds
+     * @return A bounds adjusted in height and width by the gutter
+     */
+    adjustBoundsByGutter: function(bounds) {
+        var mapGutter = this.gutter * this.map.getResolution();
+        bounds = new OpenLayers.Bounds(bounds.left - mapGutter,
+                                       bounds.bottom - mapGutter,
+                                       bounds.right + mapGutter,
+                                       bounds.top + mapGutter);
+        return bounds;
+    },
+    
+    /**
-     * Sets the opacity for the entire layer (all images)
-     * @param {Float} opacity
@@ -567 +649 @@
-        this.opacity = opacity;
-        for(var i=0; i<this.div.childNodes.length; ++i) {
-
+.firstChild
-            OpenLayers.Util.modifyDOMElement(element, null, null, null, 
-                                             null, null, null, opacity);

trunk/openlayers/lib/OpenLayers/Layer/MapServer.js

@@ -88 +88 @@
-     */
-    getURL: function (bounds) {
-
+
+
+
-        // Make a list, so that getFullRequestString uses literal "," 
-        var extent = [bounds.left, bounds. bottom, bounds.right, bounds.top];
@@ -96 +98 @@
-                     {mapext:   extent,
-                      imgext:   extent,
-tileSize.w,this.til
-tileSize.w/
-tileSize.h/
-tileSize.w,this.til
+imageSize.w, this.imag
+imageSize.w / 
+imageSize.h / 
+imageSize.w, this.imag
-                      });
-        

trunk/openlayers/lib/OpenLayers/Layer/MapServer/Untiled.js

@@ -100 +100 @@
-     */
-    setMap: function(map) {
-        //determine new tile size
-        this.tileSize = map.getSize();
-        this.tileSize.w = this.tileSize.w * this.ratio;
-        this.tileSize.h = this.tileSize.h * this.ratio;
-        OpenLayers.Layer.HTTPRequest.prototype.setMap.apply(this, arguments);
+    },
+    
+    /**
+     * 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 tileSize = this.map.getSize();
+        tileSize.w = tileSize.w * this.ratio;
+        tileSize.h = tileSize.h * this.ratio;
+        this.tileSize = tileSize;
+        this.imageSize = tileSize;
+        this.imageOffset = new OpenLayers.Pixel(0, 0);
-    },
-
@@ -150 +159 @@
-
-            //determine new tile size
-
-
-
+
-
-            //formulate request url string

trunk/openlayers/lib/OpenLayers/Layer/WMS.js

@@ -25 +25 @@
-    
-    reproject: true,
-
+
-    /**
-    * @constructor
@@ -94 +94 @@
-     */
-    getURL: function (bounds) {
+        if(this.gutter) {
+            bounds = this.adjustBoundsByGutter(bounds);
+        }
-        return this.getFullRequestString(
-                     {BBOX:bounds.toBBOX(),
-til
-til
+imag
+imag
-    },
-
@@ -110 +113 @@
-    */
-    addTile:function(bounds,position) {
-
+var 
-        return new OpenLayers.Tile.Image(this, position, bounds, 
-                                             url, this.tileSize);

trunk/openlayers/lib/OpenLayers/Layer/WMS/Untiled.js

@@ -103 +103 @@
-     */
-    setMap: function(map) {
-        //determine new tile size
-        this.tileSize = map.getSize();
-        this.tileSize.w = this.tileSize.w * this.ratio;
-        this.tileSize.h = this.tileSize.h * this.ratio;
-        OpenLayers.Layer.HTTPRequest.prototype.setMap.apply(this, arguments);
+    },
+
+    /**
+     * 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 tileSize = this.map.getSize();
+        tileSize.w = tileSize.w * this.ratio;
+        tileSize.h = tileSize.h * this.ratio;
+        this.tileSize = tileSize;
+        this.imageSize = tileSize;
+        this.imageOffset = new OpenLayers.Pixel(0, 0);
-    },
-
@@ -153 +162 @@
-
-            //determine new tile size
-
-
-
+
-
-            //formulate request url string

trunk/openlayers/lib/OpenLayers/Tile/Image.js

@@ -16 +16 @@
-    imgDiv: null,
-
+    /**
+     * The image element is appended to the frame.  Any gutter on the image 
+     * will be hidden behind the frame. 
+     * 
+     * @type DOMElement div */ 
+    frame: null, 
+
-    /** 
-    * @constructor
@@ -27 +34 @@
-    initialize: function(layer, position, bounds, url, size) {
-        OpenLayers.Tile.prototype.initialize.apply(this, arguments);
+        this.frame = document.createElement('div'); 
+        this.frame.style.overflow = 'hidden'; 
+        this.frame.style.position = 'absolute'; 
-    },
-
@@ -35 +45 @@
-        if (this.imgDiv != null)  {
-            OpenLayers.Event.stopObservingElement(this.imgDiv.id);
-layer.div
-layer.div
+frame
+frame
-                this.imgDiv.map = null;
-            }
-        }
-        this.imgDiv = null;
+        if ((this.frame != null) && (this.frame.parentNode == this.layer.div)) { 
+            this.layer.div.removeChild(this.frame); 
+        }
+        this.frame = null; 
-        OpenLayers.Tile.prototype.destroy.apply(this, arguments);
-    },
@@ -61 +75 @@
-        
-        this.url = this.layer.getURL(this.bounds);
-
+
+
+
+
-        if (this.layer.alpha) {
-            OpenLayers.Util.modifyAlphaImageDiv(this.imgDiv,
-this.position, this.s
+null, this.layer.imageS
-        } else {
-            this.imgDiv.src = this.url;
-            OpenLayers.Util.modifyDOMElement(this.imgDiv,
-this.position, this.s
+null, this.layer.imageS
-        }
-        this.drawn = true;
@@ -103 +120 @@
-        if (this.layer.alpha) {
-            this.imgDiv = OpenLayers.Util.createAlphaImageDiv(null,
-position
-s
+layer.imageOffset
+layer.imageS
-                                                           null,
-absolut
+relativ
-                                                           null,
-                                                           null,
@@ -113 +130 @@
-        } else {
-            this.imgDiv = OpenLayers.Util.createImage(null,
-position
-s
+layer.imageOffset
+layer.imageS
-                                                      null,
-absolut
+relativ
-                                                      null,
-                                                      null,
@@ -132 +149 @@
-                        this.checkImgURL.bindAsEventListener(this) );
-        */
-
+
+
+
-        if(this.layer.opacity != null) {
-            

trunk/openlayers/tests/Layer/test_MapServer.html

@@ -55 +55 @@
-             url + "?" + OpenLayers.Util.getParameterString(tParams).replace(/,/g, "+"),
-             "image src is created correctly via addtile" );
-imgDiv
-imgDiv
-
-
+frame
+frame
+
+.firstChild
-        if (!isMozilla)
-            t.ok( true, "skipping element test outside of Mozilla");
@@ -187 +187 @@
-        map.zoomToMaxExtent();
-        t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
-
+firstChild.
-        tLayer.setOpacity("0.6");
-        t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
-
+firstChild.
-        var pixel = new OpenLayers.Pixel(5,6);
-        var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);

trunk/openlayers/tests/Layer/test_MapServer_Untiled.html

@@ -128 +128 @@
-        map.zoomToMaxExtent();
-        t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
-
+firstChild.
-        tLayer.setOpacity("0.6");
-        t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
-
+firstChild.
-
-    }    

trunk/openlayers/tests/Layer/test_WMS.html

@@ -51 +51 @@
-             url + "?" + OpenLayers.Util.getParameterString(tParams),
-             "image src is created correctly via addtile" );
-imgDiv
-imgDiv
-
-
+frame
+frame
+
+.firstChild
-        if (!isMozilla)
-            t.ok( true, "skipping element test outside of Mozilla");
@@ -192 +192 @@
-        map.zoomToMaxExtent();
-        t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
-
+firstChild.
-        tLayer.setOpacity("0.6");
-        t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
-
+firstChild.
-        var pixel = new OpenLayers.Pixel(5,6);
-        var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
@@ -230 +230 @@
-
-        map.destroy();
+    }
+    
+    function test_21_Layer_WMS_noGutters (t) { 
+        t.plan(2);
+        var map = new OpenLayers.Map('map');
+        var layer = new OpenLayers.Layer.WMS("no gutter layer", url, params, {gutter: 0});
+        map.addLayer(layer);
+        map.setCenter(new OpenLayers.LonLat(0,0), 5);
+        var tile = layer.grid[0][0];
+        var request = layer.getURL(tile.bounds);
+        var args = OpenLayers.Util.getArgs(request);
+        t.eq(parseInt(args['WIDTH']),
+             tile.size.w,
+             "layer without gutter requests images that are as wide as the tile");
+        t.eq(parseInt(args['HEIGHT']),
+             tile.size.h,
+             "layer without gutter requests images that are as tall as the tile");
+        
+        layer.destroy();
+        map.destroy();
+    }
+
+    function test_22_Layer_WMS_gutters (t) { 
+        t.plan(2);
+        var gutter = 15;
+        var map = new OpenLayers.Map('map');
+        var layer = new OpenLayers.Layer.WMS("gutter layer", url, params, {gutter: gutter});
+        map.addLayer(layer);
+        map.setCenter(new OpenLayers.LonLat(0,0), 5);
+        var tile = layer.grid[0][0];
+        var request = layer.getURL(tile.bounds);
+        var args = OpenLayers.Util.getArgs(request);
+        t.eq(parseInt(args['WIDTH']),
+             tile.size.w + (2 * gutter),
+             "layer with gutter requests images that are wider by twice the gutter");
+        t.eq(parseInt(args['HEIGHT']),
+             tile.size.h + (2 * gutter),
+             "layer with gutter requests images that are taller by twice the gutter");
+
+        layer.destroy();
+        map.destroy();
+
-    }
-    

trunk/openlayers/tests/Tile/test_Image.html

@@ -30 +30 @@
-        var map = new OpenLayers.Map('map');
-        
-
+
+
+
+
+
-        map.addLayer(layer);  
-        var position = new OpenLayers.Pixel(20,30);
-        var bounds = new OpenLayers.Bounds(1,2,3,4);
-        var url = "http://www.openlayers.org/dev/tests/tileimage";
-        var size = new OpenLayers.Size(5,6);
-        tile = new OpenLayers.Tile.Image(layer, position, bounds, url, size);
-        
@@ -54 +57 @@
-            EXCEPTIONS: "application/vnd.ogc.se_inimage", FORMAT: "image/jpeg",
-            SRS: "EPSG:4326", BBOX: "1,2,3,4",
-"256", HEIGHT: "256"
+String(size.w), HEIGHT: String(size.h)
-        };
-        t.eq( img.src,
@@ -168 +171 @@
-        
-    }
+
+    function test_05_Tile_Image_gutters(t) {
+        t.plan(5);
+        
+        var gutter = 0;
+        var name = 'Test Layer';
+        var url = "http://octo.metacarta.com/cgi-bin/mapserv";
+        var params = { map: '/mapdata/vmap_wms.map', 
+                       layers: 'basic', 
+                       format: 'image/png'};
+
+
+        var map = new OpenLayers.Map('map');
+        var layer = new OpenLayers.Layer.WMS(name, url, params, {gutter: gutter});
+        map.addLayer(layer);
+        map.setCenter(new OpenLayers.LonLat(0,0), 5);
+        
+        var tile = layer.grid[0][0];
+        
+        t.ok(tile.layer.imageSize.equals(tile.size),
+             "zero size gutter doesn't change image size"); 
+
+        t.ok(tile.layer.imageOffset.equals(new OpenLayers.Pixel(0, 0)),
+             "zero size gutter doesn't affect image offset");
+
+        map.destroy();
+        
+        var gutter = 15;
+        var map = new OpenLayers.Map('map');
+        var layer = new OpenLayers.Layer.WMS(name, url, params, {gutter: gutter});
+        map.addLayer(layer);
+        map.setCenter(new OpenLayers.LonLat(0,0), 5);
+        var tile = layer.grid[0][0];
+        t.ok(tile.layer.imageSize.equals(new OpenLayers.Size(tile.size.w + (2 * gutter),
+                                                             tile.size.h + (2 * gutter))),
+             "gutter properly changes image size"); 
+
+        t.ok(tile.layer.imageOffset.equals(new OpenLayers.Pixel(-gutter, -gutter)),
+             "gutter properly sets image offset");
+
+        t.ok(tile.bounds.equals(new OpenLayers.Bounds(-33.75, 33.75, -22.5, 45)),
+             "gutter doesn't affect tile bounds");
+
+        map.destroy();
+    }
+    
-  // -->
-  </script>
-</head>
-<body>
-0
+5
-</body>
-</html>