How to get pixel value of ndvi wms layer

[SenpagaPriya]

Hi,
I am trying to get pixel of wms ndvi layer using openlayers api. I changed the evalscript in sentinelhub. But it’s not working. I want to get pixel value on map and also display images with ndvi palette color.

//VERSION=3
function setup() {
return {
input: [“B03”,“B04”, “B08”, “dataMask”],
output: [
{ id: “default”, bands: 4 },
{ id: “index”, bands: 1, sampleType: “FLOAT32” },
]
};
}

function evaluatePixel(samples) {
let val = index(samples.B08, samples.B04);
let imgVals = null;
// The library for tiffs works well only if there is only one channel returned.
// So we encode the “no data” as NaN here and ignore NaNs on frontend.
const indexVal = samples.dataMask === 1 ? val : NaN;
if (val<-0.5) imgVals = [0.05,0.05,0.05,samples.dataMask];
else if (val<-0.2) imgVals = [0.75,0.75,0.75,samples.dataMask];
else if (val<-0.1) imgVals = [0.86,0.86,0.86,samples.dataMask];
else if (val<0) imgVals = [0.92,0.92,0.92,samples.dataMask];
else if (val<0.025) imgVals = [1,0.98,0.8,samples.dataMask];
else if (val<0.05) imgVals = [0.93,0.91,0.71,samples.dataMask];
else if (val<0.075) imgVals = [0.87,0.85,0.61,samples.dataMask];
else if (val<0.1) imgVals = [0.8,0.78,0.51,samples.dataMask];
else if (val<0.125) imgVals = [0.74,0.72,0.42,samples.dataMask];
else if (val<0.15) imgVals = [0.69,0.76,0.38,samples.dataMask];
else if (val<0.175) imgVals = [0.64,0.8,0.35,samples.dataMask];
else if (val<0.2) imgVals = [0.57,0.75,0.32,samples.dataMask];
else if (val<0.25) imgVals = [0.5,0.7,0.28,samples.dataMask];
else if (val<0.3) imgVals = [0.44,0.64,0.25,samples.dataMask];
else if (val<0.35) imgVals = [0.38,0.59,0.21,samples.dataMask];
else if (val<0.4) imgVals = [0.31,0.54,0.18,samples.dataMask];
else if (val<0.45) imgVals = [0.25,0.49,0.14,samples.dataMask];
else if (val<0.5) imgVals = [0.19,0.43,0.11,samples.dataMask];
else if (val<0.55) imgVals = [0.13,0.38,0.07,samples.dataMask];
else if (val<0.6) imgVals = [0.06,0.33,0.04,samples.dataMask];
else imgVals = [0,0.27,0,samples.dataMask];

return {
  default: imgVals,
  index:[val]
};

}
function isCloud(samples){
const NGDR = index(samples.B03, samples.B04);
const bRatio = (samples.B03 - 0.175) / (0.39 - 0.175);
return bRatio > 1 || (bRatio > 0 && NGDR > 0);
}

openlayers api

gndvi = new ol.layer.Tile({
title: lyr,

    id: lyr,

    source: new ol.source.TileWMS({

        url: `https://services.sentinel-hub.com/ogc/wms/${sentinel_id}`,

        params: { "urlProcessingApi": `https://services.sentinel-hub.com/ogc/wms/${sentinel_id}`, "maxcc": 15, "minZoom": 6, "maxZoom": 16, "preset": lyr, "layers": lyr, "time": date,'FORMAT': 'image/png' },

        transition: 0
    }),
}, { displayInLayerSwitcher: false });
});
map.addLayer(gndvi);

please help me. It’s urgent.
Thank you

[chung.horng (Chung)]

Hi @SenpagaPriya ,

As far as I know WMS does not support multiple outputs, you’ll need to make two separate requests to get the actual NDVI value and the visualisation.

For example, you can have a NDVI actual value layer using the following Evalscript, and make a WMS request as shown below to get the pixel value.

The Evalscript for actual NDVI value:

//VERSION=3

function evaluatePixel(samples) {
    let val = index(samples.B08, samples.B04);
    return [val];
}

function setup() {
  return {
    input: [{
      bands: [
        "B04",
        "B08",
      ]
    }],
    output: {
      bands: 1,
      sampleType: "FLOAT32"
    }
  }
}

The WMS request to get actual NDVI value:

https://services.sentinel-hub.com/ogc/wms/<instance_id>?REQUEST=GetMap&CRS=CRS:84&BBOX=12.44693,41.870072,12.541001,41.917096&LAYERS=<ndvi-value>&WIDTH=512&HEIGHT=343&FORMAT=image/tiff&TIME=2023-03-18/2023-04-18

To get the NDVI visualisation, you can create another layer using the following Evalscript, and then make another WMS request as shown below to obtain the NDVI visualisation layer.

The Evalscript for NDVI visualisation:

//VERSION=3

let viz = ColorMapVisualizer.createDefaultColorMap();

function evaluatePixel(samples) {
    let val = index(samples.B08, samples.B04);
    val = viz.process(val);
    val.push(samples.dataMask);
    return val;
}

function setup() {
  return {
    input: [{
      bands: [
        "B04",
        "B08",
        "dataMask"
      ]
    }],
    output: {
      bands: 4
    }
  }
}

The WMS request to get NDVI visualisation:

https://services.sentinel-hub.com/ogc/wms/<instance_id>?REQUEST=GetMap&CRS=CRS:84&BBOX=12.44693,41.870072,12.541001,41.917096&LAYERS=<ndvi-visualisation>&WIDTH=512&HEIGHT=343&FORMAT=image/png&TIME=2023-03-18/2023-04-18

If you prefer to make only one request, you can use the Evalscript you provided in the post, and make a request using Processing API. In this case you can get both raw NDVI value and the visualisation, but you can’t display them at the same time on the map.