OpenLayer使用css3滤镜效果改变切片地图的样式[转]

ss3有一个属性很好玩，filter(滤镜属性)，可以做一些图片的滤镜和ps相同的效果，但是还和ps效果有些差距，如何将filter滤镜属性用到OpenLayer中？下面讲一下如何让通过滤镜的效果来改变地图底图切片样式。

一、效果图
1、滤镜前

 

 

2、滤镜后

 

 

看了上面是不是感觉好神奇，我们竟然可以改变切片地图样式。
二、css3的filter属性值

1　　grayscale灰度

2　　sepia褐色（有种复古的旧照片感觉）

3　　saturate饱和度

4　　hue-rotate色相旋转

5　　invert反色

6　　opacity透明度

7　　brightness亮度

8　　contrast对比度

9　　blur模糊

10　　drop-shadow阴影

具体效果看https://www.cnblogs.com/zheshiyigemanong/p/6943205.html
　三、如何实现？

let baseLayer = new ol.layer.Tile({
title: "base",
source: new ol.source.OSM()
});
baseLayer.on('postcompose', function (event) {
event.context.filter = "invert(100%)";
console.log(event.context);
});

单个图层，这个很重要，我们可以设置单个图层滤镜，使其能够突出的效果。
如果要设置多个filter属性，我们该如何做？（空格隔开）

baseLayer.on('postcompose', function (event) {
event.context.filter = "sepia(120%) saturate(140%) hue-rotate(165deg) brightness(101%)";
console.log(event.context);
});
————————————————
版权声明：本文为CSDN博主「hpugisers」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40184249/article/details/95197642