1

I have a problem with GetFeatureInfo (I'm working with openlayers). In my HTML file I have this:

  <div id="map" class="jumbotron">
      <h1>Sieraków <span class="badge badge-secondary">MAPA</span></h1>
  </div>
  <div id="info"></div>

And I want to show some info in div #info. In javascript I have layer from geoserver:

var theurl = 'http://localhost:8080/geoserver/sierakow/wms';
    var jeziora = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: theurl,
            params: {'LAYERS': 'sierakow:jeziora'},
            serverType: 'geoserver'
          })
    });
    map.addLayer(jeziora);

    map.on('singleclick', function(evt) {
            document.getElementById('info').innerHTML = '';
            var viewResolution = view.getResolution();
            var url = jeziora.getGetFeatureInfoUrl(
              evt.coordinate, viewResolution, 'EPSG:4326',
              {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
            if (url) {
              document.getElementById('info').innerHTML =
                  '<iframe seamless src="' + url + '"></iframe>';
            }
    });

To do this I followed this examples: LINK I also try THIS ONE with parsing but result is the same, nothing happend. My div #info is still empty and I don't know why.

Console show me this errors:

Uncaught TypeError: jeziora.getGetFeatureInfoUrl is not a function

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

This is url:

http://localhost:8080/geoserver/sierakow/wms?SERVICE=WMS
&VERSION=1.3.0
&REQUEST=GetFeatureInfo
&FORMAT=image%2Fpng
&TRANSPARENT=true
&QUERY_LAYERS=sierakow%3Ajeziora
&LAYERS=sierakow%3Ajeziora
&INFO_FORMAT=text%2Fhtml
&FEATURE_COUNT=50
&I=50
&J=50
&CRS=EPSG%3A4326
&STYLES
&WIDTH=101
&HEIGHT=101
&BBOX=6919511.668971639%2C1779979.5230483634%2C6921441.703935839%2C1781909.558012564

And this error shows:

Refused to display 'http://localhost:8080/geoserver/sierakow/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=sierakow%3Ajeziora&LAYERS=sierakow%3Ajeziora&INFO_FORMAT=text%2Fplain&FEATURE_COUNT=50&I=50&J=50&CRS=EPSG%3A4326&STYLES&WIDTH=101&HEIGHT=101&BBOX=6918701.436880034%2C1786965.867550262%2C6920631.4718442345%2C1788895.9025144626' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I will be greatful for every tips how to do that :)

4
  • please edit your question with details of the request sent to the server and the response that is sent back. – Ian Turton Nov 5 '18 at 9:29
  • var url = jeziora.getSource().getGetFeatureInfoUrl( – Mike Nov 5 '18 at 9:53
  • Presumably you are not running the html from port 8080 so it's a cross origin issue. Either use the same port for everything or add crossOrigin: 'Anonymous', to the source options and ensure the WMS server returns an Access-Control-Allow-Origin * header. – Mike Nov 5 '18 at 10:44
  • I'm surprised you get any output considering CRS is EPSG::4326 expecting values +/-180 and BBOX has values far in excess of this 6919511.668971639%2C1779979.5230483634%2C6921441.703935839%2C1781909.558012564 – nmtoken Jan 1 '20 at 11:10
3

Thanks for all your help! This is the solution:

map.on('singleclick', function(evt) {
         document.getElementById('info').innerHTML = '';
         var viewResolution = view.getResolution();
         var url = jeziora.getSource().getGetFeatureInfoUrl(
           evt.coordinate, viewResolution, view.getProjection(),
           {'INFO_FORMAT': 'application/json', 'propertyName': 'nam'});
           if (url) {
            var parser = new ol.format.GeoJSON();
            $.ajax({
              url: url,
              dataType: 'json',
              jsonpCallback: 'parseResponse'
            }).then(function(response) {
              var result = parser.readFeatures(response);
              if (result.length) {
                var inf = [];
                for (var i = 0, ii = result.length; i < ii; ++i) {
                  inf.push(result[i].get('nam'));
                }
                 document.getElementById('info').innerHTML = inf.join(', ');
              } else {
                 document.getElementById('info').innerHTML = '&nbsp;';
              }
            });
          }
      });

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.