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

Tile.Image improvements and partial rewrite. Thanks erilem for the excellent collaboration during the review phase. p=me,erilem r=erilem (closes #3419)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12241 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-08-13 00:59:01 +00:00
parent a8d3d6a5b4
commit 23c9092201
14 changed files with 737 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/wms-long-url.js
View File

@@ -5,12 +5,12 @@ var map = new OpenLayers.Map( 'map' );
var base = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic', makeTheUrlLong: longText},
{tileOptions: {maxGetUrlLength: 2048}}
{tileOptions: {maxGetUrlLength: 2048}, transitionEffect: 'resize'}
);
var overlay = new OpenLayers.Layer.WMS("Overlay",
"http://suite.opengeo.org/geoserver/wms",
{layers: "usa:states", transparent: true, makeTheUrlLong: longText},
{ratio: 1, singleTile: true, tileOptions: {maxGetUrlLength: 2048}}
{ratio: 1, singleTile: true, tileOptions: {maxGetUrlLength: 2048}, transitionEffect: 'resize'}
);
map.addLayers([base, overlay]);
map.zoomToMaxExtent();

1
lib/OpenLayers.js
View File

@@ -121,6 +121,7 @@
"OpenLayers/Marker/Box.js",
"OpenLayers/Popup.js",
"OpenLayers/Tile.js",
"OpenLayers/Tile/BackBufferable.js",
"OpenLayers/Tile/Google.js",
"OpenLayers/Tile/Image.js",
"OpenLayers/Tile/Image/IFrame.js",

2
lib/OpenLayers/Layer/Bing.js
View File

