Javascript 使用tileSource在openlayers 6中尝试颜色操作失败。getTileGridForProjection不是一个函数

使用openlayers 6.2.1，我试图从xyz源更改瓷砖的像素颜色（如颜色操纵）

我首先定义一个XYZ源：

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

然后使用光栅源来操纵颜色

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

然后是图像层：

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)

我是否做错了什么，丢失了一些配置

提前感谢您的帮助或兴趣

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

无缺陷版本可在

进行测试。您的导入错误

import ImageLayer from 'ol/layer/Tile';

应该是

import ImageLayer from 'ol/layer/Image';

import ImageLayer from 'ol/layer/Image';