From 2e29ae8bc56fb2b7d16954cb6dd84a935d586768 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 21 Aug 2014 11:54:49 +0200 Subject: [PATCH] Add a getfeatureinfo-image example --- examples/getfeatureinfo-image.html | 57 ++++++++++++++++++++++++++++++ examples/getfeatureinfo-image.js | 38 ++++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 examples/getfeatureinfo-image.html create mode 100644 examples/getfeatureinfo-image.js diff --git a/examples/getfeatureinfo-image.html b/examples/getfeatureinfo-image.html new file mode 100644 index 0000000000..39ea234eb9 --- /dev/null +++ b/examples/getfeatureinfo-image.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + GetFeatureInfo example (image layer) + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

GetFeatureInfo example (image layer)

+

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

+
+

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

+
+
getfeatureinfo
+
+
+
+   +
+
+ +
+ +
+ + + + + + + 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 = + ''; + } +});