0

I want to show the features of a layer from a GeoServer WMS at the point where I click with OpenLayers 3. I used this tutorial but when I use my own server the URL that getGetFeatureInfoUrl returns is always unidentified.

Below is my code:

<!DOCTYPE html>
<html>
<head>
<title>WMS GetFeatureInfo (Tile Layer)</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
</script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js">
</script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info">Info Bereich: &nbsp;</div>
<script>

  //OSM Layer einbinden
  var osmlayer = new ol.layer.Tile({source: new ol.source.OSM()});

  //Feauters Layer
  var ErdRoomsSource = new ol.source.TileWMS({
      source: new ol.source.ImageWMS({
      url: 'http://localhost:8080/geoserver/wms?',
      params: {'LAYERS': 'HTW_Erd:Rooms', 'TILED': true},
      serverType: 'geoserver',
      crossOrigin: 'anonymous'
      })
    });

  var ErdRooms = new ol.layer.Tile({
    source: ErdRoomsSource
  });

  //Visual Layer
  var ErdRoomsImage = new ol.layer.Image({
      source: new ol.source.ImageWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {'LAYERS': 'HTW_Erd:Rooms', 'STYLES': 'polygon', 'VERSION': '2.11.0', 'FORMAT': 'image/png'},
      ratio: 1,
      serverType: 'geoserver',
      })
    });

  osmlayer.setZIndex(0);
  ErdRoomsImage.setZIndex(1);

  var layers = [osmlayer, ErdRoomsImage];
  var view = new ol.View({
      center: [1529088.5676403488, 6627805.4185389215],
      zoom: 18
  });
  var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: view
  });

  map.on('singleclick', function(evt) {
    document.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = ErdRoomsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:4326',
        {'INFO_FORMAT': 'text/plain', 'propertyName': 'ref'});

    document.getElementById('info').innerHTML = 'url: ' + url;
    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() {
      return true;
    });
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });
</script>
</body>
</html>

Maybe it is just something with the settings of my server but I don't know what I could have forgotten. I hope you can help my at this problem.

  • You say you are using OpenLayers 3 in your question, but the JavaScript in your code is OpenLayers 4. Can you provide an example of the GetFeatureInfo request that is generated, and the error you get if you use that URL in a browser. – nmtoken Jul 4 '17 at 21:53
0

When you create your source:

var ErdRoomsSource = new ol.source.TileWMS({
  source: new ol.source.ImageWMS({
  url: 'http://localhost:8080/geoserver/wms?',
  params: {'LAYERS': 'HTW_Erd:Rooms', 'TILED': true},
  serverType: 'geoserver',
  crossOrigin: 'anonymous'
  })
});

You are wrapping one source inside another, you only need one or the other. So something like:

var ErdRoomsSource = new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms?',
  params: {'LAYERS': 'HTW_Erd:Rooms', 'TILED': true},
  serverType: 'geoserver',
  crossOrigin: 'anonymous'
});

should work just fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.