diff --git a/examples/getfeatureinfo.html b/examples/getfeatureinfo-image.html similarity index 83% rename from examples/getfeatureinfo.html rename to examples/getfeatureinfo-image.html index ce4404151d..39ea234eb9 100644 --- a/examples/getfeatureinfo.html +++ b/examples/getfeatureinfo-image.html @@ -9,7 +9,7 @@ - Get feature info example + GetFeatureInfo example (image layer) @@ -32,10 +32,10 @@
-

GetFeatureInfo example

+

GetFeatureInfo example (image layer)

This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.

-

See the getfeatureinfo.js source to see how this is done.

+

See the getfeatureinfo-image.js source to see how this is done.

getfeatureinfo
@@ -51,7 +51,7 @@ - + diff --git a/examples/getfeatureinfo-image.js b/examples/getfeatureinfo-image.js new file mode 100644 index 0000000000..8a284aaeda --- /dev/null +++ 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 = + ''; + } +}); diff --git a/examples/getfeatureinfo-tile.html b/examples/getfeatureinfo-tile.html new file mode 100644 index 0000000000..7f4cc1997b --- /dev/null +++ b/examples/getfeatureinfo-tile.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + WMS GetFeatureInfo example (tile layer) + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

WMS GetFeatureInfo example (tile layer)

+

This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.

+
+

See the getfeatureinfo-tile.js source to see how this is done.

+
+
getfeatureinfo
+
+
+
+   +
+
+ +
+ +
+ + + + + + + diff --git a/examples/getfeatureinfo.js b/examples/getfeatureinfo-tile.js similarity index 93% rename from examples/getfeatureinfo.js rename to examples/getfeatureinfo-tile.js index dea34bf950..f928d83ac2 100644 --- a/examples/getfeatureinfo.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({ diff --git a/src/ol/source/imagewmssource.js b/src/ol/source/imagewmssource.js index 95b9980219..b5bf1f9695 100644 --- 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_; diff --git a/src/ol/source/tilewmssource.js b/src/ol/source/tilewmssource.js index 9961f604a0..422c7fe6f7 100644 --- 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); }; diff --git a/test/spec/ol/source/imagewmssource.test.js b/test/spec/ol/source/imagewmssource.test.js index 88585008f0..b407a27913 100644 --- 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(); }); });