OpenLayers: Creating NDVI raster from TileImage source

Question

I'm trying to recreate part of the example given at https://openlayers.org/en/v4.6.5/examples/raster.html, with a few adjustments:

• I'm using a TileImage source rather than the Bing Maps Aerial layer
• I'm calculating NDVI rather than VGI
• I want to display NDVI as a greyscale map where values of 0 are black and values of 1 are white
• I don't need to calculate or display stats in a chart

Here are the relevant parts of my code:

function ndvi(pixel) {
  var n = pixel[0] / 255;
  var r = pixel[1] / 255;
  var g = pixel[2] / 255;
  return (n - r) / (n + r);
}

window["L8SourceNRG"] = new ol.source.TileImage({
  url: NRGtileURL,
  crossOrigin: 'anonymous',
  transition: 0,
  tileGrid: ol.tilegrid.createXYZ({maxZoom : maxZoomLevel})
});

window["L8SourceNDVI2"] = new ol.source.Raster({
  sources: [window["L8SourceNRG"]],
  operation: function(pixels, data) {
    var pixel = pixels[0];
    var value = ndvi(pixel);
    if (value > 0) {
      pixel[0] = value * 255;
      pixel[1] = value * 255;
      pixel[2] = value * 255;
      pixel[3] = 128;
    } else {
      pixel[3] = 0;
    }
    return pixel;
  },
  lib: {
    ndvi: ndvi
  }
});

window['L8NDVI2Layer'] = new ol.layer.Tile({ source:window["L8SourceNDVI2"], visible: false });

window['L8NDVI2Layer'].set('visible', true);

When OpenLayers attempts to render the layer, I get the following fairly unhelpful error message:

Uncaught TypeError: l.eb is not a function

I have tried running the script using ol-debug.js rather than ol.js, in which case I get the following:

ol-debug.js:78547 Uncaught TypeError: Cannot read property 'Processor' of undefined
    at ol.source.Raster.setOperation (ol-debug.js:78547)
    at new ol.source.Raster (ol-debug.js:78532)
    at Object.<anonymous> (map-nav.js:328)
    at Object.<anonymous> (VM23112 jquery.min.js:2)
    at j (VM23112 jquery.min.js:2)
    at Object.fireWith [as resolveWith] (VM23112 jquery.min.js:2)
    at Object.<anonymous> (VM23112 jquery.min.js:2)
    at j (VM23112 jquery.min.js:2)
    at Object.fireWith [as resolveWith] (VM23112 jquery.min.js:2)
    at x (VM23112 jquery.min.js:4)

Line 328 of map-nav.js, as mentioned in the above error, corresponds with the following line of the first block of code provided above:

sources: [window["L8SourceNRG"]],

From reading elsewhere, I believe the above error is an unresolved pixelworks dependency issue which only affects ol-debug.js and not ol.js, and unfortunately means I can't use ol-debug.js, although I may be wrong on this.

I am certain that my TileImage source is OK, as I can use it in other layers. I can only conclude that there is some extra step required when using a TileImage source to create a raster source which isn't required when using a Bing Maps tile source to create a raster source. Would really appreciate any clues here.

EDIT: Added code to show how the source L8SourceNDVI2 is loaded into a 'L8NDVI2Layer' layer, which is initially not visible, but then set to visible. Neither of these lines throw any errors, and I'm not running any code after those lines are executed - the error seems to be coming from some process that happens within OL after that point, perhaps to do with rendering the layer or refreshing the map?

EDIT 2: I've noticed that if I change L8SourceNDVI2 to a new ol.source.TileImage rather than a Raster, the error doesn't fire, but the layer doesn't show on the map at all. Not sure what this means.

Answer 1

ol.source.Raster produces an image regardless of the type of source it uses. Therefore a layer which uses a raster source must be constructed using ol.layer.Image

window['L8NDVI2Layer'] = new ol.layer.Image({ source:window["L8SourceNDVI2"], visible: false });