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

experimenting Color Manipulation in openlayers 6 fails with tileSource.getTileGridForProjection is not a function

使用 openlayers 6.2.1,我正在尝试从 xyz 源更改图块的像素颜色(如颜色操作 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 替换 imagelayer 效果很好(源代码行 index.js:37)。

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

我是不是做错了什么,缺少一些配置?

提前感谢您的帮助或兴趣

完整代码为here(简单示例 50 行)

无错误版本可在 github page

进行测试

你的导入有误。

import ImageLayer from 'ol/layer/Tile';

应该是

import ImageLayer from 'ol/layer/Image';