@@ -159,7 +159,7 @@ OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, {
*/
getURL: function(bounds) {
if (!this.url) {
return OpenLayers.Util.getImagesLocation() + "blank.gif";
return;
}
var xyz = this.getXYZ(bounds), x = xyz.x, y = xyz.y, z = xyz.z;
var quadDigits = [];

86
lib/OpenLayers/Tile.js
View File

@@ -77,7 +77,7 @@ OpenLayers.Tile = OpenLayers.Class({
* {<OpenLayers.Pixel>} Top Left pixel of the tile
*/
position: null,
/**
* Property: isLoading
* {Boolean} Is the tile loading?
@@ -143,54 +143,38 @@ OpenLayers.Tile = OpenLayers.Class({
this.events = null;
},
/**
* Method: clone
*
* Parameters:
* obj - {<OpenLayers.Tile>} The tile to be cloned
*
* Returns:
* {<OpenLayers.Tile>} An exact clone of this <OpenLayers.Tile>
*/
clone: function (obj) {
if (obj == null) {
obj = new OpenLayers.Tile(this.layer,
this.position,
this.bounds,
this.url,
this.size);
}
// catch any randomly tagged-on properties
OpenLayers.Util.applyDefaults(obj, this);
return obj;
},
/**
* Method: draw
* Clear whatever is currently in the tile, then return whether or not
* it should actually be re-drawn.
* it should actually be re-drawn. This is an example implementation
* that can be overridden by subclasses. The minimum thing to do here
* is to call <clear> and return the result from <shouldDraw>.
*
* Returns:
* {Boolean} Whether or not the tile should actually be drawn. Note that
* this is not really the best way of doing things, but such is
* the way the code has been developed. Subclasses call this and
* depend on the return to know if they should draw or not.
* {Boolean} Whether or not the tile should actually be drawn.
*/
draw: function() {
var maxExtent = this.layer.maxExtent;
var withinMaxExtent = (maxExtent &&
this.bounds.intersectsBounds(maxExtent, false));
// The only case where we *wouldn't* want to draw the tile is if the
// tile is outside its layer's maxExtent.
this.shouldDraw = (withinMaxExtent || this.layer.displayOutsideMaxExtent);
//clear tile's contents and mark as not drawn
this.clear();
return this.shouldDraw;
return this.shouldDraw();
},
/**
* Method: shouldDraw
* Return whether or not the tile should actually be (re-)drawn. The only
* case where we *wouldn't* want to draw the tile is if the tile is outside
* its layer's maxExtent
*
* Returns:
* {Boolean} Whether or not the tile should actually be drawn.
*/
shouldDraw: function() {
var maxExtent = this.layer.maxExtent;
var withinMaxExtent = (maxExtent &&
this.bounds.intersectsBounds(maxExtent, false));
return withinMaxExtent || this.layer.displayOutsideMaxExtent;
},
/**
@@ -220,7 +204,7 @@ OpenLayers.Tile = OpenLayers.Class({
* Clear the tile of any bounds/position-related data so that it can
* be reused in a new location. To be implemented by subclasses.
*/
clear: function() {
clear: function(draw) {
// to be implemented by subclasses
},
@@ -260,29 +244,7 @@ OpenLayers.Tile = OpenLayers.Class({
bottomRight.lon,
topLeft.lat);
return bounds;
},
/**
* Method: showTile
* Show the tile only if it should be drawn.
*/
showTile: function() {
if (this.shouldDraw) {
this.show();
}
},
/**
* Method: show
* Show the tile. To be implemented by subclasses.
*/
show: function() { },
/**
* Method: hide
* Hide the tile. To be implemented by subclasses.
*/
hide: function() { },
CLASS_NAME: "OpenLayers.Tile"
});

201
lib/OpenLayers/Tile/BackBufferable.js Normal file
View File

@@ -0,0 +1,201 @@
/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
* full list of contributors). Published under the Clear BSD license.
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the
* full text of the license. */
/*
* @requires OpenLayers/Tile.js
* @requires OpenLayers/Util.js
*/
/*
* Class: OpenLayers.Tile.BackBufferable
* Base class for tiles that can have backbuffers during transitions. Do not
* create instances of this class.
*/
OpenLayers.Tile.BackBufferable = OpenLayers.Class(OpenLayers.Tile, {
/**
* Property: backBufferMode
* {Integer} Bitmap: 0 for no backbuffering at all, 1 for singleTile
* layers, 2 for transition effect set, 3 for both.
*/
backBufferMode: null,
/**
* Property: backBufferData
* {Object} Object including the necessary data for the back
* buffer.
*
* The object includes three properties:
* tile - {DOMElement} The DOM element for the back buffer.
* bounds - {<OpenLayers.Bounds>} The bounds of the tile to back.
* resolution - {Number} The resolution of the tile to back.
*/
backBufferData: null,
/**
* Method: initialize
* Determines the backBuffer mode and registers events
*/
initialize: function() {
OpenLayers.Tile.prototype.initialize.apply(this, arguments);
var transitionSupported = OpenLayers.Util.indexOf(
this.layer.SUPPORTED_TRANSITIONS,
this.layer.transitionEffect) != -1;
this.backBufferMode = (this.layer.singleTile && 1) |
(transitionSupported && 2);
this.backBufferData = {};
if (!this.size) {
this.size = new OpenLayers.Size(256, 256);
}
},
/**
* Method: draw
* Check that a tile should be drawn, and draw it.
*
* Returns:
* {Boolean} Was a tile drawn?
*/
draw: function() {
var draw = OpenLayers.Tile.prototype.shouldDraw.apply(this, arguments),
backBufferMode = this.backBufferMode;
if (draw) {
this.updateBackBuffer();
}
this.clear();
if (!draw) {
this.resetBackBuffer();
};
return draw;
},
/**
* Method: getTile
* Get the tile's markup. To be implemented by subclasses.
*
* Returns:
* {DOMElement} The tile's markup
*/
/**
* Method: createBackBuffer
* Create a copy of this tile's markup for the back buffer. To be
* implemented by subclasses.
*
* Returns:
* {DOMElement} A copy of the tile's markup.
*/
/**
* Method: setBackBufferData
* Stores the current bounds and resolution, for offset and ratio
* calculations
*/
setBackBufferData: function() {
this.backBufferData = OpenLayers.Util.extend(this.backBufferData, {
bounds: this.bounds,
resolution: this.layer.map.getResolution()
});
},
/**
* Method: updateBackBuffer
* Update the <backBufferData>, and return a new or reposition the
* backBuffer. When a backbuffer is returned, the tile's markup is not
* available any more.
*
* Returns:
* {HTMLDivElement} the tile's markup in a cloned element, or undefined if
* no backbuffer is currently available or needed
*/
updateBackBuffer: function() {
var layer = this.layer, map = layer.map,
backBufferMode = this.backBufferMode,
data = this.backBufferData,
tile = this.getTile(),
backBuffer = data.tile,
resolution = data.resolution,
ratio = resolution ? resolution / map.getResolution() : 1,
// Cases where we don't position and return a back buffer, but only
// update backBufferData and return undefined:
// (1) current ratio and backBufferMode dont't require a backbuffer
notNeeded = !(ratio == 1 ? backBufferMode & 1 : backBufferMode & 2),
// (2) the tile is not appended to the layer's div
noParent = tile && tile.parentNode !== layer.div,
// (3) we don't have a tile available that we could use as buffer
noTile = !(tile && tile.childNodes.length > 0),
// (4) no backbuffer is displayed for a tile that's still loading
noBackBuffer = data.tile && !this.isLoading;
if (notNeeded || noParent || noTile || noBackBuffer) {
this.setBackBufferData();
return;
}
// Create a back buffer tile and add it to the DOM
if (!backBuffer) {
backBuffer = this.createBackBuffer();
// some browsers fire the onload event before the image is
// displayed, so we keep the buffer until the whole layer finished
// loading to avoid visual glitches
layer.events.register("loadend", this, this.resetBackBuffer);
data.tile = backBuffer;
layer.div.insertBefore(backBuffer, tile);
}
// Position the back buffer now that we have one
var lonLat = {lon: data.bounds.left, lat: data.bounds.top},
position = map.getPixelFromLonLat(lonLat),
containerStyle = map.layerContainerDiv.style,
leftOffset = parseInt(containerStyle.left, 10),
topOffset = parseInt(containerStyle.top, 10),
style = backBuffer.style;
style.left = (position.x - leftOffset) + "px";
style.top = (position.y - topOffset) + "px";
style.width = (this.size.w * ratio) + "px";
style.height = (this.size.h * ratio) + "px";
return backBuffer;
},
/**
* Method: resetBackBuffer
* Handler for the layer's loadend event.
*/
resetBackBuffer: function() {
this.layer.events.unregister("loadend", this, this.resetBackBuffer);
this.removeBackBuffer();
this.setBackBufferData();
},
/**
* Method: removeBackBuffer
* Removes the backBuffer for this tile.
*/
removeBackBuffer: function() {
var backBufferData = this.backBufferData;
var backBuffer = backBufferData.tile;
delete backBufferData.tile;
var parent = backBuffer && backBuffer.parentNode;
if (backBuffer) {
parent.removeChild(backBuffer);
}
},
/**
* APIMethod: destroy
* nullify references to prevent circular references and memory leaks
*/
destroy: function() {
this.removeBackBuffer();
this.layer.events.unregister("loadend", this, this.resetBackBuffer);
this.backBufferData = null;
OpenLayers.Tile.prototype.destroy.apply(this, arguments);
}
});

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

@@ -5,7 +5,7 @@
/**
* @requires OpenLayers/Tile.js
* @requires OpenLayers/Tile/BackBufferable.js
*/
/**
@@ -15,9 +15,9 @@
* <OpenLayers.Tile.Image> constructor.
*
* Inherits from:
* - <OpenLayers.Tile>
* - <OpenLayers.Tile.BackBufferable>
*/
OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
/**
* Property: url
@@ -28,16 +28,22 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
/**
* Property: imgDiv
* {DOMElement} The div element which wraps the image.
* {HTMLImageElement} The image for this tile.
*/
imgDiv: null,
/**
* Property: frame
* {DOMElement} The image element is appended to the frame. Any gutter on
* the image will be hidden behind the frame.
*/
frame: null,
/**
* Property: imageReloadAttempts
* {Integer} Attempts to load the image.
*/
imageReloadAttempts: null,
/**
* Property: layerAlphaHack
@@ -46,28 +52,11 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
layerAlphaHack: null,
/**
* Property: isBackBuffer
* {Boolean} Is this tile a back buffer tile?
* Property: asyncRequestId
* {Integer} ID of an request to see if request is still valid. This is a
* number which increments by 1 for each asynchronous request.
*/
isBackBuffer: false,
/**
* Property: isFirstDraw
* {Boolean} Is this the first time the tile is being drawn?
* This is used to force resetBackBuffer to synchronize
* the backBufferTile with the foreground tile the first time
* the foreground tile loads so that if the user zooms
* before the layer has fully loaded, the backBufferTile for
* tiles that have been loaded can be used.
*/
isFirstDraw: true,
/**
* Property: backBufferTile
* {<OpenLayers.Tile>} A clone of the tile used to create transition
* effects when the tile is moved or changes resolution.
*/
backBufferTile: null,
asyncRequestId: null,
/**
* APIProperty: maxGetUrlLength
@@ -77,12 +66,9 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* characters.
*
* Caution:
* Older versions of Gecko based browsers (e.g. Firefox < 3.5) and
* Opera < 10.0 do not fully support this option.
*
* Note:
* Do not use this option for layers that have a transitionEffect
* configured - IFrame tiles from POST requests can not be resized.
* Older versions of Gecko based browsers (e.g. Firefox < 3.5) and most
* Opera versions do not fully support this option. On all browsers,
* transition effects are not supported if POST requests are used.
*/
maxGetUrlLength: null,
@@ -102,72 +88,34 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* options - {Object}
*/
initialize: function(layer, position, bounds, url, size, options) {
OpenLayers.Tile.prototype.initialize.apply(this, arguments);
OpenLayers.Tile.BackBufferable.prototype.initialize.apply(this, arguments);
this.url = url; //deprecated remove me
this.frame = document.createElement("div");
this.frame.style.position = "absolute";
this.frame.style.overflow = "hidden";
this.layerAlphaHack = this.layer.alpha && OpenLayers.Util.alphaHack();
if (this.maxGetUrlLength != null) {
OpenLayers.Util.extend(this, OpenLayers.Tile.Image.IFrame);
}
this.url = url; //deprecated remove me
this.frame = document.createElement('div');
this.frame.style.overflow = 'hidden';
this.frame.style.position = 'absolute';
this.layerAlphaHack = this.layer.alpha && OpenLayers.Util.alphaHack();
},
/**
* APIMethod: destroy
* nullify references to prevent circular references and memory leaks
*/
destroy: function() {
if (this.imgDiv != null) {
this.removeImgDiv();
if (this.frame != null) {
this.clear();
this.imgDiv = null;
this.frame = null;
}
this.imgDiv = null;
if ((this.frame != null) && (this.frame.parentNode == this.layer.div)) {
this.layer.div.removeChild(this.frame);
}
this.frame = null;
/* clean up the backBufferTile if it exists */
if (this.backBufferTile) {
this.backBufferTile.destroy();
this.backBufferTile = null;
}
this.layer.events.unregister("loadend", this, this.resetBackBuffer);
OpenLayers.Tile.prototype.destroy.apply(this, arguments);
},
/**
* Method: clone
*
* Parameters:
* obj - {<OpenLayers.Tile.Image>} The tile to be cloned
*
* Returns:
* {<OpenLayers.Tile.Image>} An exact clone of this <OpenLayers.Tile.Image>
*/
clone: function (obj) {
if (obj == null) {
obj = new OpenLayers.Tile.Image(this.layer,
this.position,
this.bounds,
this.url,
this.size);
}
//pick up properties from superclass
obj = OpenLayers.Tile.prototype.clone.apply(this, [obj]);
//dont want to directly copy the image div
obj.imgDiv = null;
return obj;
// don't handle async requests any more
this.asyncRequestId = null;
OpenLayers.Tile.BackBufferable.prototype.destroy.apply(this, arguments);
},
/**
@@ -175,103 +123,27 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* Check that a tile should be drawn, and draw it.
*
* Returns:
* {Boolean} Always returns true.
* {Boolean} Was a tile drawn?
*/
draw: function() {
if (this.layer != this.layer.map.baseLayer && this.layer.reproject) {
this.bounds = this.getBoundsFromBaseLayer(this.position);
}
var drawTile = OpenLayers.Tile.prototype.draw.apply(this, arguments);
if ((OpenLayers.Util.indexOf(this.layer.SUPPORTED_TRANSITIONS, this.layer.transitionEffect) != -1) ||
this.layer.singleTile) {
if (drawTile) {
//we use a clone of this tile to create a double buffer for visual
//continuity. The backBufferTile is used to create transition
//effects while the tile in the grid is repositioned and redrawn
if (!this.backBufferTile) {
this.backBufferTile = this.clone();
this.backBufferTile.hide();
// this is important. It allows the backBuffer to place itself
// appropriately in the DOM. The Image subclass needs to put
// the backBufferTile behind the main tile so the tiles can
// load over top and display as soon as they are loaded.
this.backBufferTile.isBackBuffer = true;
// potentially end any transition effects when the tile loads
this.events.register('loadend', this, this.resetBackBuffer);
// clear transition back buffer tile only after all tiles in
// this layer have loaded to avoid visual glitches
this.layer.events.register("loadend", this, this.resetBackBuffer);
}
// run any transition effects
this.startTransition();
var drawn = OpenLayers.Tile.BackBufferable.prototype.draw.apply(this, arguments);
if (drawn) {
if (this.layer != this.layer.map.baseLayer && this.layer.reproject) {
this.bounds = this.getBoundsFromBaseLayer(this.position);
}
if (this.isLoading) {
//if we're already loading, send 'reload' instead of 'loadstart'.
this.events.triggerEvent("reload");
} else {
// if we aren't going to draw the tile, then the backBuffer should
// be hidden too!
if (this.backBufferTile) {
this.backBufferTile.clear();
}
this.isLoading = true;
this.events.triggerEvent("loadstart");
}
this.positionTile();
this.renderTile();
} else {
if (drawTile && this.isFirstDraw) {
this.events.register('loadend', this, this.showTile);
this.isFirstDraw = false;
}
}
if (!drawTile) {
return false;
}
if (this.isLoading) {
//if we're already loading, send 'reload' instead of 'loadstart'.
this.events.triggerEvent("reload");
} else {
this.isLoading = true;
this.events.triggerEvent("loadstart");
}
return this.renderTile();
},
/**
* Method: resetBackBuffer
* Triggered by two different events, layer loadend, and tile loadend.
* In any of these cases, we check to see if we can hide the
* backBufferTile yet and update its parameters to match the
* foreground tile.
*
* Basic logic:
* - If the backBufferTile hasn't been drawn yet, reset it
* - If layer is still loading, show foreground tile but don't hide
* the backBufferTile yet
* - If layer is done loading, reset backBuffer tile and show
* foreground tile
*/
resetBackBuffer: function() {
this.showTile();
if (this.backBufferTile &&
(this.isFirstDraw || !this.layer.numLoadingTiles)) {
this.isFirstDraw = false;
// check to see if the backBufferTile is within the max extents
// before rendering it
var maxExtent = this.layer.maxExtent;
var withinMaxExtent = (maxExtent &&
this.bounds.intersectsBounds(maxExtent, false));
if (withinMaxExtent) {
this.backBufferTile.position = this.position;
this.backBufferTile.bounds = this.bounds;
this.backBufferTile.size = this.size;
this.backBufferTile.imageSize = this.layer.getImageSize(this.bounds) || this.size;
this.backBufferTile.imageOffset = this.layer.imageOffset;
this.backBufferTile.resolution = this.layer.getResolution();
this.backBufferTile.renderTile();
}
this.backBufferTile.hide();
this.unload();
}
return drawn;
},
/**
@@ -280,324 +152,194 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* position it correctly, and set its url.
*/
renderTile: function() {
this.layer.div.appendChild(this.frame);
if (this.layer.async) {
this.initImgDiv();
// Asyncronous image requests call the asynchronous getURL method
// Asynchronous image requests call the asynchronous getURL method
// on the layer to fetch an image that covers 'this.bounds', in the scope of
// 'this', setting the 'url' property of the layer itself, and running
// the callback 'positionFrame' when the image request returns.
this.layer.getURLasync(this.bounds, this, "url", this.positionImage);
// the callback 'initImage' when the image request returns.
var myId = this.asyncRequestId = (this.asyncRequestId || 0) + 1;
this.layer.getURLasync(this.bounds, this, "url", function() {
if (myId == this.asyncRequestId) {
this.initImage();
}
});
} else {
// syncronous image requests get the url and position the frame immediately,
// and don't wait for an image request to come back.
// synchronous image requests get the url immediately.
this.url = this.layer.getURL(this.bounds);
this.initImgDiv();
// position the frame immediately
this.positionImage();
this.initImage();
}
return true;
},
/**
* Method: positionImage
* Method: positionTile
* Using the properties currenty set on the layer, position the tile correctly.
* This method is used both by the async and non-async versions of the Tile.Image
* code.
*/
positionImage: function() {
// if the this layer doesn't exist at the point the image is
// returned, do not attempt to use it for size computation
if (this.layer === null) {
return;
}
// position the frame
OpenLayers.Util.modifyDOMElement(this.frame,
null, this.position, this.size);
var imageSize = this.layer.getImageSize(this.bounds);
if (this.layerAlphaHack) {
OpenLayers.Util.modifyAlphaImageDiv(this.imgDiv,
null, null, imageSize, this.url);
} else {
OpenLayers.Util.modifyDOMElement(this.imgDiv,
null, null, imageSize) ;
this.imgDiv.src = this.url;
}
positionTile: function() {
var style = this.frame.style;
style.left = this.position.x + "px";
style.top = this.position.y + "px";
style.width = this.size.w + "px";
style.height = this.size.h + "px";
},
/**
* Method: clear
* Clear the tile of any bounds/position-related data so that it can
* be reused in a new location.
* Remove the tile from the DOM, clear it of any image related data so that
* it can be reused in a new location.
*/
clear: function() {
if(this.imgDiv) {
this.hide();
if (OpenLayers.Tile.Image.useBlankTile) {
this.imgDiv.src = OpenLayers.Util.getImagesLocation() + "blank.gif";
}
var img = this.imgDiv;
if (img) {
OpenLayers.Event.stopObservingElement(img);
if (this.frame.parentNode === this.layer.div) {
this.layer.div.removeChild(this.frame);
}
this.setImgSrc();
if (this.layerAlphaHack === true) {
img.style.filter = "";
}
OpenLayers.Element.removeClass(img, "olImageLoadError");
}
},
/**
* Method: createImage
* Creates the content for the frame on the tile.
*/
createImage: function() {
var img = document.createElement("img");
this.imgDiv = img;
img.className = "olTileImage";
// avoid image gallery menu in IE6
img.galleryImg = "no";
var style = img.style,
gutter = this.layer.gutter;
if (gutter) {
var tileSize = this.layer.tileSize,
left = (gutter / tileSize.w * 100),
top = (gutter / tileSize.h * 100);
style.left = -left + "%";
style.top = -top + "%";
style.width = (2 * left + 100) + "%";
style.height = (2 * top + 100) + "%";
style.position = "absolute";
} else {
style.width = "100%";
style.height = "100%";
}
if (this.layer.opacity < 1) {
OpenLayers.Util.modifyDOMElement(img, null, null, null, null, null,
null, this.layer.opacity);
}
if (this.layerAlphaHack) {
// move the image out of sight
style.paddingTop = style.height;
style.height = "0";
}
this.frame.appendChild(img);
return img;
},
/**
* Method: initImgDiv
* Creates the imgDiv property on the tile.
* Method: initImage
* Creates the content for the frame on the tile.
*/
initImgDiv: function() {
if (this.imgDiv == null) {
var offset = this.layer.imageOffset;
var size = this.layer.getImageSize(this.bounds);
if (this.layerAlphaHack) {
this.imgDiv = OpenLayers.Util.createAlphaImageDiv(null,
offset,
size,
null,
"relative",
null,
null,
null,
true);
} else {
this.imgDiv = OpenLayers.Util.createImage(null,
offset,
size,
null,
"relative",
null,
null,
true);
}
// needed for changing to a different server for onload error
if (OpenLayers.Util.isArray(this.layer.url)) {
this.imgDiv.urls = this.layer.url.slice();
}
this.imgDiv.className = 'olTileImage';
/* checkImgURL used to be used to called as a work around, but it
ended up hiding problems instead of solving them and broke things
like relative URLs. See discussion on the dev list:
http://openlayers.org/pipermail/dev/2007-January/000205.html
OpenLayers.Event.observe( this.imgDiv, "load",
OpenLayers.Function.bind(this.checkImgURL, this) );
*/
this.frame.style.zIndex = this.isBackBuffer ? 0 : 1;
this.frame.appendChild(this.imgDiv);
this.layer.div.appendChild(this.frame);
if(this.layer.opacity < 1) {
OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, null,
null, null, null,
this.layer.opacity);
}
// we need this reference to check back the viewRequestID
this.imgDiv.map = this.layer.map;
//bind a listener to the onload of the image div so that we
// can register when a tile has finished loading.
var onload = function() {
//normally isLoading should always be true here but there are some
// right funky conditions where loading and then reloading a tile
// with the same url *really*fast*. this check prevents sending
// a 'loadend' if the msg has already been sent
//
if (this.isLoading) {
this.isLoading = false;
this.events.triggerEvent("loadend");
}
};
if (this.layerAlphaHack) {
OpenLayers.Event.observe(this.imgDiv.childNodes[0], 'load',
OpenLayers.Function.bind(onload, this));
} else {
OpenLayers.Event.observe(this.imgDiv, 'load',
OpenLayers.Function.bind(onload, this));
}
// Bind a listener to the onerror of the image div so that we
// can registere when a tile has finished loading with errors.
var onerror = function() {
// If we have gone through all image reload attempts, it is time
// to realize that we are done with this image. Since
// OpenLayers.Util.onImageLoadError already has taken care about
// the error, we can continue as if the image was loaded
// successfully.
if (this.imgDiv._attempts > OpenLayers.IMAGE_RELOAD_ATTEMPTS) {
onload.call(this);
}
};
OpenLayers.Event.observe(this.imgDiv, "error",
OpenLayers.Function.bind(onerror, this));
initImage: function() {
var img = this.imgDiv || this.createImage();
if (this.url && img.getAttribute("src") == this.url) {
this.onImageLoad();
} else {
OpenLayers.Event.observe(
img, "load", OpenLayers.Function.bind(this.onImageLoad, this)
);
OpenLayers.Event.observe(
img, "error", OpenLayers.Function.bind(this.onImageError, this)
);
this.imageReloadAttempts = 0;
this.setImgSrc(this.url);
}
this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
},
/**
* Method: setImgSrc
* Sets the source for the tile image
*
* Parameters:
* url - {String} or undefined to hide the image
*/
setImgSrc: function(url) {
this.imgDiv.style.display = "none";
if (url) {
this.imgDiv.src = url;
}
},
/**
* Method: getTile
* Get the tile's markup.
*
* Returns:
* {DOMElement} The tile's markup
*/
getTile: function() {
return this.frame;
},
/**
* Method: removeImgDiv
* Removes the imgDiv from the DOM and stops listening to events on it.
* Method: createBackBuffer
* Create a copy of this tile's markup for the <layer>'s backBufferDiv
*
* Returns:
* {DOMElement} a clone of the tile content
*/
removeImgDiv: function() {
// unregister the "load" and "error" handlers. Only the "error" handler if
// this.layerAlphaHack is true.
createBackBuffer: function() {
var frame = this.frame.cloneNode(false);
OpenLayers.Event.stopObservingElement(this.imgDiv);
if (this.imgDiv.parentNode == this.frame) {
this.frame.removeChild(this.imgDiv);
this.imgDiv.map = null;
}
this.imgDiv.urls = null;
var child = this.imgDiv.firstChild;
//check for children (alphaHack img or IFrame)
if (child) {
OpenLayers.Event.stopObservingElement(child);
this.imgDiv.removeChild(child);
delete child;
} else {
// abort any currently loading image
this.imgDiv.src = OpenLayers.Util.getImagesLocation() + "blank.gif";
}
frame.appendChild(this.imgDiv);
this.imgDiv = null;
return frame;
},
/**
* Method: checkImgURL
* Make sure that the image that just loaded is the one this tile is meant
* to display, since panning/zooming might have changed the tile's URL in
* the meantime. If the tile URL did change before the image loaded, set
* the imgDiv display to 'none', as either (a) it will be reset to visible
* when the new URL loads in the image, or (b) we don't want to display
* this tile after all because its new bounds are outside our maxExtent.
*
* This function should no longer be neccesary with the improvements to
* Grid.js in OpenLayers 2.3. The lack of a good isEquivilantURL function
* caused problems in 2.2, but it's possible that with the improved
* isEquivilant URL function, this might be neccesary at some point.
*
* See discussion in the thread at
* http://openlayers.org/pipermail/dev/2007-January/000205.html
* Method: onImageLoad
* Handler for the image onload event
*/
checkImgURL: function () {
// Sometimes our image will load after it has already been removed
// from the map, in which case this check is not needed.
if (this.layer) {
var loaded = this.layerAlphaHack ? this.imgDiv.firstChild.src : this.imgDiv.src;
if (!OpenLayers.Util.isEquivalentUrl(loaded, this.url)) {
this.hide();
}
onImageLoad: function() {
var img = this.imgDiv;
img.style.display = "";
this.isLoading = false;
this.events.triggerEvent("loadend");
if (this.layerAlphaHack === true) {
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
img.src + "', sizingMethod='scale')";
}
},
/**
* Method: startTransition
* This method is invoked on tiles that are backBuffers for tiles in the
* grid. The grid tile is about to be cleared and a new tile source
* loaded. This is where the transition effect needs to be started
* to provide visual continuity.
* Method: onImageError
* Handler for the image onerror event
*/
startTransition: function() {
// backBufferTile has to be valid and ready to use
if (!this.backBufferTile || !this.backBufferTile.imgDiv) {
return;
}
// calculate the ratio of change between the current resolution of the
// backBufferTile and the layer. If several animations happen in a
// row, then the backBufferTile will scale itself appropriately for
// each request.
var ratio = 1;
if (this.backBufferTile.resolution) {
ratio = this.backBufferTile.resolution / this.layer.getResolution();
}
// if the ratio is not the same as it was last time (i.e. we are
// zooming), then we need to adjust the backBuffer tile
if (ratio != 1) {
if (this.layer.transitionEffect == 'resize') {
// In this case, we can just immediately resize the
// backBufferTile.
var upperLeft = new OpenLayers.LonLat(
this.backBufferTile.bounds.left,
this.backBufferTile.bounds.top
);
var size = new OpenLayers.Size(
this.backBufferTile.size.w * ratio,
this.backBufferTile.size.h * ratio
);
var px = this.layer.map.getLayerPxFromLonLat(upperLeft);
OpenLayers.Util.modifyDOMElement(this.backBufferTile.frame,
null, px, size);
var imageSize = this.backBufferTile.imageSize;
imageSize = new OpenLayers.Size(imageSize.w * ratio,
imageSize.h * ratio);
var imageOffset = this.backBufferTile.imageOffset;
if(imageOffset) {
imageOffset = new OpenLayers.Pixel(
imageOffset.x * ratio, imageOffset.y * ratio
);
}
OpenLayers.Util.modifyDOMElement(
this.backBufferTile.imgDiv, null, imageOffset, imageSize
) ;
this.backBufferTile.show();
}
} else {
// default effect is just to leave the existing tile
// until the new one loads if this is a singleTile and
// there was no change in resolution. Otherwise we
// don't bother to show the backBufferTile at all
if (this.layer.singleTile) {
this.backBufferTile.show();
onImageError: function() {
var img = this.imgDiv;
if (img.src != null) {
this.imageReloadAttempts++;
if (this.imageReloadAttempts <= OpenLayers.IMAGE_RELOAD_ATTEMPTS) {
this.setImgSrc(this.layer.getURL(this.bounds));
} else {
this.backBufferTile.hide();
OpenLayers.Element.addClass(img, "olImageLoadError");
this.onImageLoad();
}
}
},
},
/**
* Method: show
* Show the tile by showing its frame.
*/
show: function() {
this.frame.style.display = '';
// Force a reflow on gecko based browsers to actually show the element
// before continuing execution.
if (OpenLayers.Util.indexOf(this.layer.SUPPORTED_TRANSITIONS,
this.layer.transitionEffect) != -1) {
if (OpenLayers.IS_GECKO === true) {
this.frame.scrollLeft = this.frame.scrollLeft;
}
}
},
/**
* Method: hide
* Hide the tile by hiding its frame.
*/
hide: function() {
this.frame.style.display = 'none';
},
CLASS_NAME: "OpenLayers.Tile.Image"
}
);
OpenLayers.Tile.Image.useBlankTile = (
OpenLayers.BROWSER_NAME == "safari" ||
OpenLayers.BROWSER_NAME == "opera");
});

282
lib/OpenLayers/Tile/Image/IFrame.js
View File

@@ -14,14 +14,13 @@
* remote services. Images will be loaded using HTTP-POST into an IFrame.
*
* This mixin will be applied to <OpenLayers.Tile.Image> instances
* configured with <OpenLayers.Tile.Image.allowPost> or
* <OpenLayers.Tile.Image.enforcePost> set to true.
* configured with <OpenLayers.Tile.Image.maxGetUrlLength> set.
*
* Inherits from:
* - <OpenLayers.Tile.Image>
*/
OpenLayers.Tile.Image.IFrame = {
/**
* Property: useIFrame
* {Boolean} true if we are currently using an IFrame to render POST
@@ -30,158 +29,110 @@ OpenLayers.Tile.Image.IFrame = {
useIFrame: null,
/**
* Method: clear
* Removes the iframe from DOM (avoids back-button problems).
* Property: blankImageUrl
* {String} This is only used as background image for the eventPane, so we
* don't care that this doesn't actually result in a blank image on all
* browsers
*/
clear: function() {
if (this.useIFrame) {
if (this.imgDiv) {
var iFrame = this.imgDiv.firstChild;
OpenLayers.Event.stopObservingElement(iFrame);
this.imgDiv.removeChild(iFrame);
delete iFrame;
}
} else {
OpenLayers.Tile.Image.prototype.clear.apply(this, arguments);
}
},
blankImageUrl: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAQAIBRAA7",
/**
* Method: renderTile
* Method: updateBackBuffer
* Update the <backBufferData>, and return a new or reposition the
* backBuffer. When a backbuffer is returned, the tile's markup is not
* available any more.
*
* Returns:
* {HTMLDivElement} the tile's markup in a cloned element, or undefined if
* no backbuffer is currently available or needed
*/
renderTile: function() {
if (OpenLayers.Tile.Image.prototype.renderTile.apply(this, arguments) &&
this.useIFrame) {
// create a html form and add it temporary to the layer div
var form = this.createRequestForm();
this.imgDiv.appendChild(form);
// submit the form (means fetching the image)
form.submit();
this.imgDiv.removeChild(form);
delete form;
}
return true;
},
/**
* Method: initImgDiv
* Creates the imgDiv property on the tile.
*/
initImgDiv: function() {
updateBackBuffer: function() {
this.url = this.layer.getURL(this.bounds);
var usedIFrame = this.useIFrame;
this.useIFrame = this.maxGetUrlLength !== null && !this.layer.async &&
this.url.length > this.maxGetUrlLength;
if (this.imgDiv != null) {
var nodeName = this.imgDiv.nodeName.toLowerCase();
if ((this.useIFrame && nodeName == "img") ||
(!this.useIFrame && nodeName == "div")) {
// switch between get and post
this.removeImgDiv();
this.imgDiv = null;
var fromIFrame = usedIFrame && !this.useIFrame;
var toIFrame = !usedIFrame && this.useIFrame;
if (fromIFrame || toIFrame) {
// switch between get (image) and post (iframe)
this.clear();
if (this.imgDiv && this.imgDiv.parentNode === this.frame) {
this.frame.removeChild(this.imgDiv);
}
this.imgDiv = null;
if (fromIFrame) {
// remove eventPane
this.frame.removeChild(this.frame.firstChild);
this.resetBackBuffer();
}
}
if (this.useIFrame) {
if (this.imgDiv == null) {
var eventPane = document.createElement("div");
if(OpenLayers.BROWSER_NAME == "msie") {
// IE cannot handle events on elements without backgroundcolor.
// So we use this little hack to make elements transparent
eventPane.style.backgroundColor = '#FFFFFF';
eventPane.style.filter = 'chroma(color=#FFFFFF)';
}
OpenLayers.Util.modifyDOMElement(eventPane, null,
new OpenLayers.Pixel(0,0), this.layer.getImageSize(), "absolute");
this.imgDiv = document.createElement("div");
this.imgDiv.appendChild(eventPane);
OpenLayers.Util.modifyDOMElement(this.imgDiv, this.id, null,
this.layer.getImageSize(), "relative");
this.imgDiv.className = 'olTileImage';
this.frame.appendChild(this.imgDiv);
this.layer.div.appendChild(this.frame);
if(this.layer.opacity != null) {
OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null,
null, null, null, null,
this.layer.opacity);
}
// we need this reference to check back the viewRequestID
this.imgDiv.map = this.layer.map;
}
this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
} else {
OpenLayers.Tile.Image.prototype.initImgDiv.apply(this, arguments);
if (!this.useIFrame) {
OpenLayers.Tile.Image.prototype.updateBackBuffer.apply(this, arguments);
}
},
/**
* Method: createIFrame
* Create the IFrame which shows the image.
*
* Returns:
* {DOMElement} Iframe
*/
createIFrame: function() {
var id = this.id+'_iFrame';
var iframe;
if(OpenLayers.BROWSER_NAME == "msie") {
// InternetExplorer does not set the name attribute of an iFrame
// properly via DOM manipulation, so we need to do it on our own with
// this hack.
iframe = document.createElement('<iframe name="'+id+'">');
// IFrames in InternetExplorer are not transparent, if you set the
// backgroundColor transparent. This is a workarround to get
// transparent iframes.
iframe.style.backgroundColor = '#FFFFFF';
iframe.style.filter = 'chroma(color=#FFFFFF)';
}
else {
iframe = document.createElement('iframe');
iframe.style.backgroundColor = 'transparent';
// iframe.name needs to be an unique id, otherwise it
// could happen that other iframes are overwritten.
iframe.name = id;
}
iframe.id = id;
// some special properties to avoid scaling the images and scrollbars
// in the iframe
iframe.scrolling = 'no';
iframe.marginWidth = '0px';
iframe.marginHeight = '0px';
iframe.frameBorder = '0';
OpenLayers.Util.modifyDOMElement(iframe, id,
new OpenLayers.Pixel(0,0), this.layer.getImageSize(), "absolute");
//bind a listener to the onload of the iframe so that we
// can register when a tile has finished loading.
var onload = function() {
//normally isLoading should always be true here but there are some
// right funky conditions where loading and then reloading a tile
// with the same url *really*fast*. this check prevents sending
// a 'loadend' if the msg has already been sent
//
if (this.isLoading) {
this.isLoading = false;
this.events.triggerEvent("loadend");
}
};
OpenLayers.Event.observe(iframe, 'load',
OpenLayers.Function.bind(onload, this));
return iframe;
},
/**
* Method: createImage
* Creates the content for the frame on the tile.
*/
createImage: function() {
if (this.useIFrame === true) {
if (!this.frame.childNodes.length) {
var eventPane = document.createElement("div"),
style = eventPane.style;
style.position = "absolute";
style.width = "100%";
style.height = "100%";
style.zIndex = 1;
style.backgroundImage = "url(" + this.blankImageUrl + ")";
this.frame.appendChild(eventPane);
}
var id = this.id + '_iFrame', iframe;
if (parseFloat(navigator.appVersion.split("MSIE")[1]) < 9) {
// Older IE versions do not set the name attribute of an iFrame
// properly via DOM manipulation, so we need to do it on our own with
// this hack.
iframe = document.createElement('<iframe name="'+id+'">');
// IFrames in older IE versions are not transparent, if you set
// the backgroundColor transparent. This is a workaround to get
// transparent iframes.
iframe.style.backgroundColor = '#FFFFFF';
iframe.style.filter = 'chroma(color=#FFFFFF)';
}
else {
iframe = document.createElement('iframe');
iframe.style.backgroundColor = 'transparent';
// iframe.name needs to be an unique id, otherwise it
// could happen that other iframes are overwritten.
iframe.name = id;
}
// some special properties to avoid scaling the images and scrollbars
// in the iframe
iframe.scrolling = 'no';
iframe.marginWidth = '0px';
iframe.marginHeight = '0px';
iframe.frameBorder = '0';
iframe.style.position = "absolute";
iframe.style.width = "100%";
iframe.style.height = "100%";
if (this.layer.opacity < 1) {
OpenLayers.Util.modifyDOMElement(iframe, null, null, null,
null, null, null, this.layer.opacity);
}
this.frame.appendChild(iframe);
this.imgDiv = iframe;
return iframe;
} else {
return OpenLayers.Tile.Image.prototype.createImage.apply(this, arguments);
}
},
/**
* Method: createRequestForm
* Create the html <form> element with width, height, bbox and all
@@ -198,20 +149,16 @@ OpenLayers.Tile.Image.IFrame = {
var cacheId = this.layer.params["_OLSALT"];
cacheId = (cacheId ? cacheId + "_" : "") + this.bounds.toBBOX();
form.action = OpenLayers.Util.urlAppend(this.layer.url, cacheId);
// insert the iframe, which has been removed to avoid back-button
// problems
this.imgDiv.insertBefore(this.createIFrame(), this.imgDiv.firstChild);
form.target = this.id+'_iFrame';
form.target = this.id + '_iFrame';
// adding all parameters in layer params as hidden fields to the html
// form element
var imageSize = this.layer.getImageSize();
var params = OpenLayers.Util.getParameters(this.url);
var imageSize = this.layer.getImageSize(),
params = OpenLayers.Util.getParameters(this.url),
field;
for(var par in params) {
var field = document.createElement('input');
field = document.createElement('input');
field.type = 'hidden';
field.name = par;
field.value = params[par];
@@ -219,6 +166,31 @@ OpenLayers.Tile.Image.IFrame = {
}
return form;
}
};
},
/**
* Method: setImgSrc
* Sets the source for the tile image
*
* Parameters:
* url - {String}
*/
setImgSrc: function(url) {
if (this.useIFrame === true) {
if (url) {
var form = this.createRequestForm();
this.frame.appendChild(this.imgDiv);
this.frame.appendChild(form);
form.submit();
this.frame.removeChild(form);
} else if (this.imgDiv.parentNode === this.frame) {
// we don't reuse iframes to avoid caching issues
this.frame.removeChild(this.imgDiv);
this.imgDiv = null;
}
} else {
OpenLayers.Tile.Image.prototype.setImgSrc.apply(this, arguments);
}
}
};

5
tests/Layer/WMS/Post.html
View File

@@ -73,8 +73,9 @@
});
map.addLayer(layer);
var tile2 = layer.addTile(bounds, pixel);
t.ok(
tile2.createIFrame,
tile2.draw();
t.eq(
tile2.useIFrame, true,
"supported browser: tile is created with the Tile.Image.IFrame mixin");
map.destroy();
}

26
tests/Tile.html
View File

@@ -31,32 +31,6 @@
t.ok( tile.events != null, "tile's events intitialized");
}
function test_Tile_clone (t) {
t.plan( 10 );
var layer = {}; // bogus layer
var position = new OpenLayers.Pixel(10,20);
var bounds = new OpenLayers.Bounds(1,2,3,4);
var url = "bobob";
var size = new OpenLayers.Size(5,6);
tile = new OpenLayers.Tile(layer, position, bounds, url, size);
var clone = tile.clone();
t.ok( clone instanceof OpenLayers.Tile, "OpenLayers.Tile.clone returns Tile object" );
t.eq( clone.layer, layer, "clone.layer set correctly");
t.ok( clone.position.equals(position), "clone.position set correctly");
t.ok( clone.bounds.equals(bounds), "clone.bounds set correctly");
t.eq( clone.url, url, "clone.url set correctly");
t.ok( clone.size.equals(size), "clone.size is set correctly" );
t.ok( clone.id != null, "clone is given an id");
t.ok( clone.id != tile.id, "clone is given a new id");
t.ok(OpenLayers.String.startsWith(clone.id, "Tile_"),
"clone's id starts correctly");
t.ok( clone.events != null, "clone's events intitialized");
}
function test_Tile_destroy(t) {
t.plan( 6 );

114
tests/Tile/BackBufferable.html Normal file
View File

@@ -0,0 +1,114 @@
<html>
<head>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
var tile;
var layer = new OpenLayers.Layer.WMS(
"WMS",
window.location.href + "#",
null,
{transitionEffect: "resize"});
var position = new OpenLayers.Pixel(20,30);
var bounds = new OpenLayers.Bounds(1,2,3,4);
function test_initialize (t) {
t.plan(2);
tile = new OpenLayers.Tile.Image(layer, position, bounds, null);
t.eq(tile.backBufferData, {}, "back buffer data initialized");
t.eq(tile.size.w, 256, "size object with default width created");
}
function test_backBufferMode(t) {
t.plan(4);
var l;
l = new OpenLayers.Layer.WMS('', window.location.href + '#');
tile = new OpenLayers.Tile.Image(l, position, bounds, null);
t.eq(tile.backBufferMode, 0,
'backBufferMode correctly set [tiled]');
l = new OpenLayers.Layer.WMS('', window.location.href + '#',
null, {singleTile: true});
tile = new OpenLayers.Tile.Image(l, position, bounds, null);
t.eq(tile.backBufferMode, 1,
'backBufferMode correctly set [singleTile]');
l = new OpenLayers.Layer.WMS('', window.location.href + '#',
null, {transitionEffect: 'resize'});
tile = new OpenLayers.Tile.Image(l, position, bounds, null);
t.eq(tile.backBufferMode, 2,
'backBufferMode correctly set [tiled, transition]');
l = new OpenLayers.Layer.WMS('', window.location.href + '#',
null, {singleTile: true,
transitionEffect: 'resize'});
tile = new OpenLayers.Tile.Image(l, position, bounds, null);
t.eq(tile.backBufferMode, 3,
'backBufferMode correctly set [singleTile, transition]');
}
function test_setBackBufferData(t) {
t.plan(2);
var map = new OpenLayers.Map("map");
map.addLayer(layer);
map.zoomToMaxExtent();
tile = new OpenLayers.Tile.Image(layer, position, bounds, null);
tile.draw();
// moveTo calls setBackBufferData
tile.moveTo(new OpenLayers.Bounds(1,2,3,4),
new OpenLayers.Pixel(30,40), true);
t.eq(tile.backBufferData.bounds.toString(), bounds.toString(),
"bounds stored correctly");
t.eq(tile.backBufferData.resolution, map.getResolution(),
"resolution stored correctly");
map.removeLayer(layer);
map.destroy();
}
function test_updateBackBuffer(t) {
t.plan(1);
var map = new OpenLayers.Map("map");
map.addLayer(layer);
map.zoomToMaxExtent();
tile = new OpenLayers.Tile.Image(layer, position, bounds, null);
tile.draw();
tile.isLoading = false;
map.zoomIn();
tile.updateBackBuffer();
t.eq(tile.backBufferData.tile.style.width, (layer.tileSize.w*2)+"px",
"backBuffer frame correctly resized");
map.removeLayer(layer);
map.destroy();
}
function test_removeBackBuffer(t) {
t.plan(2);
var map = new OpenLayers.Map("map");
map.addLayer(layer);
map.zoomToMaxExtent();
tile = new OpenLayers.Tile.Image(layer, position, bounds, null);
tile.draw();
tile.isLoading = false;
map.zoomIn();
tile.updateBackBuffer();
var backBuffer = tile.backBufferData.tile;
tile.removeBackBuffer();
t.eq(tile.backBufferData.tile, null,
"backBuffer reference removed");
t.ok(backBuffer.parentNode !== layer.div,
"backBuffer removed from layer");
map.removeLayer(layer);
map.destroy();
}
</script>
</head>
<body>
<div id="map" style="height:550px;width:500px"></div>
</body>
</html>

65
tests/Tile/Image.html
View File

@@ -62,38 +62,16 @@
map.destroy();
}
function test_Tile_Image_clone (t) {
t.plan( 9 );
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
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);
tile.imgDiv = {};
var clone = tile.clone();
t.ok( clone instanceof OpenLayers.Tile.Image, "OpenLayers.Tile.clone returns Tile.Image object" );
t.ok( clone.layer == layer, "clone.layer is set correctly");
t.ok( clone.position.equals(position), "clone.position is set correctly");
t.ok( clone.bounds.equals(bounds), "clone.bounds is set correctly");
t.eq( clone.url, url, "clone.url is set correctly");
t.ok( clone.size.equals(size), "clone.size is set correctly");
t.ok( clone.frame, "clone has a frame");
t.ok( clone.frame != tile.frame, "clone's frame is a new one");
t.ok( clone.imgDiv == null, "clone's imgDiv was not copied");
}
function test_Tile_Image_IFrame_viewRequestID (t) {
t.plan( 2 );
function test_Tile_Image_async (t) {
t.plan( 3 );
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS(
"Name",
"http://labs.metacarta.com/TESTURL?",
{layers: 'basic'}
{layers: 'basic'}, {async: true, getURLasync: function(bounds, scope, url, callback) {
scope.url = this.getURL(bounds);
callback.call(scope);
}}
);
map.addLayer(layer);
@@ -101,10 +79,10 @@
var bounds = new OpenLayers.Bounds(1,2,3,4);
tile = layer.addTile(bounds, position);
tile.renderTile();
t.eq(tile.imgDiv.viewRequestID, map.viewRequestID, "viewRequestID correct after renderTile");
map.viewRequestID++;
t.eq(tile.imgDiv.src, layer.getURL(bounds), "image src correct for async request");
t.eq(tile.asyncRequestId, 1, "asyncRequestId correct after renderTile");
tile.renderTile();
t.eq(tile.imgDiv.viewRequestID, map.viewRequestID, "viewRequestID correct after subsequent renderTile");
t.eq(tile.asyncRequestId, 2, "asyncRequestId correct after subsequent renderTile");
tile.destroy();
layer.destroy();
map.destroy();
@@ -156,8 +134,8 @@
t.eq( img.src,
"http://labs.metacarta.com/TESTURL?" + OpenLayers.Util.getParameterString(tParams),
"tile.draw creates an image");
t.eq( tile.imgDiv.style.width, "5px", "Image width is correct" );
t.eq( tile.imgDiv.style.height, "6px", "Image height is correct" );
t.eq( tile.imgDiv.style.width, "100%", "Image width is correct" );
t.eq( tile.imgDiv.style.height, "100%", "Image height is correct" );
// this should trigger a "reload" event (since the image never actually
// loads in tests)
@@ -260,14 +238,14 @@
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true);
t.delay_call( 1, function() { t.eq(tile.imgDiv, null, "Tile imgDiv is null.") } );
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Tile image is invisible.") } );
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {'reproject': true, 'alpha':true});
map.addLayer(layer);
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true)
t.delay_call( 1, function() { t.eq(tile.imgDiv, null, "Alpha tile imgDiv is null.") } );
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Alpha tile image is invisible.") } );
}
@@ -316,6 +294,23 @@
map.destroy();
}
function test_createBackBuffer(t) {
t.plan(3);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0,0), 5);
var tile = layer.grid[0][0];
var img = tile.imgDiv;
var backBuffer = tile.createBackBuffer();
t.eq(backBuffer.style.left, tile.frame.style.left, "backBuffer tile has same left style as frame");
t.ok(backBuffer.firstChild === img, "image appended to backBuffer");
t.ok(tile.imgDiv == null, "image reference removed from tile");
map.destroy();
}
</script>
</head>
<body>

90
tests/Tile/Image/IFrame.html
View File

@@ -15,26 +15,29 @@
var wmsUrl = "http://labs.metacarta.com/wms/vmap0?";
function test_Tile_Image_IFrame_create (t) {
t.plan( 3 );
t.plan( 5 );
map = new OpenLayers.Map('map');
var bar = new Array(205).join("1234567890");
layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic', foo: bar}, {tileOptions: {maxGetUrlLength: 2048}});
layer = new OpenLayers.Layer.WMS(name, wmsUrl,
{layers: 'basic', foo: bar},
{tileOptions: {maxGetUrlLength: 2048},
transitionEffect: 'resize'});
map.addLayer(layer);
var tile = layer.addTile(bounds, position);
tile.renderTile();
tile.positionImage();
t.eq(tile.imgDiv.firstChild.nodeName.toLowerCase(), "iframe", "IFrame used for long URL");
t.eq(tile.backBufferMode, 2, "backBufferMode is 2 after tile creation");
tile.draw();
t.eq(tile.imgDiv.nodeName.toLowerCase(), "iframe", "IFrame used for long URL");
layer.mergeNewParams({foo: null});
tile.renderTile();
tile.positionImage();
tile.draw();
t.eq(tile.imgDiv.nodeName.toLowerCase(), "img", "IMG used for short URL");
t.eq(tile.backBufferMode, 2, "backBufferMode reset to 2");
tile.maxGetUrlLength = 0;
tile.renderTile();
tile.positionImage();
t.eq(tile.imgDiv.firstChild.nodeName.toLowerCase(), "iframe", "IFrame used when maxGetUrlLength is 0");
tile.draw();
t.eq(tile.imgDiv.nodeName.toLowerCase(), "iframe", "IFrame used when maxGetUrlLength is 0");
tile.destroy();
layer.destroy();
@@ -52,22 +55,22 @@
tile.clear();
t.eq(
tile.imgDiv.firstChild.nodeName.toLowerCase(), "div",
"IFrame successfully removed from DOM");
tile.frame.getElementsByTagName("iframe").length, 0,
"IFrame removed on clear()");
tile.destroy();
layer.destroy();
map.destroy();
}
function test_Tile_Image_IFrame_initImgDiv (t) {
t.plan( 4 );
function test_Tile_Image_IFrame_initImage (t) {
t.plan( 2 );
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}});
map.addLayer(layer);
tile = layer.addTile(bounds, position);
tile.url = layer.getURL(bounds);
tile.initImgDiv();
tile.initImage();
if(isMozilla) {
t.ok( tile.imgDiv instanceof HTMLElement, "tile.iFrame successfully created.");
@@ -75,63 +78,41 @@
else {
t.ok( tile.imgDiv != null, "tile.iFrame successfully created.");
}
t.eq( tile.imgDiv.id, tile.id, "imgDiv id correctly set.");
t.eq( tile.imgDiv.className, "olTileImage", "iFrame's className correctly set.");
t.ok( tile.imgDiv.map == map, "map correctly added to iFrame.");
map.destroy();
}
function test_Tile_Image_IFrame_createImgDiv (t) {
t.plan( 3 );
function test_Tile_Image_IFrame_createImage (t) {
t.plan( 9 );
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}});
map.addLayer(layer);
var tile = layer.addTile(bounds, position);
tile.renderTile();
var imgDiv = tile.imgDiv;
var iFrame = imgDiv.firstChild;
var eventPane = imgDiv.childNodes[1];
tile.draw();
var iFrame = tile.imgDiv;
var eventPane = tile.frame.childNodes[0];
t.ok(OpenLayers.String.contains(eventPane.style.backgroundImage,
tile.blankImageUrl),
"backgroundImage of eventPane is set.");
t.eq(parseInt(eventPane.style.zIndex, 10), 1, "zIndex of eventPane is set.");
if(isIE) {
t.ok(iFrame != null, "IFrame successfully created.");
t.eq(eventPane.style.backgroundColor, '#ffffff', "backgroundColor of overlay pane is set in InternetExplorer.");
t.eq(eventPane.style.filter, 'chroma(color=#FFFFFF)', "filter of overlay pane is set in InternetExplorer.");
}
else {
t.ok(iFrame instanceof HTMLElement, "IFrame successfully created.");
t.ok(true, 'Skip eventPane backgroundColor test outside IE');
t.ok(true, 'Skip eventPane filter test outside IE');
}
map.destroy();
}
function test_Tile_Image_IFrame_createIFrame (t) {
t.plan( 8 );
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}});
map.addLayer(layer);
var tile = layer.addTile(bounds, position);
var iFrame = tile.createIFrame();
var id = tile.id+'_iFrame';
t.eq(iFrame.id, id, "iframe id correctly set.");
t.eq(iFrame.name, id, "iframe name correctly set.");
if(isIE) {
t.eq(iFrame.style.backgroundColor, '#ffffff', "backgroundColor correctly set.");
t.eq(iFrame.style.filter, 'chroma(color=#FFFFFF)', "filter correctly set.");
}
else {
t.eq(iFrame.style.backgroundColor, 'transparent', "backgroundColor correctly set.");
t.ok(true, "Skip filter test outside InternetExplorer.");
} else {
t.ok(iFrame instanceof HTMLElement, "IFrame successfully created.");
t.ok(true, 'Skip IFrame backgroundColor test outside IE');
t.ok(true, 'Skip IFrame filter test outside IE');
}
t.eq( iFrame.scrolling, 'no', "no scrolling");
t.eq( parseFloat(iFrame.marginWidth), 0, "no margin width");
t.eq( parseFloat(iFrame.marginHeight), 0, "no margin height");
t.eq( parseFloat(iFrame.frameBorder), 0, "no iframe border");
map.destroy();
}
function test_Tile_Image_IFrame_createRequestForm (t) {
@@ -152,7 +133,7 @@
map.addLayer(newLayer);
tile = newLayer.addTile(bounds, position);
tile.url = newLayer.getURL(bounds);
tile.initImgDiv();
tile.initImage();
tile.url = newLayer.getURL(bounds);
var form = tile.createRequestForm();
@@ -182,9 +163,10 @@
tile.draw();
tile.clear();
tile.initImage();
tile.createRequestForm();
t.ok(
tile.imgDiv.firstChild.nodeName == "IFRAME",
tile.imgDiv.nodeName == "IFRAME",
"Iframe has been reinserted properly"
);

1
tests/list-tests.html
View File

@@ -226,6 +226,7 @@
<li>Tile.html</li>
<li>Tile/Google.html</li>
<li>Tile/Image.html</li>
<li>Tile/BackBufferable.html</li>
<li>Tile/Image/IFrame.html</li>
<li>Tile/WFS.html</li>
<li>Tween.html</li>

2
tests/run-tests.html
View File

@@ -1102,7 +1102,7 @@ Test.AnotherWay._delay_continue_action=function( test_object, milliseconds_passe
if( finished ) {
try {
action.call_fn();
}catch( e ) {
}catch( e ) {
Test.AnotherWay._handle_exception( test_object, e, "in delay_call" );
}
}