I'm working on a webmapping project which use geoserver and OpenLayers 3 for the vizualisation. I'm stuck when I try to use "WMS GetFeatureInfo" and "LayerSwitcher". Both functions work individually but when I try to combine both it doesn't work anymore. I'm sure I'm on the right way but missing something...
For the GetFeatureInfo I use code like in this example: http://openlayers.org/en/v3.0.0/examples/getfeatureinfo-tile.html
and for the LayerSwitcher I have implemented this: https://github.com/walkermatt/ol3-layerswitcher
Do I may have to change something in the ol3-layerswitcher.js ?
<html lang="en">
<head>
<link rel="stylesheet" href="web/css/ol.css" type="text/css">
<style>
.map {
height: 500px;
width: 700px;
}
</style>
<script src="web/build/ol.js"></script>
<script src="web/resources/jquery.min.js" type="text/javascript"></script>
<script src="web/resources/example-behaviour.js" type="text/javascript"></script>
<link rel="stylesheet" href="web/css/ol3-layerswitcher.css" />
<script src="web/build/ol3-layerswitcher.js"></script>
<title>test</title>
</head>
<body>
<div id="map" class="map"></div>
<script>
var wmsSource = new ol.source.TileWMS({
url: 'http://xxx.xxx.xxx.xxx/geoserver/wms?',
params: {
'LAYERS': 'some:layer',
'TILED': true
},
title: 'something',
crossOrigin: 'Anonymous'
});
var wmsLayer = new ol.layer.Tile({
extent: [1254218, 6707914, 1642967, 7072840],
source: wmsSource
});
var view = new ol.View ({
center: [1450000, 6809000],
zoom: 12
});
var map = new ol.Map ({
/*renderer: exampleNS.getRendererFromQueryString(),*/
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 =
'<iframe seamless src="' + url + '"></iframe>';
}
});
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: 'Legende' // Optional label for button
});
map.addControl(layerSwitcher);
</script>
<div class="span4 offset4">
<div id="info" class="alert alert-success"> </div>
</div>
</body>
</html>
At the end I like to have a Layerswitcher which can group my layers and it should be possible to use "GetFeatureInfo" for every Layer.
