Changeset 2134

Timestamp:

01/10/07 00:11:02 (2 years ago)

Author:

tschaub

Message:

let tiles have gutters!

Files:

• sandbox/tschaub/gutter/examples/gutter.html (added)
• sandbox/tschaub/gutter/lib/OpenLayers/Layer.js (modified) (1 diff)
• sandbox/tschaub/gutter/lib/OpenLayers/Layer/WMS.js (modified) (2 diffs)
• sandbox/tschaub/gutter/lib/OpenLayers/Tile/Image.js (modified) (7 diffs)
• sandbox/tschaub/gutter/tests/test_Layer_WMS.html (modified) (2 diffs)

sandbox/tschaub/gutter/lib/OpenLayers/Layer.js

@@ -545 +545 @@
-        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);

sandbox/tschaub/gutter/lib/OpenLayers/Layer/WMS.js

@@ -24 +24 @@
-    
-    reproject: true,
+    
+    /** 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.
+     * 
+     * @type int
+    */
+    gutter: 0,
-
-    /**
@@ -93 +104 @@
-     */
-    getURL: function (bounds) {
+        if(!this.gutter) {
+            return this.getFullRequestString(
+                         {BBOX:bounds.toBBOX(),
+                          WIDTH:this.tileSize.w,
+                          HEIGHT:this.tileSize.h});
+        }
+        var tileMapLT = new OpenLayers.LonLat(bounds.left, bounds.top);
+        var tileMapRB = new OpenLayers.LonLat(bounds.right, bounds.bottom);
+        var tilePixelLT = this.getViewPortPxFromLonLat(tileMapLT);
+        var tilePixelRB = this.getViewPortPxFromLonLat(tileMapRB);
+        var imagePixelLT = new OpenLayers.Pixel(tilePixelLT.x - this.gutter,
+                                                tilePixelLT.y - this.gutter);
+        var imagePixelRB = new OpenLayers.Pixel(tilePixelRB.x + this.gutter,
+                                                tilePixelRB.y + this.gutter);
+        var imageMapLT = this.getLonLatFromViewPortPx(imagePixelLT);
+        var imageMapRB = this.getLonLatFromViewPortPx(imagePixelRB);
+        var imageBounds = new OpenLayers.Bounds(imageMapLT.lon, imageMapRB.lat,
+                                                imageMapRB.lon, imageMapLT.lat);
-        return this.getFullRequestString(
-b
-
-
+imageB
+ + (2 * this.gutter)
+ + (2 * this.gutter)
-    },
-

sandbox/tschaub/gutter/lib/OpenLayers/Tile/Image.js

@@ -15 +15 @@
-    /** @type DOMElement img */
-    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,
-
-    /** 
@@ -27 +33 @@
-    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';
+        if(layer.gutter) {
+            this.imageOffset = new OpenLayers.Pixel(-layer.gutter, -layer.gutter);
+            this.imageSize = new OpenLayers.Size(this.size.w + (2 * layer.gutter),
+                                                 this.size.h + (2 * layer.gutter));
+        } else {
+            this.imageOffset = new OpenLayers.Pixel(0, 0);
+            this.imageSize = this.size.clone();
+        }
-    },
-
@@ -33 +50 @@
-     */
-    destroy: function() {
-layer.div
-layer.div
+frame
+frame
-        }
-        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);
-    },
@@ -55 +76 @@
-        
-        this.url = this.layer.getURL(this.bounds);
-
+
+
+
-        if (this.layer.alpha) {
-            OpenLayers.Util.modifyAlphaImageDiv(this.imgDiv,
-this.position, this.s
+null, this.imageS
-        } else {
-            this.imgDiv.src = this.url;
-            OpenLayers.Util.modifyDOMElement(this.imgDiv,
-this.position, this.s
+null, this.imageS
-        }
-        this.drawn = true;
@@ -97 +120 @@
-        if (this.layer.alpha) {
-            this.imgDiv = OpenLayers.Util.createAlphaImageDiv(null,
-position
-s
+imageOffset
+imageS
-                                                           null,
-absolut
+relativ
-                                                           null,
-                                                           null,
@@ -107 +130 @@
-        } else {
-            this.imgDiv = OpenLayers.Util.createImage(null,
-position
-s
+imageOffset
+imageS
-                                                      null,
-absolut
+relativ
-                                                      null,
-                                                      null,
@@ -124 +147 @@
-                        this.checkImgURL.bindAsEventListener(this) );
-
-
+
+
+
-        if(this.layer.opacity != null) {
-            

sandbox/tschaub/gutter/tests/test_Layer_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");
@@ -182 +182 @@
-        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);