openlayers6上加载天地图 ，并改变其颜色

利用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