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

Made Tile.Image.IFrame an addin which will be used only if a layer is configured with the maxGetUrlLength option. This deprecates Layer.WMS.Post. r=tschaub (closes #2824)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10755 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2010-09-16 21:54:22 +00:00
parent 1284b71bbc
commit ce90aebfd0
11 changed files with 300 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/WMSPost.html
View File

@@ -161,6 +161,8 @@
<div id="map" style="width: 512; height: 256; border: 1px solid red;"></div> <div id="map" style="width: 512; height: 256; border: 1px solid red;"></div>
<div id="docs"> <div id="docs">
<p><b>Deprecated.</b> See <a href="wms-long-url.html">wms-long-url.html</a>
for the recommended way to avoid long URLs.</p><p>
This example uses a large SLD created on the client side to style a WMS This example uses a large SLD created on the client side to style a WMS
layer. This example uses a WMS.Post layer which transfers data via the layer. This example uses a WMS.Post layer which transfers data via the
HTTP-POST protocol. <br> HTTP-POST protocol. <br>
@@ -171,7 +173,7 @@
instead. The default setting (["mozilla", "firefox", "opera"]) instead. The default setting (["mozilla", "firefox", "opera"])
excludes problematic browsers without removing the ability to use long excludes problematic browsers without removing the ability to use long
request parameters, because all these browsers support long urls via request parameters, because all these browsers support long urls via
GET. GET.</p>
</div> </div>
</body> </body>
</html> </html>

41
examples/wms-long-url.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>WMS with POST Requests to Avoid Long URLs</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1 id="title">WMS with POST Requests to Avoid Long URLs</h1>
<div id="tags">
sld, sld_body, post, iframe, advanced
</div>
<div id="shortdesc">Render tiles in IMG or IFRAME elements, depending on
the complexity of the GetMap request</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>The <code>maxGetUrlLength</code> property of the layer's
<code>tileOptions</code> option causes tiles to be requested using
HTTP POST when the length of the GET url would exceed the specified
length (2048 characters is recommended). In real life applications,
this happens often when using the SLD_BODY request parameter for
inline styling.
</p><p>
<input type="radio" name="group" id="longurl" checked="checked">
Long URL - POST requests
<br>
<input type="radio" name="group" id="shorturl">
Short URL - GET requests
</p><p>
View the <a href="wms-long-url.js" target="_blank">wms-long-url.js</a>
source to see how this is done.
</p>
</div>
<script src="../lib/OpenLayers.js"></script>
<script src="wms-long-url.js"></script>
</body>
</html>

19
examples/wms-long-url.js Normal file
View File

@@ -0,0 +1,19 @@
// a long text that we set as dummy param (makeTheUrlLong) to make the url long
var longText = new Array(205).join("1234567890");
var map = new OpenLayers.Map( 'map' );
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic', makeTheUrlLong: longText},
{tileOptions: {maxGetUrlLength: 2048}}
);
map.addLayer(layer);
map.zoomToMaxExtent();
// add behavior to dom elements
document.getElementById("longurl").onclick = function() {
layer.mergeNewParams({makeTheUrlLong: longText})
}
document.getElementById("shorturl").onclick = function() {
layer.mergeNewParams({makeTheUrlLong: null})
}

6
lib/OpenLayers/Layer/Grid.js
View File

