1 效果预览

我们用osm底图做演示，先看原始切图样式如下:

反转色:

复古色:

饱和度调整:

色相反转:

亮度:

模糊:

灰度:

2 实现原理

监听图层postcompose事件，添加filter过滤方法即可；

                                    
layer.on('postcompose', function (event) {
    event.context.filter = 'invert(100%)';
});
                                    
                                

filter的值完全跟canvas一样，MDN地址查看

                                    
blur(<length>)
length：CSS 长度。 给绘图提供一个高斯模糊。
brightness(<percentage>)
Percentage：百分比。 给绘图提供一个线性乘法，调节亮度的高低。
contrast(<percentage>)
Percentage：百分比。 调节图像的对比度。 当数值为 0% 时，图像会完全变黑。当数值为 100% 时，图像没有任何变化。
drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>)
给绘图提供阴影。 阴影事实上是在图像下面呈现出模糊的，通过对图像的透明遮罩进行偏移绘制出一种特殊的颜色，组合而成的效果。 这个函数接受5个参数：
<offset-x>: 查看 <length> 允许的单位。描述阴影的水平距离。
<offset-y>: 查看 <length> 允许的单位。描述阴影的垂直距离。
<blur-radius>: 数值越大，模糊就越大，从而使阴影范围变得更大颜色变得更浅。不允许为负数。
<spread-radius>: 正数会使阴影扩张变大，负数会使阴影收缩。
<color>: 查看 <color> 允许的关键字和标识符。
grayscale(<percentage>)
Percentage：百分比。将图像转换成灰色的图片。 当值为100%时，图像会完全变成灰色。 当值为0%时，图像没有任何变化。
hue-rotate(<degree>)
Degree：度数。 对图像进行色彩旋转的处理。当值为0度时，图像没有任何变化。
invert(<percentage>)
Percentage：百分比。反色图像（呈现出照片底片的效果）。当值为100%时，图像会完全反色处理。当值为0%时，图像没有任何变化。
opacity(<percentage>)
Percentage：百分比。对图像进行透明度的处理。 当值为0%时，图像完全透明。当值为100%时，图像没有任何变化。
saturate(<percentage>)
对图像进行饱和度的处理。当值为0%时，图像完全不饱和。当值为100%时，图像没有任何变化。
sepia(<percentage>)
对图像进行深褐色处理（怀旧风格）。 当值为100%时，图像完全变成深褐色。当值为0%时，图像没有任何变化。
none
没有使用filter
                                    
                                

也可以同时设置多种过滤属性，用空格连接

                                    
event.context.filter = 'invert(100%) sepia(160%)';
                                    
                                

3 全部代码

                                    
var view = new ol.View({
    center:  ol.proj.transform([120, 33], 'EPSG:4326', 'EPSG:3857'),
    projection : 'EPSG:3857',
    zoom: 4
});
var map = new ol.Map({   
    target: 'map',
    view: view
});
var layer= new ol.layer.Tile({
            source: new ol.source.OSM()
        })
map.addLayer(layer);
layer.on('postcompose', function (event) {
    event.context.filter = 'invert(100%)';
});