openlayers中巧用canvas滤镜，自由切换你的地图风格

前言

高德地图、百度地图等等图商现在都提供一些自定义地图风格，用户可以自己设计地图样式，这样使得地图使用灵活了很多。
百度地图个性化编辑平台

高德地图自定义地图

从openlayers3开始，其底层渲染从SVG切换到了canvas，据说渲染效率提高了不少。在canvas上，我们可以实现很多比较炫酷的可视化操作，如之前的空气质量态势图、动态风场等等。今天，来分享一个好玩的，通常CSS3滤镜，改变地图风格。

1、原理

1、通过地图的渲染事件，获取到canvas上下文context；
2、设置context的filter属性。
3、重新渲染图层。

  map.on('precompose', function(evt){
   
      var ctx = evt.context;
      ctx.filter = filter;//设置滤镜值
  })
  map.render();

filter值类型为字符串，默认值为"none"；
precompose事件会在地图渲染前发生，因此在渲染前，改变filter值，即可让地图按设置的滤镜进行渲染。

关于滤镜的属性，可以参考菜鸟教程中的《CSS3 filter(滤镜)》
也可以参考MDN web docs中的《CanvasRenderingContext2D.filter》

2、示例

我们看上一幅原图：

1）灰度滤镜： 设置filter值为 grayscale(100%)

2）褐色： 设置filter值为 sepia（100%）

3、复合滤镜

可以使用多个滤镜，值之间用空格隔开，如：contrast(150%) saturate(200%)

利用复合滤镜，我们可以更灵活的变换地图风格，是不是挺好玩，大家可以下来试试。

3、完整代码

js代码

var app = {
   
    baseLayer: undefined,
    map: undefined,
    filter: 'none',
    key: undefined,
    init: function(){
   
        this.baseLayer = new ol.layer.Tile({
   
            source: new ol.source.XYZ({
   
                url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
        });

        this.map = new ol