0

I am trying to display layer data on map click but I can't figure out how to do it. There is not an example of this important feature.

I believe it's the getfeatureinfo event. Here is the messy API documentation. Here is what i am trying i am getting js.js:148 Uncaught ReferenceError: view is not defined

Update:

I am following this example only and i managed to make it work. Though, it's not what I actually want to achieve. I want to access columns as variables and not display the whole table in an iframe as shown in this poor example

This is closer of what i am trying but it loads an xml file. Another weird example.

    var map = new ol.Map({
      target: 'map',
      layers: [baseLayer, wmsLayer],
      view: new ol.View({
        center: ol.proj.fromLonLat([33.33386, 35.14710]),
        zoom: 14
      })
    });
       map.on('click', function (evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = map.getView().getResolution();
  var url = wmsSource.getGetFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857', {
      'INFO_FORMAT': 'text/html'
    });

  if (url) {
    console.log(url);
    document.getElementById('info').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
    // fetch(url).then(function (response) {
    //   return response.text();
    // }).then(function (response) {
    //   // this is the standard way to read the features
    //   var allFeatures = new WMSGetFeatureInfo().readFeatures(response);
    //   console.log(allFeatures.length.toString());
    // });
  }
});

  • To get a GML response from the server use 'INFO_FORMAT': 'application/vnd.ogc.gml' Before calling new ol.format.WMSGetFeatureInfo().readFeatures(response); insert console.log(response); to check the server supports the setting. – Mike Mar 22 at 17:47
  • i really got confused. Can you show an example how to properly read features from the layer? – csandreas1 Mar 26 at 11:34
  • @Mike Is it possible to receive as response specific columns in JSON but not inside an iframe? – csandreas1 Mar 26 at 13:14
  • Yes, but depends on which formats the WMS has been set up to support – Mike Mar 26 at 13:41
3

You would need to check the GetCapabilities for the WMS to see which formats are supported

enter image description here

If supported you can parse application/vnd.ogc.gml to an OpenLayers feature array using the WMSGetFeatureInfo format

map.on('click', function (evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = map.getView().getResolution();
  var url = wmsSource.getGetFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857', {
      'INFO_FORMAT': 'application/vnd.ogc.gml'
    });

  if (url) {
    console.log(url);
    fetch(url).then(function (response) {
      return response.text();
    }).then(function (response) {
      // this is the standard way to read the features
      var allFeatures = new WMSGetFeatureInfo().readFeatures(response);
      console.log(allFeatures.length.toString());
    });
  }
});

application/json returns a GeoJSON

map.on('click', function (evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = map.getView().getResolution();
  var url = wmsSource.getGetFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857', {
      'INFO_FORMAT': 'application/json'
    });

  if (url) {
    console.log(url);
    fetch(url).then(function (response) {
      return response.text();
    }).then(function (response) {
      // this is the standard way to read the features
      var allFeatures = new GeoJSON().readFeatures(response);
      console.log(allFeatures.length.toString());
    });
  }
});

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.