openlayer6修改地图颜色

有位老哥需要先拍在这，完事更新细节，重点是中间的函数

this.tileLayer = new TileLayer({
  source: new XYZ({
    url: this.urlTiandi + this.keyTiandi,
    layer: 'img',
    style: 'default',
    matrixSet: 'c',
    format: 'tiles',
    wrapX: false,
    tileLoadFunction: function(imageTile, src) {
      const img = new Image()
      img.crossOrigin = ''
      img.onload = function() {
        const canvas = document.createElement('canvas')
        const w = img.width
        const h = img.height
        canvas.width = w
        canvas.height = h
        const context = canvas.getContext('2d')
        context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
        const imageData = context.getImageData(0, 0, w, h)
        for (var i = 0; i < imageData.height; i++) {
          for (var j = 0; j < imageData.width; j++) {
            var x = (i * 4) * imageData.width + (j * 4)
            imageData.data[x] = imageData.data[x + 1] = imageData.data[x + 2] = imageData.data[x] * 0.3 + imageData.data[x + 1] * 0.59 + imageData.data[x + 2] * 0.11
            imageData.data[x] = 165 - imageData.data[x]
            imageData.data[x + 1] = 255 - imageData.data[x + 1]
            imageData.data[x + 2] = 255 - imageData.data[x + 2]
            // imageData.data[x] = imageData.data[x + 1] = imageData.data[x + 2] = (r + g + b) / 3
          }
        }
        context.putImageData(imageData, 0, 0)
        imageTile.getImage().src = canvas.toDataURL('image/png')
      }
      img.src = src
    }
  }),
  format: new GeoJSON()
})