From 8d60faeab75fb5fd97e20731c27960496c556dd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Wed, 15 Jan 2014 10:35:18 +0100 Subject: [PATCH] Add GetFeatureInfo example --- examples/getfeatureinfo.html | 55 ++++++++++++++++++++++++++++++++++++ examples/getfeatureinfo.js | 42 +++++++++++++++++++++++++++ 2 files changed, 97 insertions(+) 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..8d4b054528 --- /dev/null +++ b/examples/getfeatureinfo.html @@ -0,0 +1,55 @@ + + + + + + + + + + + Get feature info example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

GetFeatureInfo example

+

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.

+
+
getfeatureinfo
+
+
+
+   +
+
+ +
+ +
+ + + + + + diff --git a/examples/getfeatureinfo.js b/examples/getfeatureinfo.js new file mode 100644 index 0000000000..42e7468074 --- /dev/null +++ b/examples/getfeatureinfo.js @@ -0,0 +1,42 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.TileWMS'); + + +var wmsSource = new ol.source.TileWMS({ + url: 'http://demo.opengeo.org/geoserver/wms', + params: {'LAYERS': 'ne:ne'} +}); + +var wmsLayer = new ol.layer.Tile({ + source: wmsSource +}); + +var view = new ol.View2D({ + center: [0, 0], + zoom: 1 +}); + +var viewProjection = /** @type {ol.proj.Projection} */ + (view.getProjection()); + +var map = new ol.Map({ + layers: [wmsLayer], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: view +}); + +map.on('singleclick', function(evt) { + document.getElementById('info').innerHTML = ''; + var viewResolution = /** @type {number} */ (view.getResolution()); + var url = wmsSource.getGetFeatureInfoUrl( + evt.getCoordinate(), viewResolution, viewProjection, + {'INFO_FORMAT': 'text/html'}); + if (url) { + document.getElementById('info').innerHTML = + ''; + } +});