利用tileLoadFunction和,canvas 对拿过来的瓦片图 进行颜色改变。然后再放回到imageTile里
```javascript
let lay = new ol.layer.Tile({
name: "影像",
zxtype: "layer",
layerid: "tmapI",
visible: true,
source: new ol.source.WMTS({
name: "天地图影像地图",
url: "http://t{0-7}.tianditu.gov.cn/img_c/wmts?tk=自己的keey",
layer: "img",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: false,
//地图缩小后,防止在一个页面出现多个一样的地图
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
tileLoadFunction:function(imageTile, src) {
let img = new Image();
img.crossOrigin = '';
img.onload = function () {
let canvas = document.createElement('canvas');
let w = img.width;
let h = img.height;
canvas.width = w;
canvas.height = h;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
let imageData = context.getImageData(0, 0, w, h);
for(i = 0; i<imageData.height; i++){
for(j = 0; j<imageData.width; j++){
var x = (i*4) * imageData.width + (j*4);
var r = imageData.data[x];
var g = imageData.data[x+1];
var b = 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;
}
}),
maxResolution: resolutions[0],
minResolution: resolutions[19]
})
第二种就是 直接给openlayers的 canvas 的css 添加一个滤镜filter