openlayers使用canvas滤镜效果改变地图切片样式

已被阅读 3209 次 | 文章分类:OpenLayers | 2021-10-31 22:48

openlayers提供了图层渲染事件postcompose,通过该事件可以获取地图canvas,因为openlayers地图本质就是canvas元素,所以拿到canvas之后,就可以调用canvas的filter方法,在前端重新修改地图切片样式;

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%)';
});
                                    
                                

QQ群:713985494 | 技术问题解答

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号