[GIS] openlayers3: layerswitcher + getfeatureinfo

getfeatureinfoopenlayers

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">&nbsp;</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.

Best Answer

I think this is a duplicate of a question asked on the OL3 Dev list which I provided some input on including linking to an example which demonstrates WMS layers with GetFeatureInfo and includes a LayerSwitcher: http://astuntechnology.github.io/osgis-ol3-leaflet/ol3/ol3-complete.html.

Related Question