cesium实现底图反色滤镜效果（详细教程）

Cesium实战系列文章总目录： 传送门

1.实现效果

在Cesium中开发中，经常需要使用暗色系地图，以增强显示效果。但是除了在mapbox自定义设计暗色地图外，还可以使用反色滤镜的方式来实现，使用反色滤镜前后对比如下图。

1.1滤镜前效果

1.2反色滤镜后效果

2.反色滤镜原理

图像滤镜就是依次对图像的所有像素点的值进行有规律地操作，使用滤镜可以改变地图的风格样式。
即滤镜处理公式为如下，color表示该点颜色，filterRGB表示滤镜颜色。

color.r = color.r * filterRGB.r / 255.0;
color.g = color.g * filterRGB.g / 255.0;
color.b = color.b * filterRGB.b / 255.0;

而反色滤镜就是先将图片上每个像素点的颜色值取反，再使用滤镜公式进行计算。

color.r = 1.0 - color.r;
color.g = 1.0 - color.g;
color.b = 1.0 - color.b;

3.实现方法

如果直接设置div的反色滤镜，会使地图及其上叠加的所有元素都反色，因此需要设置只底图的反色滤镜。

3.1官方文档

本人使用的版本是Cesium1.86，查阅imageryLayer的官网文档，发现cesium自带的底图参数方法中未提供该值的配置。因此模仿alpha的属性方法进行修改源代码。

3.2修改源码实现

仿照imageryProvider的alpha属性，设置其滤镜属性：filterRGB，和是否反色属性：invertColor。
修改源代码打包未压缩的Cesium.js文件，便于阅读，以增加属性，实现效果。
为方便修改源代码，本人都是在alpha属性后增加属性并进行修改，详细修改代码可见下图红框部分。
（1）首先设置uniform变量

（2）设置变量
bool类型的textureInvertColor与vec3（三维数据）类型的textureFilterRGB。

（3）设置具体的像素点颜色值处理公式
（4）设置GlobeSurfaceShaderSet中的属性传参
（5）添加applyInvertColor和applyFilterRGB到片元着色器baseFragmentShaderSource中

（6）添加具体的着色器代码到片元着色器baseFragmentShaderSource中
（7）设置返回取值函数

（8）设置空属性

（9）设置applyInvertColor与applyFilterRGB的初始值为false

（10）设置渲染过程中的传参

（11）设置surfaceShaderSetOptions中的参数
（12）设置各个地图的ImageryProvider中属性值的初始默认值。共14个，包括：

ImageryProvider
ArcGisMapServerImageryProvider
BingMapsImageryProvider
GoogleEarthEnterpriseImageryProvider
GoogleEarthEnterpriseMapsProvider
GridImageryProvider
UrlTemplateImageryProvider
MapboxImageryProvider
SingleTileImageryProvider
WebMapServiceImageryProvider
WebMapTileServiceImageryProvider
IonImageryProvider
MapboxStyleImageryProvider
TileCoordinatesImageryProvider

设置代码截图：
（13）最后一步，设置ImageryLayer的invertColor和filterRGB的默认属性值

3.3代码调用

首先需要选择设置反色滤镜的地图图层，然后设置其invertColor与filterRGB的属性值即可。

// 设置滤镜颜色
const baseLayer = viewer.imageryLayers.get(1);
baseLayer.invertColor = true;
baseLayer.filterRGB = [70.0, 110.0, 120.0];