Merge pull request #2582 from elemoine/wmsgfi

Support for "Stateless GetFeatureInfo"
2014-08-21 18:07:39 +02:00
parent a231086a8b 2e29ae8bc5
commit 58a77478a3
7 changed files with 132 additions and 72 deletions
--- a/examples/getfeatureinfo-image.html
+++ b/examples/getfeatureinfo-image.html
@@ -9,7 +9,7 @@
    <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>Get feature info example</title>
+    <title>GetFeatureInfo example (image layer)</title>
  </head>
  <body>

@@ -32,10 +32,10 @@
      <div class="row-fluid">

        <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>
          <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 id="tags">getfeatureinfo</div>
        </div>
@@ -51,7 +51,7 @@

    <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" type="text/javascript"></script>
+    <script src="loader.js?id=getfeatureinfo-image" type="text/javascript"></script>

  </body>
 </html>
--- a/examples/getfeatureinfo-image.js
+++ b/examples/getfeatureinfo-image.js
@@ -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>';
+  }
+});
--- a/examples/getfeatureinfo-tile.html
+++ b/examples/getfeatureinfo-tile.html
@@ -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>
--- a/examples/getfeatureinfo-tile.js
+++ b/examples/getfeatureinfo-tile.js
@@ -6,7 +6,8 @@ goog.require('ol.source.TileWMS');

 var wmsSource = new ol.source.TileWMS({
  url: 'http://demo.opengeo.org/geoserver/wms',
-  params: {'LAYERS': 'ne:ne'}
+  params: {'LAYERS': 'ne:ne'},
+  serverType: 'geoserver'
 });

 var wmsLayer = new ol.layer.Tile({
--- a/src/ol/source/imagewmssource.js
+++ b/src/ol/source/imagewmssource.js
@@ -87,18 +87,6 @@ ol.source.ImageWMS = function(opt_options) {
   */
  this.imageSize_ = [0, 0];

-  /**
-   * @private
-   * @type {ol.proj.Projection}
-   */
-  this.renderedProjection_ = null;
-
-  /**
-   * @private
-   * @type {number}
-   */
-  this.renderedResolution_ = NaN;
-
  /**
   * @private
   * @type {number}
@@ -115,13 +103,21 @@ ol.source.ImageWMS = function(opt_options) {
 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
 * projection. Return `undefined` if the GetFeatureInfo URL cannot be
 * constructed.
 * @param {ol.Coordinate} coordinate Coordinate.
 * @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
 *     be provided. If `QUERY_LAYERS` is not provided then the layers specified
 *     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));

-  if (!goog.isDef(this.url_) || goog.isNull(this.image_)) {
+  if (!goog.isDef(this.url_)) {
    return undefined;
  }

-  goog.asserts.assert(this.imageSize_[0] !== 0 &&
-      this.imageSize_[1] !== 0);
-  goog.asserts.assert(!isNaN(this.renderedResolution_));
-  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 extent = ol.extent.getForViewAndSize(
+      coordinate, resolution, 0,
+      ol.source.ImageWMS.GETFEATUREINFO_IMAGE_SIZE_);

  var baseParams = {
    'SERVICE': 'WMS',
@@ -161,15 +148,14 @@ ol.source.ImageWMS.prototype.getGetFeatureInfoUrl =
  };
  goog.object.extend(baseParams, this.params_, params);

-  var imageResolution = resolution / pixelRatio;
-
-  var x = Math.floor((coordinate[0] - extent[0]) / imageResolution);
-  var y = Math.floor((extent[3] - coordinate[1]) / imageResolution);
+  var x = Math.floor((coordinate[0] - extent[0]) / resolution);
+  var y = Math.floor((extent[3] - coordinate[1]) / resolution);
  goog.object.set(baseParams, this.v13_ ? 'I' : 'X', x);
  goog.object.set(baseParams, this.v13_ ? 'J' : 'Y', y);

-  return this.getRequestUrl_(extent, this.imageSize_, pixelRatio, projection,
-      baseParams);
+  return this.getRequestUrl_(
+      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.getAttributions(), url, this.crossOrigin_);

-  this.renderedProjection_ = projection;
-  this.renderedResolution_ = resolution;
  this.renderedRevision_ = this.getRevision();

  return this.image_;
--- a/src/ol/source/tilewmssource.js
+++ b/src/ol/source/tilewmssource.js
@@ -73,12 +73,6 @@ ol.source.TileWMS = function(opt_options) {
   */
  this.params_ = params;

-  /**
-   * @private
-   * @type {number}
-   */
-  this.pixelRatio_ = NaN;
-
  /**
   * @private
   * @type {boolean}
@@ -136,11 +130,6 @@ ol.source.TileWMS.prototype.getGetFeatureInfoUrl =

  goog.asserts.assert(!('VERSION' in params));

-  var pixelRatio = this.pixelRatio_;
-  if (isNaN(this.pixelRatio_)) {
-    return undefined;
-  }
-
  var projectionObj = ol.proj.get(projection);

  var tileGrid = this.getTileGrid();
@@ -165,9 +154,6 @@ ol.source.TileWMS.prototype.getGetFeatureInfoUrl =
    tileExtent = ol.extent.buffer(tileExtent,
        tileResolution * gutter, tileExtent);
  }
-  if (pixelRatio != 1) {
-    tileSize = (tileSize * pixelRatio + 0.5) | 0;
-  }

  var baseParams = {
    'SERVICE': 'WMS',
@@ -179,16 +165,14 @@ ol.source.TileWMS.prototype.getGetFeatureInfoUrl =
  };
  goog.object.extend(baseParams, this.params_, params);

-  var x = Math.floor((coordinate[0] - tileExtent[0]) /
-      (tileResolution / pixelRatio));
-  var y = Math.floor((tileExtent[3] - coordinate[1]) /
-      (tileResolution / pixelRatio));
+  var x = Math.floor((coordinate[0] - tileExtent[0]) / tileResolution);
+  var y = Math.floor((tileExtent[3] - coordinate[1]) / tileResolution);

  goog.object.set(baseParams, this.v13_ ? 'I' : 'X', x);
  goog.object.set(baseParams, this.v13_ ? 'J' : 'Y', y);

  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_);

-  this.pixelRatio_ = pixelRatio;
-
  return this.getRequestUrl_(tileCoord, tileSize, tileExtent,
      pixelRatio, projection, baseParams);
 };
--- a/test/spec/ol/source/imagewmssource.test.js
+++ b/test/spec/ol/source/imagewmssource.test.js
@@ -140,7 +140,6 @@ describe('ol.source.ImageWMS', function() {

    it('returns the expected GetFeatureInfo URL', function() {
      var source = new ol.source.ImageWMS(options);
-      source.getImage(extent, resolution, pixelRatio, projection);
      var url = source.getGetFeatureInfoUrl(
          [20, 30], resolution, projection,
          {INFO_FORMAT: 'text/plain'});
@@ -149,12 +148,12 @@ describe('ol.source.ImageWMS', function() {
      expect(uri.getDomain()).to.be('example.com');
      expect(uri.getPath()).to.be('/wms');
      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('FORMAT')).to.be('image/png');
-      expect(queryData.get('HEIGHT')).to.be('200');
-      expect(queryData.get('I')).to.be('100');
-      expect(queryData.get('J')).to.be('100');
+      expect(queryData.get('HEIGHT')).to.be('101');
+      expect(queryData.get('I')).to.be('50');
+      expect(queryData.get('J')).to.be('50');
      expect(queryData.get('LAYERS')).to.be('layer');
      expect(queryData.get('QUERY_LAYERS')).to.be('layer');
      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('TRANSPARENT')).to.be('true');
      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();
    });

    it('sets the QUERY_LAYERS param as expected', function() {
      var source = new ol.source.ImageWMS(options);
-      source.getImage(extent, resolution, pixelRatio, projection);
      var url = source.getGetFeatureInfoUrl(
          [20, 30], resolution, projection,
          {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.getPath()).to.be('/wms');
      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('FORMAT')).to.be('image/png');
-      expect(queryData.get('HEIGHT')).to.be('200');
-      expect(queryData.get('I')).to.be('100');
-      expect(queryData.get('J')).to.be('100');
+      expect(queryData.get('HEIGHT')).to.be('101');
+      expect(queryData.get('I')).to.be('50');
+      expect(queryData.get('J')).to.be('50');
      expect(queryData.get('LAYERS')).to.be('layer');
      expect(queryData.get('QUERY_LAYERS')).to.be('foo,bar');
      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('TRANSPARENT')).to.be('true');
      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();
    });
  });