Use forEachLayerAtPx in example

This commit is contained in:
tsauerwein
2015-01-26 11:20:59 +01:00
parent dce4210a5b
commit b7415219a6
4 changed files with 28 additions and 4 deletions

View File

@@ -35,9 +35,11 @@
<h4 id="title">GetFeatureInfo example (image layer)</h4>
<p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.</p>
<div id="docs">
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse
pointer when hovering a non-transparent pixel on the map.</p>
<p>See the <a href="getfeatureinfo-image.js" target="_blank">getfeatureinfo-image.js source</a> to see how this is done.</p>
</div>
<div id="tags">getfeatureinfo</div>
<div id="tags">getfeatureinfo, forEachLayerAtPixel</div>
</div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">

View File

@@ -7,7 +7,8 @@ goog.require('ol.source.ImageWMS');
var wmsSource = new ol.source.ImageWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver'
serverType: 'geoserver',
crossOrigin: ''
});
var wmsLayer = new ol.layer.Image({
@@ -20,6 +21,7 @@ var view = new ol.View({
});
var map = new ol.Map({
renderer: exampleNS.getRendererFromQueryString(),
layers: [wmsLayer],
target: 'map',
view: view
@@ -36,3 +38,11 @@ map.on('singleclick', function(evt) {
'<iframe seamless src="' + url + '"></iframe>';
}
});
$(map.getViewport()).on('mousemove', function(evt) {
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

View File

@@ -35,9 +35,11 @@
<h4 id="title">WMS GetFeatureInfo example (tile layer)</h4>
<p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.</p>
<div id="docs">
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse
pointer when hovering a non-transparent pixel on the map.</p>
<p>See the <a href="getfeatureinfo-tile.js" target="_blank">getfeatureinfo-tile.js source</a> to see how this is done.</p>
</div>
<div id="tags">getfeatureinfo</div>
<div id="tags">getfeatureinfo, forEachLayerAtPixel</div>
</div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">

View File

@@ -7,7 +7,8 @@ goog.require('ol.source.TileWMS');
var wmsSource = new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver'
serverType: 'geoserver',
crossOrigin: ''
});
var wmsLayer = new ol.layer.Tile({
@@ -20,6 +21,7 @@ var view = new ol.View({
});
var map = new ol.Map({
renderer: exampleNS.getRendererFromQueryString(),
layers: [wmsLayer],
target: 'map',
view: view
@@ -36,3 +38,11 @@ map.on('singleclick', function(evt) {
'<iframe seamless src="' + url + '"></iframe>';
}
});
$(map.getViewport()).on('mousemove', function(evt) {
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});