废话:你的球是不是很丑?是不是没有科技感?是不是没有好看的影像?
因果:
因:客户问,底图可不可以改变颜色,想让球更漂亮一些。
答:可以改变影像饱和度,透明度,灰度,色调等,也可以改变影像的瓦片着色。但是能不能叠加图层,叠加一个滤镜呢?
问:如何让球改成第二张图片的样子,像是加了滤镜。(着急的可以直接去看最后)
1,首先,hue调色调,没有找到相同的色调。
hue是接收弧度的,从3.14到-3.14我竟然找不到适合上面的颜色。如果有大佬懂的,可以指点一下。
详情参考cesium示例网址
2,然后,实现改变影像着色器。把影像改了,不是想要的效果。
cesium中,默认的底图颜色往往难以满足个性化需求,而【蓝色科技】风格常常备受青睐
简单来说,我们所用的方法叫做【反色滤镜】,总的分为2个步骤,反色,过滤。具体做法如下:
首先要获取目标影像图层,这里不能直接对div进行操作,因为会将地图上的所有元素都反色过滤了。
// 获取地图影像图层
let baseLayer = viewer.imageryLayers.get(0);
其次,定义2个变量,用来控制是否反色,以及过滤的具体值
//设置2个变量,用来判断是否进行颜色的翻转和过滤
baseLayer.invertColor = true;
baseLayer.filterRGB = [0, 50, 100]; //[255,255,255] = > [0,50,100]
接着要获取着色器,方便后续直接操作着色器,写入修改后的glsl。
// 更改底图着色器的代码
const baseFragmentShader =
viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources;
通过打印baseFragmentShader,可以看到里面有3个
接下来是最关键的步骤,反色+过滤。
// 循环修改着色器
for (let