cesium可不可以改变影像底图颜色,如何给地球底图影像添加一层滤镜蒙版?

废话:你的球是不是很丑?是不是没有科技感?是不是没有好看的影像?

因果:

因:客户问,底图可不可以改变颜色,想让球更漂亮一些。
答:可以改变影像饱和度,透明度,灰度,色调等,也可以改变影像的瓦片着色。但是能不能叠加图层,叠加一个滤镜呢?

问:如何让球改成第二张图片的样子,像是加了滤镜。(着急的可以直接去看最后)
请添加图片描述
请添加图片描述

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
### 如何在 Cesium添加影像底图 #### 使用 `Cesium Ion` 提供的地图服务 为了简化开发流程并快速获取高质量的影像底图,推荐使用来自 `Cesium Ion` 的地图服务。只需几行代码即可完成配置: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3957 }) ); ``` 此方法利用了官方托管的服务资源,能够提供稳定高效的瓦片数据支持[^1]。 #### 自定义影像提供商 如果希望集成特定的数据源,则可以通过创建自定义影像层来实现这一目标。下面是一个基于 URL 模板加载遥感图像的例子: ```javascript var customTileUrlTemplate = 'https://example.com/path/to/tiles/{z}/{x}/{y}.png'; var imageryLayer = new Cesium.UrlTemplateImageryProvider({ url : customTileUrlTemplate, }); viewer.imageryLayers.addInstance(new Cesium.ImageryLayer(imageryLayer)); ``` 这段脚本展示了如何通过指定模板化的URL路径访问外部服务器上的栅格文件,并将其作为新的图层加入到场景中显示出来[^2]。 #### 应用滤镜效果调整视觉样式 对于更高级的需求,比如应用色彩校正或其他特效处理,可以借助于WebGL着色器技术,在客户端实时修改像素级表现形式。具体来说就是编写片段着色程序(Fragment Shader),并通过设置材质属性的方式作用于整个视窗范围内的所有对象之上: ```glsl uniform sampler2D colorTexture; varying vec2 v_textureCoordinates; void main() { float hueShift = radians(-0.8); // 设置色调偏移量为负数表示逆时针旋转角度 mat3 rotationMatrix = mat3( cos(hueShift), sin(hueShift), 0, -sin(hueShift), cos(hueShift), 0, 0, 0, 1); vec3 texColor = texture2D(colorTexture, v_textureCoordinates).rgb; vec3 adjusted = clamp((rotationMatrix * (texColor - 0.5)) + 0.5, 0., 1.); gl_FragColor = vec4(adjusted, 1.); } ``` 上述 GLSL 代码实现了对原始纹理颜色进行HUE变换的功能,其中的关键在于构建了一个用于旋转变换RGB空间坐标的矩阵,并据此计算得到最终输出的颜色值[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值