@@ -25,6 +25,12 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/ */
tileSize: null, tileSize: null,
/** APIProperty: tileOptions
* {Object} optional configuration options for <OpenLayers.Tile> instances
* created by this Layer, if supported by the tile class.
*/
tileOptions: null,
/** /**
* Property: grid * Property: grid
* {Array(Array(<OpenLayers.Tile>))} This is an array of rows, each row is * {Array(Array(<OpenLayers.Tile>))} This is an array of rows, each row is

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

@@ -215,7 +215,7 @@ OpenLayers.Layer.WMS = OpenLayers.Class(OpenLayers.Layer.Grid, {
*/ */
addTile:function(bounds,position) { addTile:function(bounds,position) {
return new OpenLayers.Tile.Image(this, position, bounds, return new OpenLayers.Tile.Image(this, position, bounds,
null, this.tileSize); null, this.tileSize, this.tileOptions);
}, },
/** /**

28
lib/OpenLayers/Layer/WMS/Post.js
View File

@@ -15,17 +15,15 @@
* Web Mapping Services via HTTP-POST (application/x-www-form-urlencoded). * Web Mapping Services via HTTP-POST (application/x-www-form-urlencoded).
* Create a new WMS layer with the <OpenLayers.Layer.WMS.Post> constructor. * Create a new WMS layer with the <OpenLayers.Layer.WMS.Post> constructor.
* *
* *Deprecated*. Instead of this layer, use <OpenLayers.Layer.WMS> with
* <OpenLayers.Tile.Image.maxGetUrlLength> configured in the layer's
* <OpenLayers.Layer.WMS.tileOptions>.
*
* Inherits from: * Inherits from:
* - <OpenLayers.Layer.WMS> * - <OpenLayers.Layer.WMS>
*/ */
OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, { OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, {
/**
* Property: tileClass
* {Object} Class, used to create tiles.
*/
tileClass: null,
/** /**
* APIProperty: unsupportedBrowsers * APIProperty: unsupportedBrowsers
* {Array} Array with browsers, which should use the HTTP-GET protocol * {Array} Array with browsers, which should use the HTTP-GET protocol
@@ -47,6 +45,12 @@ OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, {
*/ */
SUPPORTED_TRANSITIONS: [], SUPPORTED_TRANSITIONS: [],
/**
* Property: usePost
* {Boolean}
*/
usePost: null,
/** /**
* Constructor: OpenLayers.Layer.WMS.Post * Constructor: OpenLayers.Layer.WMS.Post
* Creates a new WMS layer object. * Creates a new WMS layer object.
@@ -72,10 +76,8 @@ OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, {
newArguments.push(name, url, params, options); newArguments.push(name, url, params, options);
OpenLayers.Layer.WMS.prototype.initialize.apply(this, newArguments); OpenLayers.Layer.WMS.prototype.initialize.apply(this, newArguments);
this.tileClass = OpenLayers.Util.indexOf( this.usePost = OpenLayers.Util.indexOf(
this.unsupportedBrowsers, OpenLayers.Util.getBrowserName()) != -1 this.unsupportedBrowsers, OpenLayers.Util.getBrowserName()) == -1;
? OpenLayers.Tile.Image
: OpenLayers.Tile.Image.IFrame;
}, },
/** /**
@@ -91,8 +93,10 @@ OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, {
* {<OpenLayers.Tile.Image.IFrame>} The added OpenLayers.Tile.Image.IFrame * {<OpenLayers.Tile.Image.IFrame>} The added OpenLayers.Tile.Image.IFrame
*/ */
addTile: function(bounds,position) { addTile: function(bounds,position) {
return new this.tileClass( return new OpenLayers.Tile.Image(
this, position, bounds, null, this.tileSize); this, position, bounds, null, this.tileSize, {
maxGetUrlLength: this.usePost ? 0 : null
});
}, },
CLASS_NAME: 'OpenLayers.Layer.WMS.Post' CLASS_NAME: 'OpenLayers.Layer.WMS.Post'

5
lib/OpenLayers/Tile.js
View File

@@ -94,8 +94,9 @@ OpenLayers.Tile = OpenLayers.Class({
* bounds - {<OpenLayers.Bounds>} * bounds - {<OpenLayers.Bounds>}
* url - {<String>} * url - {<String>}
* size - {<OpenLayers.Size>} * size - {<OpenLayers.Size>}
* options - {Object}
*/ */
initialize: function(layer, position, bounds, url, size) { initialize: function(layer, position, bounds, url, size, options) {
this.layer = layer; this.layer = layer;
this.position = position.clone(); this.position = position.clone();
this.bounds = bounds.clone(); this.bounds = bounds.clone();
@@ -106,6 +107,8 @@ OpenLayers.Tile = OpenLayers.Class({
this.id = OpenLayers.Util.createUniqueID("Tile_"); this.id = OpenLayers.Util.createUniqueID("Tile_");
this.events = new OpenLayers.Events(this, null, this.EVENT_TYPES); this.events = new OpenLayers.Events(this, null, this.EVENT_TYPES);
OpenLayers.Util.extend(this, options);
}, },
/** /**

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

@@ -77,6 +77,23 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
*/ */
backBufferTile: null, backBufferTile: null,
/**
* APIProperty: maxGetUrlLength
* {Number} If set, requests that would result in GET urls with more
* characters than the number provided will be made using form-encoded
* HTTP POST. It is good practice to avoid urls that are longer than 2048
* 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.
*/
maxGetUrlLength: null,
/** TBD 3.0 - reorder the parameters to the init function to remove /** TBD 3.0 - reorder the parameters to the init function to remove
* URL. the getUrl() function on the layer gets called on * URL. the getUrl() function on the layer gets called on
* each draw(), so no need to specify it here. * each draw(), so no need to specify it here.
@@ -90,9 +107,14 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* bounds - {<OpenLayers.Bounds>} * bounds - {<OpenLayers.Bounds>}
* url - {<String>} Deprecated. Remove me in 3.0. * url - {<String>} Deprecated. Remove me in 3.0.
* size - {<OpenLayers.Size>} * size - {<OpenLayers.Size>}
* options - {Object}
*/ */
initialize: function(layer, position, bounds, url, size) { initialize: function(layer, position, bounds, url, size, options) {
OpenLayers.Tile.prototype.initialize.apply(this, arguments); options = options || {};
if (options.maxGetUrlLength !== null) {
OpenLayers.Util.applyDefaults(options, OpenLayers.Tile.Image.IFrame);
}
OpenLayers.Tile.prototype.initialize.apply(this, [layer, position, bounds, url, size, options]);
this.url = url; //deprecated remove me this.url = url; //deprecated remove me
@@ -109,22 +131,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
*/ */
destroy: function() { destroy: function() {
if (this.imgDiv != null) { if (this.imgDiv != null) {
if (this.layerAlphaHack) { this.removeImgDiv();
// unregister the "load" handler
OpenLayers.Event.stopObservingElement(this.imgDiv.childNodes[0]);
}
// unregister the "load" and "error" handlers. Only the "error" handler if
// this.layerAlphaHack is true.
OpenLayers.Event.stopObservingElement(this.imgDiv);
if (this.imgDiv.parentNode == this.frame) {
this.frame.removeChild(this.imgDiv);
this.imgDiv.map = null;
}
this.imgDiv.urls = null;
// abort any currently loading image
this.imgDiv.src = OpenLayers.Util.getImagesLocation() + "blank.gif";
} }
this.imgDiv = null; this.imgDiv = null;
if ((this.frame != null) && (this.frame.parentNode == this.layer.div)) { if ((this.frame != null) && (this.frame.parentNode == this.layer.div)) {
@@ -281,13 +288,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* position it correctly, and set its url. * position it correctly, and set its url.
*/ */
renderTile: function() { renderTile: function() {
if (this.imgDiv == null) {
this.initImgDiv();
}
this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
if (this.layer.async) { if (this.layer.async) {
this.initImgDiv();
// Asyncronous image requests call the asynchronous getURL method // Asyncronous image requests call the asynchronous getURL method
// on the layer to fetch an image that covers 'this.bounds', in the scope of // 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 // 'this', setting the 'url' property of the layer itself, and running
@@ -297,13 +299,10 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
// syncronous image requests get the url and position the frame immediately, // syncronous image requests get the url and position the frame immediately,
// and don't wait for an image request to come back. // and don't wait for an image request to come back.
// needed for changing to a different server for onload error
if (this.layer.url instanceof Array) {
this.imgDiv.urls = this.layer.url.slice();
}
this.url = this.layer.getURL(this.bounds); this.url = this.layer.getURL(this.bounds);
this.initImgDiv();
// position the frame immediately // position the frame immediately
this.positionImage(); this.positionImage();
} }
@@ -356,7 +355,9 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* Creates the imgDiv property on the tile. * Creates the imgDiv property on the tile.
*/ */
initImgDiv: function() { initImgDiv: function() {
if (this.imgDiv) {
return;
}
var offset = this.layer.imageOffset; var offset = this.layer.imageOffset;
var size = this.layer.getImageSize(this.bounds); var size = this.layer.getImageSize(this.bounds);
@@ -381,6 +382,11 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
true); true);
} }
// needed for changing to a different server for onload error
if (this.layer.url instanceof Array) {
this.imgDiv.urls = this.layer.url.slice();
}
this.imgDiv.className = 'olTileImage'; this.imgDiv.className = 'olTileImage';
/* checkImgURL used to be used to called as a work around, but it /* checkImgURL used to be used to called as a work around, but it
@@ -444,6 +450,35 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
}; };
OpenLayers.Event.observe(this.imgDiv, "error", OpenLayers.Event.observe(this.imgDiv, "error",
OpenLayers.Function.bind(onerror, this)); OpenLayers.Function.bind(onerror, this));
this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
},
/**
* Method: removeImgDiv
* Removes the imgDiv from the DOM and stops listening to events on it.
*/
removeImgDiv: function() {
// unregister the "load" and "error" handlers. Only the "error" handler if
// this.layerAlphaHack is true.
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";
}
}, },
/** /**

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

@@ -9,87 +9,49 @@
*/ */
/** /**
* Class: OpenLayers.Tile.Image.IFrame * Constant: OpenLayers.Tile.Image.IFrame
* Instances of OpenLayers.Tile.Image.IFrame are used to manage the image tiles * Mixin for tiles that use form-encoded POST requests to get images from
* used by Layer.WMS.Post loaded via HTTP-POST-protocol. Create a new image * remote services. Images will be loaded using HTTP-POST into an IFrame.
* tile with the <OpenLayers.Tile.Image.IFrame> constructor. *
* This mixin will be applied to <OpenLayers.Tile.Image> instances
* configured with <OpenLayers.Tile.Image.allowPost> or
* <OpenLayers.Tile.Image.enforcePost> set to true.
* *
* Inherits from: * Inherits from:
* - <OpenLayers.Tile.Image> * - <OpenLayers.Tile.Image>
*/ */
OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, { OpenLayers.Tile.Image.IFrame = {
/** /**
* Property: layerAlphaHack * Property: useIFrame
* {Boolean} Always false for an instance. * {Boolean} true if we are currently using an IFrame to render POST
* responses, false if we are using an img element to render GET responses.
*/ */
useIFrame: null,
/**
* Constructor: OpenLayers.Tile.Image.IFrame
* Constructor for a new <OpenLayers.Tile.Image.IFrame> instance.
*
* Parameters:
* layer - {<OpenLayers.Layer>} layer that the tile will go in.
* position - {<OpenLayers.Pixel>}
* bounds - {<OpenLayers.Bounds>}
* size - {<OpenLayers.Size>}
*/
initialize: function(layer, position, bounds, url, size) {
OpenLayers.Tile.Image.prototype.initialize.apply(this, arguments);
this.layerAlphaHack = false;
},
/**
* Method: destroy
* nullify references to prevent circular references and memory leaks
*/
destroy: function() {
if(this.imgDiv != null) {
// unregister the "load" handler
OpenLayers.Event.stopObservingElement(this.imgDiv.firstChild);
}
OpenLayers.Tile.Image.prototype.destroy.apply(this, arguments);
},
/** /**
* Method: clear * Method: clear
* Removes the iframe from DOM (avoids back-button problems). * Removes the iframe from DOM (avoids back-button problems).
*/ */
clear: function() { clear: function() {
if (this.useIFrame) {
if (this.imgDiv) { if (this.imgDiv) {
var iFrame = this.imgDiv.firstChild; var iFrame = this.imgDiv.firstChild;
OpenLayers.Event.stopObservingElement(iFrame); OpenLayers.Event.stopObservingElement(iFrame);
this.imgDiv.removeChild(iFrame); this.imgDiv.removeChild(iFrame);
delete iFrame;
} }
}, } else {
OpenLayers.Tile.Image.prototype.clear.apply(this, arguments)
/**
* Method: clone
*
* Parameters:
* obj - {<OpenLayers.Tile.Image.IFrame>} The tile to be cloned
*
* Returns:
* {<OpenLayers.Tile.Image.IFrame>} An exact clone of this
* <OpenLayers.Tile.Image.IFrame>
*/
clone: function (obj) {
if (obj == null) {
obj = new OpenLayers.Tile.Image.IFrame(
this.layer, this.position, this.bounds, this.url, this.size);
} }
//pick up properties from superclass
obj = OpenLayers.Tile.Image.prototype.clone.apply(this, [obj]);
return obj;
}, },
/** /**
* Method: renderTile * Method: renderTile
*/ */
renderTile: function() { renderTile: function() {
if(OpenLayers.Tile.Image.prototype.renderTile.apply(this, arguments)) { if (OpenLayers.Tile.Image.prototype.renderTile.apply(this, arguments) &&
this.useIFrame) {
// create a html form and add it temporary to the layer div // create a html form and add it temporary to the layer div
var form = this.createRequestForm(); var form = this.createRequestForm();
this.imgDiv.appendChild(form); this.imgDiv.appendChild(form);
@@ -97,7 +59,9 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, {
// submit the form (means fetching the image) // submit the form (means fetching the image)
form.submit(); form.submit();
this.imgDiv.removeChild(form); this.imgDiv.removeChild(form);
delete form;
} }
return true;
}, },
/** /**
@@ -105,7 +69,34 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, {
* Creates the imgDiv property on the tile. * Creates the imgDiv property on the tile.
*/ */
initImgDiv: function() { initImgDiv: function() {
this.imgDiv = this.createImgDiv(); 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();
delete this.imgDiv;
} else {
return;
}
}
if (this.useIFrame) {
var eventPane = document.createElement("div");
if(OpenLayers.Util.getBrowserName() == "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, OpenLayers.Util.modifyDOMElement(this.imgDiv, this.id, null,
this.layer.getImageSize(), "relative"); this.layer.getImageSize(), "relative");
@@ -123,6 +114,12 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, {
// we need this reference to check back the viewRequestID // we need this reference to check back the viewRequestID
this.imgDiv.map = this.layer.map; this.imgDiv.map = this.layer.map;
this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
} else {
OpenLayers.Tile.Image.prototype.initImgDiv.apply(this, arguments);
}
}, },
/** /**
@@ -238,13 +235,9 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, {
// adding all parameters in layer params as hidden fields to the html // adding all parameters in layer params as hidden fields to the html
// form element // form element
var imageSize = this.layer.getImageSize(); var imageSize = this.layer.getImageSize();
var params = OpenLayers.Util.extend( var params = OpenLayers.Util.getParameters(
{ this.url.substr(this.layer.url.length)
"BBOX": this.encodeBBOX ? this.bounds.toBBOX() : );
this.bounds.toArray(),
"WIDTH": imageSize.w,
"HEIGHT": imageSize.h
}, this.layer.params);
for(var par in params) { for(var par in params) {
var field = document.createElement('input'); var field = document.createElement('input');
@@ -255,8 +248,5 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, {
} }
return form; return form;
},
CLASS_NAME: "OpenLayers.Tile.Image.IFrame"
} }
); }

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

@@ -16,19 +16,20 @@
t.plan( 2 ); t.plan( 2 );
var url = "http://octo.metacarta.com/cgi-bin/mapserv"; var url = "http://octo.metacarta.com/cgi-bin/mapserv";
var options = { unsupportedBrowsers: []};
layer = new OpenLayers.Layer.WMS.Post(name, url, params); layer = new OpenLayers.Layer.WMS.Post(name, url, params);
t.ok( t.eq(
layer.tileClass == OpenLayers.Tile.Image.IFrame, layer.usePost, true,
"instantiate OpenLayers.Tile.Image.IFrame tiles."); "Supported browsers use IFrame tiles.");
layer.destroy(); layer.destroy();
var options = { unsupportedBrowsers: [OpenLayers.Util.getBrowserName()]}; var options = { unsupportedBrowsers: [OpenLayers.Util.getBrowserName()]};
layer = new OpenLayers.Layer.WMS.Post(name, url, params, options); layer = new OpenLayers.Layer.WMS.Post(name, url, params, options);
t.ok( t.eq(
layer.tileClass == OpenLayers.Tile.Image, layer.usePost, false,
"unsupported browser instantiate Image tiles."); "unsupported browsers use Image tiles.");
layer.destroy(); layer.destroy();
} }
@@ -49,8 +50,8 @@
} }
else { else {
t.ok( t.ok(
tile instanceof OpenLayers.Tile.Image.IFrame, tile.useIFrame !== undefined,
"tile is an instance of OpenLayers.Tile.Image.IFrame"); "tile is created with the OpenLayers.Tile.Image.IFrame mixin");
} }
map.destroy(); map.destroy();
@@ -73,8 +74,8 @@
map.addLayer(layer); map.addLayer(layer);
var tile2 = layer.addTile(bounds, pixel); var tile2 = layer.addTile(bounds, pixel);
t.ok( t.ok(
tile2 instanceof OpenLayers.Tile.Image.IFrame, tile2.createIFrame,
"supported browser: tile is an instance of Tile.Image.IFrame"); "supported browser: tile is created with the Tile.Image.IFrame mixin");
map.destroy(); map.destroy();
} }

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

@@ -14,66 +14,48 @@
var name = "OpenaLayers WMS"; var name = "OpenaLayers WMS";
var wmsUrl = "http://labs.metacarta.com/wms/vmap0?"; var wmsUrl = "http://labs.metacarta.com/wms/vmap0?";
function test_Tile_Image_IFrame_constructor (t) { function test_Tile_Image_IFrame_create (t) {
t.plan( 2 ); t.plan( 3 );
layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'});
var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size);
t.ok( tile instanceof OpenLayers.Tile.Image.IFrame, "new OpenLayers.Tile.Image.IFrame returns Tile object" );
t.eq( tile.layerAlphaHack, false, "layerAlphaHack is set to false.");
layer.destroy();
}
function test_Tile_Image_IFrame_destroy (t) {
t.plan( 2 );
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); var bar = new Array(205).join("1234567890");
layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic', foo: bar}, {tileOptions: {maxGetUrlLength: 2048}});
map.addLayer(layer); map.addLayer(layer);
var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, null, size); var tile = layer.addTile(bounds, position);
tile.renderTile(); tile.renderTile();
tile.positionImage(); tile.positionImage();
t.eq(tile.imgDiv.firstChild.nodeName.toLowerCase(), "iframe", "IFrame used for long URL");
layer.mergeNewParams({foo: null});
tile.renderTile();
tile.positionImage();
t.eq(tile.imgDiv.nodeName.toLowerCase(), "img", "IMG used for short URL");
tile.maxGetUrlLength = 0;
tile.renderTile();
tile.positionImage();
t.eq(tile.imgDiv.firstChild.nodeName.toLowerCase(), "iframe", "IFrame used when maxGetUrlLength is 0");
tile.destroy(); tile.destroy();
t.eq( tile.imgDiv, null, "IFrame successfully removed from DOM"); layer.destroy();
t.eq( tile.frame, null, "Event div successfully removed from DOM");
map.destroy(); map.destroy();
} }
function test_Tile_Image_IFrame_clone (t) {
t.plan( 9 );
layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'});
tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size);
tile.iFrame = {};
var clone = tile.clone();
t.ok( clone instanceof OpenLayers.Tile.Image.IFrame, "clone is a Tile.Image.IFrame 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_clear (t) { function test_Tile_Image_IFrame_clear (t) {
t.plan( 1 ); t.plan( 1 );
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}});
map.addLayer(layer); map.addLayer(layer);
tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); tile = layer.addTile(bounds, position);
tile.draw(); tile.draw();
tile.clear(); tile.clear();
t.ok( t.eq(
tile.imgDiv.firstChild.nodeName != "IFRAME", tile.imgDiv.firstChild.nodeName.toLowerCase(), "div",
"IFrame successfully removed from DOM"); "IFrame successfully removed from DOM");
tile.destroy();
layer.destroy();
map.destroy(); map.destroy();
} }
@@ -81,9 +63,10 @@
t.plan( 4 ); t.plan( 4 );
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}});
map.addLayer(layer); map.addLayer(layer);
tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); tile = layer.addTile(bounds, position);
tile.url = layer.getURL(bounds);
tile.initImgDiv(); tile.initImgDiv();
if(isMozilla) { if(isMozilla) {
@@ -103,9 +86,9 @@
t.plan( 3 ); t.plan( 3 );
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}});
map.addLayer(layer); map.addLayer(layer);
var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); var tile = layer.addTile(bounds, position);
tile.renderTile(); tile.renderTile();
var imgDiv = tile.imgDiv; var imgDiv = tile.imgDiv;
var iFrame = imgDiv.firstChild; var iFrame = imgDiv.firstChild;
@@ -128,9 +111,9 @@
t.plan( 8 ); t.plan( 8 );
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}});
map.addLayer(layer); map.addLayer(layer);
var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); var tile = layer.addTile(bounds, position);
var iFrame = tile.createIFrame(); var iFrame = tile.createIFrame();
var id = tile.id+'_iFrame'; var id = tile.id+'_iFrame';
@@ -161,15 +144,17 @@
SRS: "EPSG:4326", BBOX: [1,2,3,4], SRS: "EPSG:4326", BBOX: [1,2,3,4],
WIDTH: String(size.w), HEIGHT: String(size.h) WIDTH: String(size.w), HEIGHT: String(size.h)
}; };
var newLayer = new OpenLayers.Layer.WMS.Post("Name", var newLayer = new OpenLayers.Layer.WMS("Name",
"http://labs.metacarta.com/TESTURL", "http://labs.metacarta.com/TESTURL",
tParams, tParams,
{tileSize: size}); {tileSize: size, tileOptions: {maxGetUrlLength: 0}});
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
map.addLayer(newLayer); map.addLayer(newLayer);
tile = new OpenLayers.Tile.Image.IFrame(newLayer, position, bounds, url, size); tile = newLayer.addTile(bounds, position);
tile.url = newLayer.getURL(bounds);
tile.initImgDiv(); tile.initImgDiv();
tile.url = newLayer.getURL(bounds);
var form = tile.createRequestForm(); var form = tile.createRequestForm();
if(isMozilla) { if(isMozilla) {
t.ok( form instanceof HTMLElement, "created html form successfully."); t.ok( form instanceof HTMLElement, "created html form successfully.");
@@ -187,25 +172,13 @@
t.eq( form.target, tile.id+'_iFrame', "form target correctly set."); t.eq( form.target, tile.id+'_iFrame', "form target correctly set.");
t.eq( form.action, url, "form action correctly set."); t.eq( form.action, url, "form action correctly set.");
var contain = true; var formParams = {};
var children = form.childNodes; var children = form.childNodes;
for(var par in newLayer.params) { for(var i=0; i<form.childNodes.length; i++) {
var test = false; formParams[children[i].name] = children[i].value
for(var i=0; i<children.length; i++) {
if(children.item(i).name == par && children.item(i).value == newLayer.params[par]) {
test = true;
break;
} }
} newLayer.params.BBOX = newLayer.params.BBOX.join(",");
t.eq(newLayer.params, formParams, "html form elements equal layer's parameters.");
if(test == false) {
contain = false;
break;
}
}
t.eq( contain, true, "html form elements equal layer's parameters.");
tile.draw(); tile.draw();
tile.clear(); tile.clear();
@@ -215,6 +188,8 @@
"Iframe has been reinserted properly" "Iframe has been reinserted properly"
); );
tile.destroy();
newLayer.destroy();
map.destroy(); map.destroy();
} }
</script> </script>