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

加载天地图 ，并改变其颜色"/>

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/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