Javascript OpenLayers:从TileImage源创建NDVI光栅

Javascript OpenLayers:从TileImage源创建NDVI光栅,javascript,openlayers,Javascript,Openlayers,我尝试重新创建在中给出的示例的一部分,并做了一些调整: 我使用的是TileImage源,而不是Bing地图空中图层 我在计算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

我尝试重新创建在中给出的示例的一部分,并做了一些调整:

  • 我使用的是TileImage源,而不是Bing地图空中图层
  • 我在计算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)
从其他地方阅读,我相信上述错误是一个未解决的pixelworks依赖性问题,它只影响ol-debug.js而不影响ol.js,不幸的是,这意味着我不能使用ol-debug.js,尽管我可能在这方面错了

我确信我的TileImage源代码是可以的,因为我可以在其他层中使用它。我只能得出结论,在使用TileImage源创建光栅源时需要一些额外的步骤,而在使用Bing Maps tile源创建光栅源时不需要这些步骤。如果这里有任何线索,我将不胜感激

编辑:添加代码以显示如何将源L8SourceNDVI2加载到“L8NDVI2Layer”层,该层最初不可见,但随后设置为可见。这两行都不会抛出任何错误,而且在执行这些行之后,我也不会运行任何代码-错误似乎来自于在该点之后在OL中发生的某个进程,可能与渲染层或刷新贴图有关


编辑2:我注意到,如果我将L8SourceNDVI2更改为新的ol.source.TileImage而不是光栅,则不会触发错误,但图层根本不会显示在地图上。不确定这意味着什么。

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

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

我认为你不能把源头置于源头之下。另外,该源的图层在哪里?您应该遵循map->layer->source我提到的示例()使用了source结构下的source,所以我认为这不是问题的根源。我已经编辑了我的问题,以包含将L8SourceNDVI2放入一个层的代码。
window['L8NDVI2Layer']=new ol.layer.Tile({
应该是
window['L8NDVI2Layer']=new ol.layer.Image({
当然!这是我没想到要检查的地方。这就解决了问题-谢谢@Mike。如果你想把你的评论复制到答案中,我会接受的,你可以抓住要点。
window['L8NDVI2Layer'] = new ol.layer.Image({ source:window["L8SourceNDVI2"], visible: false });