在 openlayers 6 中尝试颜色操作失败，因为 tileSource.getTileGridForProjection 不是函数

Question

使用 openlayers 6.2.1，我正在尝试从 xyz 源更改图块的像素颜色（如 Color Manipulation example），

我首先定义一个 XYZ 源：

const xyz = new XYZ({
    url: 'https://mbenzekri.github.io/frcommunes/fr/communes/{z}/{x}/{y}.png',
    maxZoom: 12,
    minZoom: 5
})

然后是一个 RasterSource 来操作颜色

const rastersource= new Raster({
    sources: [ xyz ],
    operation: function (pixels, data) { 
        pixels[0] = pixels[0] 
        pixels[1] = pixels[1] 
        pixels[2] = pixels[2] 
    }
})

然后是 ImageLayer ：

const imagelayer = new ImageLayer({
    source: rastersource
})

在我的地图中通过 OSM 图层对象添加此图层失败，并在渲染时显示消息：

TileLayer.js:160 Uncaught TypeError: tileSource.getTileGridForProjection is not a function
    at CanvasTileLayerRenderer.renderFrame (TileLayer.js:160)
    at TileLayer.Layer.render (Layer.js:216)
    at CompositeMapRenderer.renderFrame (Composite.js:112)
    at Map.PluggableMap.renderFrame_ (PluggableMap.js:1265)
    at Map.<anonymous> (PluggableMap.js:186)

用具有相同 xyz 源的简单 TileLayer 替换图像层可以正常工作（源代码行 index.js:37）。

const tilelayer = new TileLayer({
    source: xyz
})

我做错了什么，缺少一些配置吗？

提前感谢您的帮助或关注

完整代码为here（简单示例50行）

无错误版本可在github page 进行测试

Answer 1

您的导入错误。

import ImageLayer from 'ol/layer/Tile';

应该是

import ImageLayer from 'ol/layer/Image';