Query the pixel value from the active WMS layer

Question

I need to see the pixel value from a single visible WMS. In my project I've this two WMS:

/// WMS sources and layers
var wms_path = 'https://gis.massimilianomoraca.it/geoserver/MassimilianoMoraca/wms';

var sourceNDVI_20150807 = new ol.source.TileWMS({
  url: wms_path,
  params: {
    'LAYERS': 'NDVI_Campania_20150807',
  },
});
var titleNDVI_20150807 = 'NDVI_Campania_20150807';
var layerNDVI_20150807 = new ol.layer.Tile({
  title: titleNDVI_20150807,
  source: sourceNDVI_20150807,
  visible: false
});

var sourceNDVI_20160712 = new ol.source.TileWMS({
  url: wms_path,
  params: {
    'LAYERS': 'NDVI_Campania_20160712',
  },
});
var layerNDVI_20160712 = new ol.layer.Tile({
  title: 'NDVI_Campania_20160712',
  source: sourceNDVI_20160712,
  visible: false
});

I'm be able to see on the map this datas. I've created the function below whit the aim to active and deactive the single layer.

<button type="button" class="btn btn-primary"
  onclick="NDVI_Campania_20150807()">NDVI_Campania_20150807</button>
<button type="button" class="btn btn-success"
  onclick="NDVI_Campania_20160712()">NDVI_Campania_20160712</button>


function NDVI_Campania_20150807() {
  console.log('NDVI_Campania_20150807');
  map.removeLayer(layerNDVI_20160712);
  map.addLayer(layerNDVI_20150807);
  layerNDVI_20150807.setVisible(true);

  /// Click on pixel
  map.on('singleclick', function(evt) {
    var coordinate = evt.coordinate;
    var resolution = view.getResolution();
    var projection = 'EPSG:3857';
    var params = {
            'INFO_FORMAT': 'application/json',
          };

    var url_20150807 = sourceNDVI_20150807.getFeatureInfoUrl(
      coordinate, resolution, projection, params
    );
    fetch(url_20150807)
    .then(function (response) {
      return response.text(); })
    .then(function (data) {
      json = JSON.parse(data).features[0];

      ndvi_20150807 = json.properties.GRAY_INDEX;
      date_20150807 = '7 agosto 2015';

      index_20150807 = [1,date_20150807,ndvi_20150807]

    }).catch((error) => {
      console.warn(error)
    });

  });

};

function NDVI_Campania_20160712() {
  console.log('NDVI_Campania_20160712');
  map.removeLayer(layerNDVI_20150807);
  map.addLayer(layerNDVI_20160712);

  layerNDVI_20160712.setVisible(true);
  layerNDVI_20150807.setVisible(false);

  /// Funzione click pixel
  map.on('singleclick', function(evt) {
    var coordinate = evt.coordinate;
    var resolution = view.getResolution();
    var projection = 'EPSG:3857';
    var params = {
            'INFO_FORMAT': 'application/json',
          };

    var url_20160712 = sourceNDVI_20160712.getFeatureInfoUrl(
      coordinate, resolution, projection, params
    );
    fetch(url_20160712)
    .then(function (response) {
      return response.text(); })
    .then(function (data) {

      var json = JSON.parse(data).features[0];

      ndvi_20160712 = json.properties.GRAY_INDEX;
      date_20160712 = '12 luglio 2016';

      index_20160712 = [2,date_20160712,ndvi_20160712]
      console.log(index_20160712);

    }).catch((error) => {
      console.warn(error)
    });

  });

};

I can active and deactive the layers but if I click on the pixel I see the datas from both layers. How I can see the pixel value from the active layer?

Answer 1

In your button click handlers only change the layers

function NDVI_Campania_20150807() {
  console.log('NDVI_Campania_20150807');
  map.removeLayer(layerNDVI_20160712);
  map.addLayer(layerNDVI_20150807);
  layerNDVI_20150807.setVisible(true);
  layerNDVI_20160712.setVisible(false);
};

function NDVI_Campania_20160712() {
  console.log('NDVI_Campania_20160712');
  map.removeLayer(layerNDVI_20150807);
  map.addLayer(layerNDVI_20160712);
  layerNDVI_20160712.setVisible(true);
  layerNDVI_20150807.setVisible(false);
};

and set a single map click listener which queries whichever layer is visible

  map.on('singleclick', function(evt) {
    var coordinate = evt.coordinate;
    var resolution = view.getResolution();
    var projection = 'EPSG:3857';
    var params = {
            'INFO_FORMAT': 'application/json',
          };

    if (layerNDVI_20150807.getVisible()) {

      var url_20150807 = sourceNDVI_20150807.getFeatureInfoUrl(
        coordinate, resolution, projection, params
      );
      fetch(url_20150807)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
        json = JSON.parse(data).features[0];

        ndvi_20150807 = json.properties.GRAY_INDEX;
        date_20150807 = '7 agosto 2015';

        index_20150807 = [1,date_20150807,ndvi_20150807]

      }).catch((error) => {
        console.warn(error)
      });

    } else if (layerNDVI_20160712.getVisible()) {

      var url_20160712 = sourceNDVI_20160712.getFeatureInfoUrl(
        coordinate, resolution, projection, params
      );
      fetch(url_20160712)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
        var json = JSON.parse(data).features[0];

        ndvi_20160712 = json.properties.GRAY_INDEX;
        date_20160712 = '12 luglio 2016';

        index_20160712 = [2,date_20160712,ndvi_20160712]
        console.log(index_20160712);

      }).catch((error) => {
        console.warn(error)
      });

    }
  });