1

I'm using GeoServer and I need to put the value of NDVI from four different wms into a chart. I'm using also OpenLayer for my map.

map.on('singleclick', function(evt) {
  var viewResolution = view.getResolution();

  var ndvi_array = [], ndvi_20200706, ...

  var url_20200706 = sourceNDVI_20200706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  console.log(url_20200706);
    fetch(url_20200706)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
  
        var json = JSON.parse(data).features[0];
  
        var ndvi_20200706 = json.properties.GRAY_INDEX;
  
      }).catch((error) => {
        console.warn(error)
      });
  console.log("NDVI 6 luglio 2020: "+ndvi_20200706);
  ndvi_array.push(ndvi_20200706);
  
   var url_20190706 = sourceNDVI_20190706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  console.log(url_20190706);
    fetch(url_20190706)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
  
        var json = JSON.parse(data).features[0];
  
        var ndvi_20190706 = json.properties.GRAY_INDEX;
  
      }).catch((error) => {
        console.warn(error)
      });
  
.
.
.

console.log("Array: "+ndvi_array);

});

I'm be able to see on the map all wms.

EDIT 1

Probably my question isn't clear and I've edit the code with all my purpouse. What I want to do is put the NDVI index of all WMS into an array because I need to use an array for a chart.

EDIT 2(after @Mike indications)

I've edited all code, now in console log I see this when I click on a point:

NDVI 6 luglio 2020: undefined Array:

  • What is in the response from the server if you look in the developer tools of the browser? most likely error is you forgot to set CORS support – Ian Turton Jul 26 at 10:01
  • Inside developer tools I see this error when I click on a point: Uncaught TypeError: url_20200706.features is undefined. Where I must set the CORS support? – Massimiliano Moraca Jul 26 at 10:08
  • @Ian Turton you cannot get a CORS error without a network request. url_20200706 is a url string, it does not have a features property, the url needs to be fetched. – Mike Jul 26 at 10:44
  • See the example openlayers.org/en/latest/examples/getfeatureinfo-image.html After calling getFeatureInfoUrl you must fetch the url to obtain the data – Mike Jul 26 at 10:52
  • @mike I know that I can use fetch, I've edit my question with my complete code, I don't have a strong Javascript skills. – Massimiliano Moraca Jul 26 at 11:27
3

The code in the data callback is asynchronous and won't run until after the console.log. Also you have redeclared ndvi_20200706 by using var in the callback

You could simply set a timeout and hope all your results are in after 5 seconds

  var viewResolution = view.getResolution();

  var ndvi_array = [], ndvi_20200706, ...

  var url_20200706 = sourceNDVI_20200706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  console.log(url_20200706);
    fetch(url_20200706)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
  
        var json = JSON.parse(data).features[0];
  
        ndvi_20200706 = json.properties.GRAY_INDEX;
        ndvi_array.push(ndvi_20200706);
  
      }).catch((error) => {
        console.warn(error)
      });

setTimeout(function(){
  console.log("NDVI 6 luglio 2020: "+ndvi_20200706);
  console.log("ndvi_array: "+ndvi_array);
}, 5000);

But it would be better to wait for all the fetches to complete and handle the results together, something like

map.on('singleclick', function(evt) {
  var viewResolution = view.getResolution();

  var fetches = [];
  var url_20200706 = sourceNDVI_20200706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  fetches.push(fetch(url_20200706)
    .then(function (response) {
      return response.text(); }));

  var url_20190706 = sourceNDVI_20190706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  fetches.push(fetch(url_20200706)
    .then(function (response) {
      return response.text(); }));

  Promise.all(fetches).then(function(results) {
    var ndvi_array = [];
    results.forEach(function (data) {
      var json = JSON.parse(data).features[0];
      var ndvi_20200706 = json.properties.GRAY_INDEX;
      ndvi_array.push(ndvi_20200706);
    });
    console.log("ndvi_array: "+ndvi_array);

    // continue your processing here

  });
});

For more info including error handling see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

| improve this answer | |

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.