ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

#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

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@2979 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2007-04-02 17:18:38 +00:00
parent 7f0ccb69f0
commit b6a5e6619a
14 changed files with 351 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
lib/OpenLayers/Layer.js
View File

@@ -65,12 +65,45 @@ OpenLayers.Layer.prototype = {
* @type Boolean
*/
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
/** @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 */
projection: null,
@@ -243,9 +276,41 @@ OpenLayers.Layer.prototype = {
if (!this.isBaseLayer) {
this.inRange = this.calculateInRange();
}
}
// deal with gutters
this.setTileSize();
},
/**
* 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)
* @type Boolean
@@ -559,6 +624,23 @@ OpenLayers.Layer.prototype = {
return px;
},
/**
* 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
@@ -566,7 +648,7 @@ OpenLayers.Layer.prototype = {
setOpacity: function(opacity) {
this.opacity = opacity;
for(var i=0; i<this.div.childNodes.length; ++i) {
var element = this.div.childNodes[i];
var element = this.div.childNodes[i].firstChild;
OpenLayers.Util.modifyDOMElement(element, null, null, null,
null, null, null, opacity);
}

12
lib/OpenLayers/Layer/MapServer.js
View File

@@ -87,7 +87,9 @@ OpenLayers.Layer.MapServer.prototype =
* @type String
*/
getURL: function (bounds) {
if(this.gutter) {
bounds = this.adjustBoundsByGutter(bounds);
}
// Make a list, so that getFullRequestString uses literal ","
var extent = [bounds.left, bounds. bottom, bounds.right, bounds.top];
@@ -95,10 +97,10 @@ OpenLayers.Layer.MapServer.prototype =
var url = this.getFullRequestString(
{mapext: extent,
imgext: extent,
map_size: [this.tileSize.w,this.tileSize.h],
imgx: this.tileSize.w/2,
imgy: this.tileSize.h/2,
imgxy: [this.tileSize.w,this.tileSize.h]
map_size: [this.imageSize.w, this.imageSize.h],
imgx: this.imageSize.w / 2,
imgy: this.imageSize.h / 2,
imgxy: [this.imageSize.w, this.imageSize.h]
});
return url;

21
lib/OpenLayers/Layer/MapServer/Untiled.js
View File

@@ -99,12 +99,21 @@ OpenLayers.Layer.MapServer.Untiled.prototype =
* @param {OpenLayers.Map} map
*/
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);
},
/** When it is not a dragging move (ie when done dragging)
* reload and recenter the div.
@@ -149,9 +158,7 @@ OpenLayers.Layer.MapServer.Untiled.prototype =
center.lat + (tileHeight / 2));
//determine new tile size
this.tileSize = this.map.getSize();
this.tileSize.w = this.tileSize.w * this.ratio;
this.tileSize.h = this.tileSize.h * this.ratio;
this.setTileSize();
//formulate request url string
var url = this.getURL(tileBounds);

11
lib/OpenLayers/Layer/WMS.js
View File

@@ -24,7 +24,7 @@ OpenLayers.Layer.WMS.prototype =
},
reproject: true,
/**
* @constructor
*
@@ -93,10 +93,13 @@ OpenLayers.Layer.WMS.prototype =
* @type String
*/
getURL: function (bounds) {
if(this.gutter) {
bounds = this.adjustBoundsByGutter(bounds);
}
return this.getFullRequestString(
{BBOX:bounds.toBBOX(),
WIDTH:this.tileSize.w,
HEIGHT:this.tileSize.h});
WIDTH:this.imageSize.w,
HEIGHT:this.imageSize.h});
},
/**
@@ -109,7 +112,7 @@ OpenLayers.Layer.WMS.prototype =
* @type OpenLayers.Tile.Image
*/
addTile:function(bounds,position) {
url = this.getURL(bounds);
var url = this.getURL(bounds);
return new OpenLayers.Tile.Image(this, position, bounds,
url, this.tileSize);
},

21
lib/OpenLayers/Layer/WMS/Untiled.js
View File

@@ -102,13 +102,22 @@ OpenLayers.Layer.WMS.Untiled.prototype =
* @param {OpenLayers.Map} map
*/
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);
},
/** When it is not a dragging move (ie when done dragging)
* reload and recenter the div.
*
@@ -152,9 +161,7 @@ OpenLayers.Layer.WMS.Untiled.prototype =
center.lat + (tileHeight / 2));
//determine new tile size
this.tileSize = this.map.getSize();
this.tileSize.w = this.tileSize.w * this.ratio;
this.tileSize.h = this.tileSize.h * this.ratio;
this.setTileSize();
//formulate request url string
var url = this.getURL(tileBounds);

43
lib/OpenLayers/Tile/Image.js
View File

@@ -15,6 +15,13 @@ OpenLayers.Tile.Image.prototype =
/** @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,
/**
* @constructor
*
@@ -26,6 +33,9 @@ OpenLayers.Tile.Image.prototype =
*/
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';
},
/**
@@ -34,12 +44,16 @@ OpenLayers.Tile.Image.prototype =
destroy: function() {
if (this.imgDiv != null) {
OpenLayers.Event.stopObservingElement(this.imgDiv.id);
if (this.imgDiv.parentNode == this.layer.div) {
this.layer.div.removeChild(this.imgDiv);
if (this.imgDiv.parentNode == this.frame) {
this.frame.removeChild(this.imgDiv);
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);
},
@@ -60,14 +74,17 @@ OpenLayers.Tile.Image.prototype =
this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
this.url = this.layer.getURL(this.bounds);
// position the frame
OpenLayers.Util.modifyDOMElement(this.frame,
null, this.position, this.size);
if (this.layer.alpha) {
OpenLayers.Util.modifyAlphaImageDiv(this.imgDiv,
null, this.position, this.size, this.url);
null, null, this.layer.imageSize, this.url);
} else {
this.imgDiv.src = this.url;
OpenLayers.Util.modifyDOMElement(this.imgDiv,
null, this.position, this.size) ;
null, null, this.layer.imageSize) ;
}
this.drawn = true;
return true;
@@ -102,20 +119,20 @@ OpenLayers.Tile.Image.prototype =
initImgDiv: function() {
if (this.layer.alpha) {
this.imgDiv = OpenLayers.Util.createAlphaImageDiv(null,
this.position,
this.size,
this.layer.imageOffset,
this.layer.imageSize,
null,
"absolute",
"relative",
null,
null,
null,
true);
} else {
this.imgDiv = OpenLayers.Util.createImage(null,
this.position,
this.size,
this.layer.imageOffset,
this.layer.imageSize,
null,
"absolute",
"relative",
null,
null,
true);
@@ -131,7 +148,9 @@ OpenLayers.Tile.Image.prototype =
OpenLayers.Event.observe( this.imgDiv, "load",
this.checkImgURL.bindAsEventListener(this) );
*/
this.layer.div.appendChild(this.imgDiv);
this.frame.appendChild(this.imgDiv);
this.layer.div.appendChild(this.frame);
if(this.layer.opacity != null) {
OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, null,