OpenLayers：从 TileImage 源创建 NDVI 栅格

Question

我正在尝试重新创建 https://openlayers.org/en/v4.6.5/examples/raster.html 中给出的示例的一部分，并进行一些调整：

我使用的是 TileImage 源而不是 Bing Maps Aerial 图层
我正在计算 NDVI 而不是 VGI
我想将 NDVI 显示为灰度图，其中 0 为黑色，1 为白色
我不需要在图表中计算或显示统计数据

以下是我的代码的相关部分：

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);

当 OpenLayers 尝试渲染层时，我收到以下相当无用的错误消息：

Uncaught TypeError: l.eb is not a function

我已经尝试运行使用 ol-debug.js 而不是 ol.js 的脚本，在这种情况下我得到以下结果：

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)

map-nav.js的第328行，如上述错误中所述，对应于上面提供的第一个代码块的以下行：

sources: [window["L8SourceNRG"]],

从其他地方阅读，我认为上述错误是一个未解决的 pixelworks 依赖问题，它只影响 ol-debug.js 而不是 ol.js，不幸的是我不能使用 ol-debug.js，虽然我在这方面可能是错的。

我确定我的 TileImage 源没问题，因为我可以在其他图层中使用它。我只能得出结论，使用 TileImage 源创建栅格源时需要一些额外的步骤，而使用 Bing 地图图块源创建栅格源时不需要这些步骤。非常感谢这里的任何线索。

编辑：添加代码以显示源 L8SourceNDVI2 如何加载到 'L8NDVI2Layer' 层中，该层最初不可见，但随后设置为可见。这些行都没有抛出任何错误，并且在执行这些行之后我没有运行任何代码 - 错误似乎来自 OL 中在那之后发生的某个进程，可能与渲染层有关或刷新地图？

编辑 2：我注意到，如果我将 L8SourceNDVI2 更改为新的 ol.source.TileImage 而不是栅格，则不会触发错误，但该图层根本不会显示在地图上。不知道这是什么意思。

Answer 1

ol.source.Raster 生成图像，而不管它使用的源类型如何。因此，必须使用 ol.layer.Image

构建使用栅格源的图层

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

OpenLayers：从 TileImage 源创建 NDVI 栅格

OpenLayers: Creating NDVI raster from TileImage source

javascript

openlayers