Merge pull request #885 from ahocevar/wms-getfeatureinfo
Implement WMS GetFeatureInfo
This commit is contained in:
61
examples/getfeatureinfo.html
Normal file
61
examples/getfeatureinfo.html
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<!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="../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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container">
|
||||||
|
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||||
|
<ul class="nav pull-right">
|
||||||
|
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||||
|
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||||
|
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||||
|
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||||
|
</ul>
|
||||||
|
</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">GetFeatureInfo example</h4>
|
||||||
|
<p id="shortdesc">Example of a WMS layer and a vector layer, both configured to provide feature information on click.</p>
|
||||||
|
<div id="docs">
|
||||||
|
<p>See the <a href="getfeatureinfo.js" target="_blank">getfeatureinfo.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">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="loader.js?id=getfeatureinfo" type="text/javascript"></script>
|
||||||
|
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
58
examples/getfeatureinfo.js
Normal file
58
examples/getfeatureinfo.js
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.RendererHint');
|
||||||
|
goog.require('ol.View2D');
|
||||||
|
goog.require('ol.layer.TileLayer');
|
||||||
|
goog.require('ol.layer.Vector');
|
||||||
|
goog.require('ol.parser.GeoJSON');
|
||||||
|
goog.require('ol.source.TiledWMS');
|
||||||
|
goog.require('ol.source.Vector');
|
||||||
|
goog.require('ol.style.Polygon');
|
||||||
|
goog.require('ol.style.Rule');
|
||||||
|
goog.require('ol.style.Style');
|
||||||
|
|
||||||
|
|
||||||
|
var wms = new ol.layer.TileLayer({
|
||||||
|
source: new ol.source.TiledWMS({
|
||||||
|
url: 'http://demo.opengeo.org/geoserver/wms',
|
||||||
|
params: {'LAYERS': 'ne:ne'}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
var vector = new ol.layer.Vector({
|
||||||
|
source: new ol.source.Vector({
|
||||||
|
parser: new ol.parser.GeoJSON(),
|
||||||
|
url: 'data/countries.geojson'
|
||||||
|
}),
|
||||||
|
style: new ol.style.Style({rules: [
|
||||||
|
new ol.style.Rule({
|
||||||
|
symbolizers: [
|
||||||
|
new ol.style.Polygon({
|
||||||
|
strokeColor: '#bada55'
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]}),
|
||||||
|
transformFeatureInfo: function(features) {
|
||||||
|
return features.length > 0 ?
|
||||||
|
features[0].getFeatureId() + ': ' + features[0].get('name') : ' ';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
layers: [wms, vector],
|
||||||
|
renderer: ol.RendererHint.CANVAS,
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View2D({
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 1
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
map.on('click', function(evt) {
|
||||||
|
map.getFeatureInfo({
|
||||||
|
pixel: evt.getPixel(),
|
||||||
|
success: function(featureInfoByLayer) {
|
||||||
|
document.getElementById('info').innerHTML = featureInfoByLayer.join('');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -15,14 +15,7 @@ var vector = new ol.layer.Vector({
|
|||||||
source: new ol.source.Vector({
|
source: new ol.source.Vector({
|
||||||
parser: new ol.parser.GPX(),
|
parser: new ol.parser.GPX(),
|
||||||
url: 'data/gpx/yahoo.xml'
|
url: 'data/gpx/yahoo.xml'
|
||||||
}),
|
})
|
||||||
transformFeatureInfo: function(features) {
|
|
||||||
var info = [];
|
|
||||||
for (var i = 0, ii = features.length; i < ii; ++i) {
|
|
||||||
info.push(features[i].get('name') + ': ' + features[i].get('type'));
|
|
||||||
}
|
|
||||||
return info.join(', ');
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
@@ -36,11 +29,16 @@ var map = new ol.Map({
|
|||||||
});
|
});
|
||||||
|
|
||||||
map.on(['click', 'mousemove'], function(evt) {
|
map.on(['click', 'mousemove'], function(evt) {
|
||||||
map.getFeatureInfo({
|
map.getFeatures({
|
||||||
pixel: evt.getPixel(),
|
pixel: evt.getPixel(),
|
||||||
layers: [vector],
|
layers: [vector],
|
||||||
success: function(featureInfo) {
|
success: function(featuresByLayer) {
|
||||||
document.getElementById('info').innerHTML = featureInfo[0] || ' ';
|
var features = featuresByLayer[0];
|
||||||
|
var info = [];
|
||||||
|
for (var i = 0, ii = features.length; i < ii; ++i) {
|
||||||
|
info.push(features[i].get('name') + ': ' + features[i].get('type'));
|
||||||
|
}
|
||||||
|
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -25,14 +25,7 @@ var vector = new ol.layer.Vector({
|
|||||||
maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true
|
maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true
|
||||||
}),
|
}),
|
||||||
url: 'data/kml/lines.kml'
|
url: 'data/kml/lines.kml'
|
||||||
}),
|
})
|
||||||
transformFeatureInfo: function(features) {
|
|
||||||
var info = [];
|
|
||||||
for (var i = 0, ii = features.length; i < ii; ++i) {
|
|
||||||
info.push(features[i].get('name'));
|
|
||||||
}
|
|
||||||
return info.join(', ');
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
@@ -47,11 +40,16 @@ var map = new ol.Map({
|
|||||||
});
|
});
|
||||||
|
|
||||||
map.on(['click', 'mousemove'], function(evt) {
|
map.on(['click', 'mousemove'], function(evt) {
|
||||||
map.getFeatureInfo({
|
map.getFeatures({
|
||||||
pixel: evt.getPixel(),
|
pixel: evt.getPixel(),
|
||||||
layers: [vector],
|
layers: [vector],
|
||||||
success: function(featureInfo) {
|
success: function(featuresByLayer) {
|
||||||
document.getElementById('info').innerHTML = featureInfo[0] || ' ';
|
var features = featuresByLayer[0];
|
||||||
|
var info = [];
|
||||||
|
for (var i = 0, ii = features.length; i < ii; ++i) {
|
||||||
|
info.push(features[i].get('name'));
|
||||||
|
}
|
||||||
|
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -49,11 +49,7 @@ var vector = new ol.layer.Vector({
|
|||||||
})
|
})
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
]}),
|
]})
|
||||||
transformFeatureInfo: function(features) {
|
|
||||||
return features.length > 0 ?
|
|
||||||
features[0].getFeatureId() + ': ' + features[0].get('name') : ' ';
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
@@ -67,11 +63,14 @@ var map = new ol.Map({
|
|||||||
});
|
});
|
||||||
|
|
||||||
map.on(['click', 'mousemove'], function(evt) {
|
map.on(['click', 'mousemove'], function(evt) {
|
||||||
map.getFeatureInfo({
|
map.getFeatures({
|
||||||
pixel: evt.getPixel(),
|
pixel: evt.getPixel(),
|
||||||
layers: [vector],
|
layers: [vector],
|
||||||
success: function(featureInfo) {
|
success: function(featuresByLayer) {
|
||||||
document.getElementById('info').innerHTML = featureInfo[0];
|
var features = featuresByLayer[0];
|
||||||
|
document.getElementById('info').innerHTML = features.length > 0 ?
|
||||||
|
features[0].getFeatureId() + ': ' + features[0].get('name') :
|
||||||
|
' ';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -20,9 +20,9 @@
|
|||||||
* information for each layer, with array indices being the same as in the
|
* information for each layer, with array indices being the same as in the
|
||||||
* passed `layers` array or in the layer collection as returned from
|
* passed `layers` array or in the layer collection as returned from
|
||||||
* `ol.Map#getLayers()` if no `layers` were provided.
|
* `ol.Map#getLayers()` if no `layers` were provided.
|
||||||
* @property {function(Object)|undefined} error Callback for unsuccessful
|
* @property {function()|undefined} error Callback for unsuccessful queries.
|
||||||
* queries. Note that queries with no matching features trigger the success
|
* Note that queries with no matching features trigger the success callback,
|
||||||
* callback, not the error callback.
|
* not the error callback.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -35,9 +35,9 @@
|
|||||||
* each layer, with array indices being the same as in the passed `layers`
|
* each layer, with array indices being the same as in the passed `layers`
|
||||||
* array or in the layer collection as returned from `ol.Map#getLayers()` if
|
* array or in the layer collection as returned from `ol.Map#getLayers()` if
|
||||||
* no layers were provided.
|
* no layers were provided.
|
||||||
* @property {function(Object)|undefined} error Callback for unsuccessful
|
* @property {function()|undefined} error Callback for unsuccessful queries.
|
||||||
* queries. Note that queries with no matching features trigger the success
|
* Note that queries with no matching features trigger the success callback,
|
||||||
* callback, not the error callback.
|
* not the error callback.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -450,6 +450,8 @@
|
|||||||
* @property {null|string|undefined} crossOrigin crossOrigin setting for image
|
* @property {null|string|undefined} crossOrigin crossOrigin setting for image
|
||||||
* requests.
|
* requests.
|
||||||
* @property {ol.Extent|undefined} extent Extent.
|
* @property {ol.Extent|undefined} extent Extent.
|
||||||
|
* @property {ol.source.WMSGetFeatureInfoOptions|undefined}
|
||||||
|
* getFeatureInfoOptions Options for GetFeatureInfo.
|
||||||
* @property {Object.<string,*>} params WMS request parameters. At least a
|
* @property {Object.<string,*>} params WMS request parameters. At least a
|
||||||
* `LAYERS` param is required. `STYLES` is '' by default. `VERSION` is
|
* `LAYERS` param is required. `STYLES` is '' by default. `VERSION` is
|
||||||
* '1.3.0' by default. `WIDTH`, `HEIGHT`, `BBOX` and `CRS` (`SRS` for WMS
|
* '1.3.0' by default. `WIDTH`, `HEIGHT`, `BBOX` and `CRS` (`SRS` for WMS
|
||||||
@@ -509,6 +511,8 @@
|
|||||||
* @property {null|string|undefined} crossOrigin crossOrigin setting for image
|
* @property {null|string|undefined} crossOrigin crossOrigin setting for image
|
||||||
* requests.
|
* requests.
|
||||||
* @property {ol.Extent|undefined} extent Extent.
|
* @property {ol.Extent|undefined} extent Extent.
|
||||||
|
* @property {ol.source.WMSGetFeatureInfoOptions|undefined}
|
||||||
|
* getFeatureInfoOptions Options for GetFeatureInfo.
|
||||||
* @property {ol.tilegrid.TileGrid|undefined} tileGrid Tile grid.
|
* @property {ol.tilegrid.TileGrid|undefined} tileGrid Tile grid.
|
||||||
* @property {number|undefined} maxZoom Maximum zoom.
|
* @property {number|undefined} maxZoom Maximum zoom.
|
||||||
* @property {ol.ProjectionLike} projection Projection.
|
* @property {ol.ProjectionLike} projection Projection.
|
||||||
@@ -543,6 +547,16 @@
|
|||||||
* @property {ol.ProjectionLike} projection Projection.
|
* @property {ol.ProjectionLike} projection Projection.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} ol.source.WMSGetFeatureInfoOptions
|
||||||
|
* @property {ol.source.WMSGetFeatureInfoMethod} method Method for requesting
|
||||||
|
* GetFeatureInfo. Default is `ol.source.WMSGetFeatureInfoMethod.IFRAME`.
|
||||||
|
* @property {Object} params Params for the GetFeatureInfo request. Default is
|
||||||
|
* `{'INFO_FORMAT': 'text/html'}`.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {Object} ol.source.WMTSOptions
|
* @typedef {Object} ol.source.WMTSOptions
|
||||||
* @property {Array.<ol.Attribution>|undefined} attributions Attributions.
|
* @property {Array.<ol.Attribution>|undefined} attributions Attributions.
|
||||||
|
|||||||
@@ -73,6 +73,26 @@ ol.renderer.Layer = function(mapRenderer, layer) {
|
|||||||
goog.inherits(ol.renderer.Layer, goog.Disposable);
|
goog.inherits(ol.renderer.Layer, goog.Disposable);
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {ol.Pixel} pixel Pixel coordinate relative to the map viewport.
|
||||||
|
* @param {function(string, ol.layer.Layer)} success Callback for
|
||||||
|
* successful queries. The passed arguments are the resulting feature
|
||||||
|
* information and the layer.
|
||||||
|
* @param {function()=} opt_error Callback for unsuccessful queries.
|
||||||
|
*/
|
||||||
|
ol.renderer.Layer.prototype.getFeatureInfoForPixel =
|
||||||
|
function(pixel, success, opt_error) {
|
||||||
|
var layer = this.getLayer();
|
||||||
|
var source = layer.getSource();
|
||||||
|
if (goog.isFunction(source.getFeatureInfoForPixel)) {
|
||||||
|
var callback = function(layerFeatureInfo) {
|
||||||
|
success(layerFeatureInfo, layer);
|
||||||
|
};
|
||||||
|
source.getFeatureInfoForPixel(pixel, this.getMap(), callback, opt_error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @protected
|
* @protected
|
||||||
* @return {ol.layer.Layer} Layer.
|
* @return {ol.layer.Layer} Layer.
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ ol.renderer.Map.prototype.getCanvas = goog.functions.NULL;
|
|||||||
* information. Layers that are able to provide attribute data will put
|
* information. Layers that are able to provide attribute data will put
|
||||||
* ol.Feature instances, other layers will put a string which can either
|
* ol.Feature instances, other layers will put a string which can either
|
||||||
* be plain text or markup.
|
* be plain text or markup.
|
||||||
* @param {function(Object)=} opt_error Callback for unsuccessful
|
* @param {function()=} opt_error Callback for unsuccessful
|
||||||
* queries.
|
* queries.
|
||||||
*/
|
*/
|
||||||
ol.renderer.Map.prototype.getFeatureInfoForPixel =
|
ol.renderer.Map.prototype.getFeatureInfoForPixel =
|
||||||
@@ -142,7 +142,7 @@ ol.renderer.Map.prototype.getFeatureInfoForPixel =
|
|||||||
* information. Layers that are able to provide attribute data will put
|
* information. Layers that are able to provide attribute data will put
|
||||||
* ol.Feature instances, other layers will put a string which can either
|
* ol.Feature instances, other layers will put a string which can either
|
||||||
* be plain text or markup.
|
* be plain text or markup.
|
||||||
* @param {function(Object)=} opt_error Callback for unsuccessful
|
* @param {function()=} opt_error Callback for unsuccessful
|
||||||
* queries.
|
* queries.
|
||||||
*/
|
*/
|
||||||
ol.renderer.Map.prototype.getFeaturesForPixel =
|
ol.renderer.Map.prototype.getFeaturesForPixel =
|
||||||
|
|||||||
18
src/ol/source/featureinfosource.js
Normal file
18
src/ol/source/featureinfosource.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
goog.provide('ol.source.FeatureInfoSource');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @interface
|
||||||
|
*/
|
||||||
|
ol.source.FeatureInfoSource = function() {};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {ol.Pixel} pixel Pixel.
|
||||||
|
* @param {ol.Map} map The map that the pixel belongs to.
|
||||||
|
* @param {function(string)} success Callback with feature info.
|
||||||
|
* @param {function()=} opt_error Optional error callback.
|
||||||
|
*/
|
||||||
|
ol.source.FeatureInfoSource.prototype.getFeatureInfoForPixel =
|
||||||
|
goog.abstractMethod;
|
||||||
@@ -1,8 +1,10 @@
|
|||||||
goog.provide('ol.source.SingleImageWMS');
|
goog.provide('ol.source.SingleImageWMS');
|
||||||
|
|
||||||
|
goog.require('goog.asserts');
|
||||||
goog.require('ol.Image');
|
goog.require('ol.Image');
|
||||||
goog.require('ol.ImageUrlFunction');
|
goog.require('ol.ImageUrlFunction');
|
||||||
goog.require('ol.extent');
|
goog.require('ol.extent');
|
||||||
|
goog.require('ol.source.FeatureInfoSource');
|
||||||
goog.require('ol.source.ImageSource');
|
goog.require('ol.source.ImageSource');
|
||||||
goog.require('ol.source.wms');
|
goog.require('ol.source.wms');
|
||||||
|
|
||||||
@@ -11,6 +13,7 @@ goog.require('ol.source.wms');
|
|||||||
/**
|
/**
|
||||||
* @constructor
|
* @constructor
|
||||||
* @extends {ol.source.ImageSource}
|
* @extends {ol.source.ImageSource}
|
||||||
|
* @implements {ol.source.FeatureInfoSource}
|
||||||
* @param {ol.source.SingleImageWMSOptions} options Options.
|
* @param {ol.source.SingleImageWMSOptions} options Options.
|
||||||
*/
|
*/
|
||||||
ol.source.SingleImageWMS = function(options) {
|
ol.source.SingleImageWMS = function(options) {
|
||||||
@@ -28,6 +31,13 @@ ol.source.SingleImageWMS = function(options) {
|
|||||||
imageUrlFunction: imageUrlFunction
|
imageUrlFunction: imageUrlFunction
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @type {ol.source.WMSGetFeatureInfoOptions}
|
||||||
|
*/
|
||||||
|
this.getFeatureInfoOptions_ = goog.isDef(options.getFeatureInfoOptions) ?
|
||||||
|
options.getFeatureInfoOptions : {};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
* @type {ol.Image}
|
* @type {ol.Image}
|
||||||
@@ -68,3 +78,22 @@ ol.source.SingleImageWMS.prototype.getImage =
|
|||||||
this.image_ = this.createImage(extent, resolution, size, projection);
|
this.image_ = this.createImage(extent, resolution, size, projection);
|
||||||
return this.image_;
|
return this.image_;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @inheritDoc
|
||||||
|
*/
|
||||||
|
ol.source.SingleImageWMS.prototype.getFeatureInfoForPixel =
|
||||||
|
function(pixel, map, success, opt_error) {
|
||||||
|
var view2D = map.getView().getView2D(),
|
||||||
|
projection = view2D.getProjection(),
|
||||||
|
size = map.getSize(),
|
||||||
|
bottomLeft = map.getCoordinateFromPixel([0, size[1]]),
|
||||||
|
topRight = map.getCoordinateFromPixel([size[0], 0]),
|
||||||
|
extent = [bottomLeft[0], topRight[0], bottomLeft[1], topRight[1]],
|
||||||
|
url = this.imageUrlFunction(extent, size, projection);
|
||||||
|
goog.asserts.assert(goog.isDef(url),
|
||||||
|
'ol.source.SingleImageWMS#imageUrlFunction does not return a url');
|
||||||
|
ol.source.wms.getFeatureInfo(url, pixel, this.getFeatureInfoOptions_, success,
|
||||||
|
opt_error);
|
||||||
|
};
|
||||||
|
|||||||
@@ -3,10 +3,12 @@
|
|||||||
goog.provide('ol.source.TiledWMS');
|
goog.provide('ol.source.TiledWMS');
|
||||||
|
|
||||||
goog.require('goog.array');
|
goog.require('goog.array');
|
||||||
|
goog.require('goog.asserts');
|
||||||
goog.require('goog.math');
|
goog.require('goog.math');
|
||||||
goog.require('ol.TileCoord');
|
goog.require('ol.TileCoord');
|
||||||
goog.require('ol.TileUrlFunction');
|
goog.require('ol.TileUrlFunction');
|
||||||
goog.require('ol.extent');
|
goog.require('ol.extent');
|
||||||
|
goog.require('ol.source.FeatureInfoSource');
|
||||||
goog.require('ol.source.ImageTileSource');
|
goog.require('ol.source.ImageTileSource');
|
||||||
goog.require('ol.source.wms');
|
goog.require('ol.source.wms');
|
||||||
|
|
||||||
@@ -15,9 +17,11 @@ goog.require('ol.source.wms');
|
|||||||
/**
|
/**
|
||||||
* @constructor
|
* @constructor
|
||||||
* @extends {ol.source.ImageTileSource}
|
* @extends {ol.source.ImageTileSource}
|
||||||
|
* @implements {ol.source.FeatureInfoSource}
|
||||||
* @param {ol.source.TiledWMSOptions} options Tiled WMS options.
|
* @param {ol.source.TiledWMSOptions} options Tiled WMS options.
|
||||||
*/
|
*/
|
||||||
ol.source.TiledWMS = function(options) {
|
ol.source.TiledWMS = function(options) {
|
||||||
|
|
||||||
var tileGrid;
|
var tileGrid;
|
||||||
if (goog.isDef(options.tileGrid)) {
|
if (goog.isDef(options.tileGrid)) {
|
||||||
tileGrid = options.tileGrid;
|
tileGrid = options.tileGrid;
|
||||||
@@ -28,6 +32,7 @@ ol.source.TiledWMS = function(options) {
|
|||||||
if (!goog.isDef(urls) && goog.isDef(options.url)) {
|
if (!goog.isDef(urls) && goog.isDef(options.url)) {
|
||||||
urls = ol.TileUrlFunction.expandUrl(options.url);
|
urls = ol.TileUrlFunction.expandUrl(options.url);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (goog.isDef(urls)) {
|
if (goog.isDef(urls)) {
|
||||||
var tileUrlFunctions = goog.array.map(
|
var tileUrlFunctions = goog.array.map(
|
||||||
urls, function(url) {
|
urls, function(url) {
|
||||||
@@ -81,5 +86,35 @@ ol.source.TiledWMS = function(options) {
|
|||||||
tileCoordTransform, tileUrlFunction)
|
tileCoordTransform, tileUrlFunction)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @type {ol.source.WMSGetFeatureInfoOptions}
|
||||||
|
*/
|
||||||
|
this.getFeatureInfoOptions_ = goog.isDef(options.getFeatureInfoOptions) ?
|
||||||
|
options.getFeatureInfoOptions : {};
|
||||||
|
|
||||||
};
|
};
|
||||||
goog.inherits(ol.source.TiledWMS, ol.source.ImageTileSource);
|
goog.inherits(ol.source.TiledWMS, ol.source.ImageTileSource);
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @inheritDoc
|
||||||
|
*/
|
||||||
|
ol.source.TiledWMS.prototype.getFeatureInfoForPixel =
|
||||||
|
function(pixel, map, success, opt_error) {
|
||||||
|
var coord = map.getCoordinateFromPixel(pixel),
|
||||||
|
view2D = map.getView().getView2D(),
|
||||||
|
projection = view2D.getProjection(),
|
||||||
|
tileGrid = goog.isNull(this.tileGrid) ?
|
||||||
|
ol.tilegrid.getForProjection(projection) : this.tileGrid,
|
||||||
|
tileCoord = tileGrid.getTileCoordForCoordAndResolution(coord,
|
||||||
|
view2D.getResolution()),
|
||||||
|
tileExtent = tileGrid.getTileCoordExtent(tileCoord),
|
||||||
|
offset = map.getPixelFromCoordinate(ol.extent.getTopLeft(tileExtent)),
|
||||||
|
url = this.tileUrlFunction(tileCoord, projection);
|
||||||
|
goog.asserts.assert(goog.isDef(url),
|
||||||
|
'ol.source.TiledWMS#tileUrlFunction does not return a url');
|
||||||
|
ol.source.wms.getFeatureInfo(url,
|
||||||
|
[pixel[0] - offset[0], pixel[1] - offset[1]], this.getFeatureInfoOptions_,
|
||||||
|
success, opt_error);
|
||||||
|
};
|
||||||
|
|||||||
1
src/ol/source/wmssource.exports
Normal file
1
src/ol/source/wmssource.exports
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@exportSymbol ol.source.WMSGetFeatureInfoMethod
|
||||||
@@ -1,9 +1,29 @@
|
|||||||
|
goog.provide('ol.source.WMSGetFeatureInfoMethod');
|
||||||
goog.provide('ol.source.wms');
|
goog.provide('ol.source.wms');
|
||||||
|
|
||||||
|
goog.require('goog.net.XhrIo');
|
||||||
goog.require('goog.object');
|
goog.require('goog.object');
|
||||||
goog.require('goog.uri.utils');
|
goog.require('goog.uri.utils');
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to use to get WMS feature info.
|
||||||
|
* @enum {string}
|
||||||
|
*/
|
||||||
|
ol.source.WMSGetFeatureInfoMethod = {
|
||||||
|
/**
|
||||||
|
* Load the info in an IFRAME. Only works with 'text/html and 'text/plain' as
|
||||||
|
* `INFO_FORMAT`.
|
||||||
|
*/
|
||||||
|
IFRAME: 'iframe',
|
||||||
|
/**
|
||||||
|
* Use an asynchronous GET request. Requires CORS headers or a server at the
|
||||||
|
* same origin as the application script.
|
||||||
|
*/
|
||||||
|
XHR_GET: 'xhr_get'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {string} baseUrl WMS base url.
|
* @param {string} baseUrl WMS base url.
|
||||||
* @param {Object.<string, string|number>} params Request parameters.
|
* @param {Object.<string, string|number>} params Request parameters.
|
||||||
@@ -40,3 +60,60 @@ ol.source.wms.getUrl =
|
|||||||
|
|
||||||
return goog.uri.utils.appendParamsFromMap(baseUrl, baseParams);
|
return goog.uri.utils.appendParamsFromMap(baseUrl, baseParams);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} url URL as provided by the url function.
|
||||||
|
* @param {ol.Pixel} pixel Pixel.
|
||||||
|
* @param {Object} options Options as defined in the source.
|
||||||
|
* @param {function(string)} success Callback function for successful queries.
|
||||||
|
* @param {function()=} opt_error Optional callback function for unsuccessful
|
||||||
|
* queries.
|
||||||
|
*/
|
||||||
|
ol.source.wms.getFeatureInfo =
|
||||||
|
function(url, pixel, options, success, opt_error) {
|
||||||
|
// TODO: This could be done in a smarter way if the url function was not a
|
||||||
|
// closure
|
||||||
|
url = url.replace('REQUEST=GetMap', 'REQUEST=GetFeatureInfo')
|
||||||
|
.replace(ol.source.wms.regExes.layers, 'LAYERS=$1&QUERY_LAYERS=$1');
|
||||||
|
options = goog.isDef(options) ? goog.object.clone(options) : {};
|
||||||
|
var localOptions = {
|
||||||
|
method: ol.source.WMSGetFeatureInfoMethod.IFRAME,
|
||||||
|
params: {}
|
||||||
|
};
|
||||||
|
goog.object.extend(localOptions, options);
|
||||||
|
var params = {'INFO_FORMAT': 'text/html'},
|
||||||
|
version = parseFloat(url.match(ol.source.wms.regExes.version)[1]),
|
||||||
|
x = Math.round(pixel[0]),
|
||||||
|
y = Math.round(pixel[1]);
|
||||||
|
if (version >= 1.3) {
|
||||||
|
goog.object.extend(params, {'I': x, 'J': y});
|
||||||
|
} else {
|
||||||
|
goog.object.extend(params, {'X': x, 'Y': y});
|
||||||
|
}
|
||||||
|
goog.object.extend(params, localOptions.params);
|
||||||
|
url = goog.uri.utils.appendParamsFromMap(url, params);
|
||||||
|
if (localOptions.method == ol.source.WMSGetFeatureInfoMethod.IFRAME) {
|
||||||
|
goog.global.setTimeout(function() {
|
||||||
|
success('<iframe seamless src="' + url + '"></iframe>');
|
||||||
|
}, 0);
|
||||||
|
} else if (localOptions.method == ol.source.WMSGetFeatureInfoMethod.XHR_GET) {
|
||||||
|
goog.net.XhrIo.send(url, function(event) {
|
||||||
|
var xhr = event.target;
|
||||||
|
if (xhr.isSuccess()) {
|
||||||
|
success(xhr.getResponseText());
|
||||||
|
} else if (goog.isDef(opt_error)) {
|
||||||
|
opt_error();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @enum {RegExp}
|
||||||
|
*/
|
||||||
|
ol.source.wms.regExes = {
|
||||||
|
layers: (/LAYERS=([^&]+)/),
|
||||||
|
version: (/VERSION=([^&]+)/)
|
||||||
|
};
|
||||||
|
|||||||
@@ -26,8 +26,30 @@ describe('ol.source.wms', function() {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('ol.source.wms.getFeatureInfo', function() {
|
||||||
|
it('calls a callback with a feature info IFRAME as result', function(done) {
|
||||||
|
ol.source.wms.getFeatureInfo('?REQUEST=GetMap&VERSION=1.3&LAYERS=foo',
|
||||||
|
[5, 10], {params: {'INFO_FORMAT': 'text/plain'}},
|
||||||
|
function(info) {
|
||||||
|
expect(info).to.eql('<iframe seamless src="' +
|
||||||
|
'?REQUEST=GetFeatureInfo&VERSION=1.3&LAYERS=foo&QUERY_LAYERS=' +
|
||||||
|
'foo&INFO_FORMAT=text%2Fplain&I=5&J=10"></iframe>');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('can do xhr to retrieve feature info', function(done) {
|
||||||
|
ol.source.wms.getFeatureInfo('?REQUEST=GetMap&VERSION=1.1.1&LAYERS=foo',
|
||||||
|
[5, 10], {method: ol.source.WMSGetFeatureInfoMethod.XHR_GET},
|
||||||
|
function(info) {
|
||||||
|
expect(info).to.contain('<html>');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
goog.require('ol.proj');
|
goog.require('ol.proj');
|
||||||
|
goog.require('ol.source.WMSGetFeatureInfoMethod');
|
||||||
goog.require('ol.source.wms');
|
goog.require('ol.source.wms');
|
||||||
|
|||||||
Reference in New Issue
Block a user