From 5acff857e7cb8ba6186b8c9220874f735d316076 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Wed, 31 Jul 2013 17:47:16 +0200 Subject: [PATCH] Add example, and use getFeatures in other examples The new dedicated getfeatureinfo example shows how to combine feature info from a WMS and a vector layer. The other examples that previously used getFeatureInfo from vector layers now use the more appropriate getFeatures. --- examples/getfeatureinfo.html | 61 ++++++++++++++++++++++++++++++++++++ examples/getfeatureinfo.js | 59 ++++++++++++++++++++++++++++++++++ examples/gpx.js | 20 ++++++------ examples/kml.js | 20 ++++++------ examples/vector-layer.js | 15 +++++---- src/ol/source/wmssource.js | 2 +- 6 files changed, 146 insertions(+), 31 deletions(-) create mode 100644 examples/getfeatureinfo.html create mode 100644 examples/getfeatureinfo.js diff --git a/examples/getfeatureinfo.html b/examples/getfeatureinfo.html new file mode 100644 index 0000000000..43d732963d --- /dev/null +++ b/examples/getfeatureinfo.html @@ -0,0 +1,61 @@ + + + + + + + + + + + Vector layer example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

GetFeatureInfo example

+

Example of a WMS layer and a vector layer, both configured to provide feature information on click.

+
+

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

+
+
getfeatureinfo
+
+
+
+   +
+
+ +
+ +
+ + + + + + diff --git a/examples/getfeatureinfo.js b/examples/getfeatureinfo.js new file mode 100644 index 0000000000..7cd56c5005 --- /dev/null +++ b/examples/getfeatureinfo.js @@ -0,0 +1,59 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.expr'); +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(''); + } + }); +}); diff --git a/examples/gpx.js b/examples/gpx.js index 44e307effb..28e3c05c43 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -15,14 +15,7 @@ var vector = new ol.layer.Vector({ source: new ol.source.Vector({ parser: new ol.parser.GPX(), 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({ @@ -36,11 +29,16 @@ var map = new ol.Map({ }); map.on(['click', 'mousemove'], function(evt) { - map.getFeatureInfo({ + map.getFeatures({ pixel: evt.getPixel(), layers: [vector], - success: function(featureInfo) { - document.getElementById('info').innerHTML = featureInfo[0] || ' '; + success: function(featuresByLayer) { + 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(', ') || ' '; } }); }); diff --git a/examples/kml.js b/examples/kml.js index 772eb74928..148b73a1f4 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -25,14 +25,7 @@ var vector = new ol.layer.Vector({ maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true }), 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({ @@ -47,11 +40,16 @@ var map = new ol.Map({ }); map.on(['click', 'mousemove'], function(evt) { - map.getFeatureInfo({ + map.getFeatures({ pixel: evt.getPixel(), layers: [vector], - success: function(featureInfo) { - document.getElementById('info').innerHTML = featureInfo[0] || ' '; + success: function(featuresByLayer) { + 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(', ') || ' '; } }); }); diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 23b8f9e4ee..ab0495759b 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -46,11 +46,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({ @@ -64,11 +60,14 @@ var map = new ol.Map({ }); map.on(['click', 'mousemove'], function(evt) { - map.getFeatureInfo({ + map.getFeatures({ pixel: evt.getPixel(), layers: [vector], - success: function(featureInfo) { - document.getElementById('info').innerHTML = featureInfo[0]; + success: function(featuresByLayer) { + var features = featuresByLayer[0]; + document.getElementById('info').innerHTML = features.length > 0 ? + features[0].getFeatureId() + ': ' + features[0].get('name') : + ' '; } }); }); diff --git a/src/ol/source/wmssource.js b/src/ol/source/wmssource.js index fa9c308b5c..6b28738537 100644 --- a/src/ol/source/wmssource.js +++ b/src/ol/source/wmssource.js @@ -87,7 +87,7 @@ ol.source.wms.getFeatureInfo = function(url, options, success, opt_error) { .replace(/LAYERS=([^&]+)/, 'LAYERS=$1&QUERY_LAYERS=$1'); if (options.method == ol.source.WMSGetFeatureInfoMethod.IFRAME) { goog.global.setTimeout(function() { - success(''); }, 0); } else if (options.method == ol.source.WMSGetFeatureInfoMethod.XHR_GET) { goog.net.XhrIo.send(url, function(event) {