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

Merge pull request #2582 from elemoine/wmsgfi

Browse Source 
Support for "Stateless GetFeatureInfo"
This commit is contained in:
Éric Lemoine
2014-08-21 18:07:39 +02:00
parent a231086a8b 2e29ae8bc5
commit 58a77478a3
7 changed files with 132 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/getfeatureinfo.html → examples/getfeatureinfo-image.html
+4 -4
View File
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Get feature info example</title> <title>GetFeatureInfo example (image layer)</title>
</head> </head>
<body> <body>
@@ -32,10 +32,10 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
<h4 id="title">GetFeatureInfo example</h4> <h4 id="title">GetFeatureInfo example (image layer)</h4>
<p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.</p> <p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.</p>
<div id="docs"> <div id="docs">
<p>See the <a href="getfeatureinfo.js" target="_blank">getfeatureinfo.js source</a> to see how this is done.</p> <p>See the <a href="getfeatureinfo-image.js" target="_blank">getfeatureinfo-image.js source</a> to see how this is done.</p>
</div> </div>
<div id="tags">getfeatureinfo</div> <div id="tags">getfeatureinfo</div>
</div> </div>
@@ -51,7 +51,7 @@
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script> <script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=getfeatureinfo" type="text/javascript"></script> <script src="loader.js?id=getfeatureinfo-image" type="text/javascript"></script>
</body> </body>
</html> </html>
examples/getfeatureinfo-image.js
+38
View File
@@ -0,0 +1,38 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Image');
goog.require('ol.source.ImageWMS');
var wmsSource = new ol.source.ImageWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver'
});
var wmsLayer = new ol.layer.Image({
source: wmsSource
});
var view = new ol.View({
center: [0, 0],
zoom: 1
});
var map = new ol.Map({
layers: [wmsLayer],
target: 'map',
view: view
});
map.on('singleclick', function(evt) {
document.getElementById('info').innerHTML = '';
var viewResolution = /** @type {number} */ (view.getResolution());
var url = wmsSource.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, 'EPSG:3857',
{'INFO_FORMAT': 'text/html'});
if (url) {
document.getElementById('info').innerHTML =
'<iframe seamless src="' + url + '"></iframe>';
}
});
examples/getfeatureinfo-tile.html
+57
View File
@@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WMS GetFeatureInfo example (tile layer)</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">WMS GetFeatureInfo example (tile layer)</h4>
<p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.</p>
<div id="docs">
<p>See the <a href="getfeatureinfo-tile.js" target="_blank">getfeatureinfo-tile.js source</a> to see how this is done.</p>
</div>
<div id="tags">getfeatureinfo</div>
</div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=getfeatureinfo-tile" type="text/javascript"></script>
</body>
</html>
examples/getfeatureinfo.js → examples/getfeatureinfo-tile.js
+2 -1
View File
@@ -6,7 +6,8 @@ goog.require('ol.source.TileWMS');
var wmsSource = new ol.source.TileWMS({ var wmsSource = new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms', url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'ne:ne'} params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver'
}); });
var wmsLayer = new ol.layer.Tile({ var wmsLayer = new ol.layer.Tile({
src/ol/source/imagewmssource.js
+18 -34
View File
@@ -87,18 +87,6 @@ ol.source.ImageWMS = function(opt_options) {
*/ */
this.imageSize_ = [0, 0]; this.imageSize_ = [0, 0];
/**
* @private
* @type {ol.proj.Projection}
*/
this.renderedProjection_ = null;
/**
* @private
* @type {number}
*/
this.renderedResolution_ = NaN;
/** /**
* @private * @private
* @type {number} * @type {number}
@@ -115,13 +103,21 @@ ol.source.ImageWMS = function(opt_options) {
goog.inherits(ol.source.ImageWMS, ol.source.Image); goog.inherits(ol.source.ImageWMS, ol.source.Image);
/**
* @const
* @type {ol.Size}
* @private
*/
ol.source.ImageWMS.GETFEATUREINFO_IMAGE_SIZE_ = [101, 101];
/** /**
* Return the GetFeatureInfo URL for the passed coordinate, resolution, and * Return the GetFeatureInfo URL for the passed coordinate, resolution, and
* projection. Return `undefined` if the GetFeatureInfo URL cannot be * projection. Return `undefined` if the GetFeatureInfo URL cannot be
* constructed. * constructed.
* @param {ol.Coordinate} coordinate Coordinate. * @param {ol.Coordinate} coordinate Coordinate.
* @param {number} resolution Resolution. * @param {number} resolution Resolution.
* @param {ol.proj.Projection} projection Projection. * @param {ol.proj.ProjectionLike} projection Projection.
* @param {!Object} params GetFeatureInfo params. `INFO_FORMAT` at least should * @param {!Object} params GetFeatureInfo params. `INFO_FORMAT` at least should
* be provided. If `QUERY_LAYERS` is not provided then the layers specified * be provided. If `QUERY_LAYERS` is not provided then the layers specified
* in the `LAYERS` parameter will be used. `VERSION` should not be * in the `LAYERS` parameter will be used. `VERSION` should not be
@@ -134,22 +130,13 @@ ol.source.ImageWMS.prototype.getGetFeatureInfoUrl =
goog.asserts.assert(!('VERSION' in params)); goog.asserts.assert(!('VERSION' in params));
if (!goog.isDef(this.url_) || goog.isNull(this.image_)) { if (!goog.isDef(this.url_)) {
return undefined; return undefined;
} }
goog.asserts.assert(this.imageSize_[0] !== 0 && var extent = ol.extent.getForViewAndSize(
this.imageSize_[1] !== 0); coordinate, resolution, 0,
goog.asserts.assert(!isNaN(this.renderedResolution_)); ol.source.ImageWMS.GETFEATUREINFO_IMAGE_SIZE_);
goog.asserts.assert(!goog.isNull(this.renderedProjection_));
if (resolution != this.renderedResolution_ ||
!ol.proj.equivalent(projection, this.renderedProjection_)) {
return undefined;
}
var extent = this.image_.getExtent();
var pixelRatio = this.image_.getPixelRatio();
var baseParams = { var baseParams = {
'SERVICE': 'WMS', 'SERVICE': 'WMS',
@@ -161,15 +148,14 @@ ol.source.ImageWMS.prototype.getGetFeatureInfoUrl =
}; };
goog.object.extend(baseParams, this.params_, params); goog.object.extend(baseParams, this.params_, params);
var imageResolution = resolution / pixelRatio; var x = Math.floor((coordinate[0] - extent[0]) / resolution);
var y = Math.floor((extent[3] - coordinate[1]) / resolution);
var x = Math.floor((coordinate[0] - extent[0]) / imageResolution);
var y = Math.floor((extent[3] - coordinate[1]) / imageResolution);
goog.object.set(baseParams, this.v13_ ? 'I' : 'X', x); goog.object.set(baseParams, this.v13_ ? 'I' : 'X', x);
goog.object.set(baseParams, this.v13_ ? 'J' : 'Y', y); goog.object.set(baseParams, this.v13_ ? 'J' : 'Y', y);
return this.getRequestUrl_(extent, this.imageSize_, pixelRatio, projection, return this.getRequestUrl_(
baseParams); extent, ol.source.ImageWMS.GETFEATUREINFO_IMAGE_SIZE_,
1, ol.proj.get(projection), baseParams);
}; };
@@ -251,8 +237,6 @@ ol.source.ImageWMS.prototype.getImage =
this.image_ = new ol.Image(extent, resolution, pixelRatio, this.image_ = new ol.Image(extent, resolution, pixelRatio,
this.getAttributions(), url, this.crossOrigin_); this.getAttributions(), url, this.crossOrigin_);
this.renderedProjection_ = projection;
this.renderedResolution_ = resolution;
this.renderedRevision_ = this.getRevision(); this.renderedRevision_ = this.getRevision();
return this.image_; return this.image_;
src/ol/source/tilewmssource.js
+3 -21
View File
@@ -73,12 +73,6 @@ ol.source.TileWMS = function(opt_options) {
*/ */
this.params_ = params; this.params_ = params;
/**
* @private
* @type {number}
*/
this.pixelRatio_ = NaN;
/** /**
* @private * @private
* @type {boolean} * @type {boolean}
@@ -136,11 +130,6 @@ ol.source.TileWMS.prototype.getGetFeatureInfoUrl =
goog.asserts.assert(!('VERSION' in params)); goog.asserts.assert(!('VERSION' in params));
var pixelRatio = this.pixelRatio_;
if (isNaN(this.pixelRatio_)) {
return undefined;
}
var projectionObj = ol.proj.get(projection); var projectionObj = ol.proj.get(projection);
var tileGrid = this.getTileGrid(); var tileGrid = this.getTileGrid();
@@ -165,9 +154,6 @@ ol.source.TileWMS.prototype.getGetFeatureInfoUrl =
tileExtent = ol.extent.buffer(tileExtent, tileExtent = ol.extent.buffer(tileExtent,
tileResolution * gutter, tileExtent); tileResolution * gutter, tileExtent);
} }
if (pixelRatio != 1) {
tileSize = (tileSize * pixelRatio + 0.5) | 0;
}
var baseParams = { var baseParams = {
'SERVICE': 'WMS', 'SERVICE': 'WMS',
@@ -179,16 +165,14 @@ ol.source.TileWMS.prototype.getGetFeatureInfoUrl =
}; };
goog.object.extend(baseParams, this.params_, params); goog.object.extend(baseParams, this.params_, params);
var x = Math.floor((coordinate[0] - tileExtent[0]) / var x = Math.floor((coordinate[0] - tileExtent[0]) / tileResolution);
(tileResolution / pixelRatio)); var y = Math.floor((tileExtent[3] - coordinate[1]) / tileResolution);
var y = Math.floor((tileExtent[3] - coordinate[1]) /
(tileResolution / pixelRatio));
goog.object.set(baseParams, this.v13_ ? 'I' : 'X', x); goog.object.set(baseParams, this.v13_ ? 'I' : 'X', x);
goog.object.set(baseParams, this.v13_ ? 'J' : 'Y', y); goog.object.set(baseParams, this.v13_ ? 'J' : 'Y', y);
return this.getRequestUrl_(tileCoord, tileSize, tileExtent, return this.getRequestUrl_(tileCoord, tileSize, tileExtent,
pixelRatio, projectionObj, baseParams); 1, projectionObj, baseParams);
}; };
@@ -409,8 +393,6 @@ ol.source.TileWMS.prototype.tileUrlFunction_ =
}; };
goog.object.extend(baseParams, this.params_); goog.object.extend(baseParams, this.params_);
this.pixelRatio_ = pixelRatio;
return this.getRequestUrl_(tileCoord, tileSize, tileExtent, return this.getRequestUrl_(tileCoord, tileSize, tileExtent,
pixelRatio, projection, baseParams); pixelRatio, projection, baseParams);
}; };
test/spec/ol/source/imagewmssource.test.js
+10 -12
View File
@@ -140,7 +140,6 @@ describe('ol.source.ImageWMS', function() {
it('returns the expected GetFeatureInfo URL', function() { it('returns the expected GetFeatureInfo URL', function() {
var source = new ol.source.ImageWMS(options); var source = new ol.source.ImageWMS(options);
source.getImage(extent, resolution, pixelRatio, projection);
var url = source.getGetFeatureInfoUrl( var url = source.getGetFeatureInfoUrl(
[20, 30], resolution, projection, [20, 30], resolution, projection,
{INFO_FORMAT: 'text/plain'}); {INFO_FORMAT: 'text/plain'});
@@ -149,12 +148,12 @@ describe('ol.source.ImageWMS', function() {
expect(uri.getDomain()).to.be('example.com'); expect(uri.getDomain()).to.be('example.com');
expect(uri.getPath()).to.be('/wms'); expect(uri.getPath()).to.be('/wms');
var queryData = uri.getQueryData(); var queryData = uri.getQueryData();
expect(queryData.get('BBOX')).to.be('20,10,40,30'); expect(queryData.get('BBOX')).to.be('24.95,14.95,35.05,25.05');
expect(queryData.get('CRS')).to.be('EPSG:4326'); expect(queryData.get('CRS')).to.be('EPSG:4326');
expect(queryData.get('FORMAT')).to.be('image/png'); expect(queryData.get('FORMAT')).to.be('image/png');
expect(queryData.get('HEIGHT')).to.be('200'); expect(queryData.get('HEIGHT')).to.be('101');
expect(queryData.get('I')).to.be('100'); expect(queryData.get('I')).to.be('50');
expect(queryData.get('J')).to.be('100'); expect(queryData.get('J')).to.be('50');
expect(queryData.get('LAYERS')).to.be('layer'); expect(queryData.get('LAYERS')).to.be('layer');
expect(queryData.get('QUERY_LAYERS')).to.be('layer'); expect(queryData.get('QUERY_LAYERS')).to.be('layer');
expect(queryData.get('REQUEST')).to.be('GetFeatureInfo'); expect(queryData.get('REQUEST')).to.be('GetFeatureInfo');
@@ -163,13 +162,12 @@ describe('ol.source.ImageWMS', function() {
expect(queryData.get('STYLES')).to.be(''); expect(queryData.get('STYLES')).to.be('');
expect(queryData.get('TRANSPARENT')).to.be('true'); expect(queryData.get('TRANSPARENT')).to.be('true');
expect(queryData.get('VERSION')).to.be('1.3.0'); expect(queryData.get('VERSION')).to.be('1.3.0');
expect(queryData.get('WIDTH')).to.be('200'); expect(queryData.get('WIDTH')).to.be('101');
expect(uri.getFragment()).to.be.empty(); expect(uri.getFragment()).to.be.empty();
}); });
it('sets the QUERY_LAYERS param as expected', function() { it('sets the QUERY_LAYERS param as expected', function() {
var source = new ol.source.ImageWMS(options); var source = new ol.source.ImageWMS(options);
source.getImage(extent, resolution, pixelRatio, projection);
var url = source.getGetFeatureInfoUrl( var url = source.getGetFeatureInfoUrl(
[20, 30], resolution, projection, [20, 30], resolution, projection,
{INFO_FORMAT: 'text/plain', QUERY_LAYERS: 'foo,bar'}); {INFO_FORMAT: 'text/plain', QUERY_LAYERS: 'foo,bar'});
@@ -178,12 +176,12 @@ describe('ol.source.ImageWMS', function() {
expect(uri.getDomain()).to.be('example.com'); expect(uri.getDomain()).to.be('example.com');
expect(uri.getPath()).to.be('/wms'); expect(uri.getPath()).to.be('/wms');
var queryData = uri.getQueryData(); var queryData = uri.getQueryData();
expect(queryData.get('BBOX')).to.be('20,10,40,30'); expect(queryData.get('BBOX')).to.be('24.95,14.95,35.05,25.05');
expect(queryData.get('CRS')).to.be('EPSG:4326'); expect(queryData.get('CRS')).to.be('EPSG:4326');
expect(queryData.get('FORMAT')).to.be('image/png'); expect(queryData.get('FORMAT')).to.be('image/png');
expect(queryData.get('HEIGHT')).to.be('200'); expect(queryData.get('HEIGHT')).to.be('101');
expect(queryData.get('I')).to.be('100'); expect(queryData.get('I')).to.be('50');
expect(queryData.get('J')).to.be('100'); expect(queryData.get('J')).to.be('50');
expect(queryData.get('LAYERS')).to.be('layer'); expect(queryData.get('LAYERS')).to.be('layer');
expect(queryData.get('QUERY_LAYERS')).to.be('foo,bar'); expect(queryData.get('QUERY_LAYERS')).to.be('foo,bar');
expect(queryData.get('REQUEST')).to.be('GetFeatureInfo'); expect(queryData.get('REQUEST')).to.be('GetFeatureInfo');
@@ -192,7 +190,7 @@ describe('ol.source.ImageWMS', function() {
expect(queryData.get('STYLES')).to.be(''); expect(queryData.get('STYLES')).to.be('');
expect(queryData.get('TRANSPARENT')).to.be('true'); expect(queryData.get('TRANSPARENT')).to.be('true');
expect(queryData.get('VERSION')).to.be('1.3.0'); expect(queryData.get('VERSION')).to.be('1.3.0');
expect(queryData.get('WIDTH')).to.be('200'); expect(queryData.get('WIDTH')).to.be('101');
expect(uri.getFragment()).to.be.empty(); expect(uri.getFragment()).to.be.empty();
}); });
}); });