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 i = 0; i < baseFragmentShader.length; i++) {// console.log(baseFragmentShader[i]);const strS = "color = czm_saturation(color, textureSaturation);\n#endif\n";let strT = "color = czm_saturation(color, textureSaturation);\n#endif\n";if (baseLayer.invertColor) {strT += `color.r = 1.0 - color.r;color.g = 1.0 - color.g;color.b = 1.0 - color.b;`;}if (baseLayer.filterRGB) {strT += `color.r = color.r*${baseLayer.filterRGB[0]}.0/255.0;color.g = color.g*${baseLayer.filterRGB[1]}.0/255.0;color.b = color.b*${baseLayer.filterRGB[2]}.0/255.0;`;}baseFragmentShader[i] = baseFragmentShader[i].replace(strS, strT);}
因为R、G、B都是从0-1,反色就是用1减去原来的值
color.r = 1.0 - color.r;
color.g = 1.0 - color.g;
color.b = 1.0 - color.b;
过滤则是要套用公式,对R、G、B进行操作
color.r = color.r*${baseLayer.filterRGB[0]}.0/255.0;
color.g = color.g*${baseLayer.filterRGB[1]}.0/255.0;
color.b = color.b*${baseLayer.filterRGB[2]}.0/255.0;
strS中的内容是glsl,原本就存在于baseFragmentShader中,而修改后的颜色值,直接用replace进行替换,将strT顶进去,发挥作用。
filterRGB的值可以根据需要进行调整,我试了2个值,都不错 [60, 145, 172] 和[0, 50, 100]
完整代码如下,可以封装成一个方法被调用。
export default function modifyMap(viewer) {// 获取地图影像图层let baseLayer = viewer.imageryLayers.get(0);//设置2个变量,用来判断是否进行颜色的翻转和过滤baseLayer.invertColor = true;baseLayer.filterRGB = [0, 50, 100]; //[255,255,255] = > [0,50,100]// 更改底图着色器的代码const baseFragmentShader =viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources;// console.log(baseFragmentShader);// 循环修改着色器for (let i = 0; i < baseFragmentShader.length; i++) {// console.log(baseFragmentShader[i]);const strS = "color = czm_saturation(color, textureSaturation);\n#endif\n";let strT = "color = czm_saturation(color, textureSaturation);\n#endif\n";if (baseLayer.invertColor) {strT += `color.r = 1.0 - color.r;color.g = 1.0 - color.g;color.b = 1.0 - color.b;`;}if (baseLayer.filterRGB) {strT += `color.r = color.r*${baseLayer.filterRGB[0]}.0/255.0;color.g = color.g*${baseLayer.filterRGB[1]}.0/255.0;color.b = color.b*${baseLayer.filterRGB[2]}.0/255.0;`;}baseFragmentShader[i] = baseFragmentShader[i].replace(strS, strT);}
}
但是这种方式是直接把影像的瓦片颜色都改啦,山体都变色啦,不太像在正常天地图影像或其他影像上蒙上一层滤镜的感觉。
3,做一个全球kml面,给面一个颜色,加载到B端。
在图新地球4中画了半球全球的kml文件导出后,但是加载到B端引擎场景中效果样式错乱。
kml不能画整个球,绘制不到B端球上,但是我觉得应该可以画个六个八个,一起加载到球上,但是太多啦,我就没有再试。
4,把影像中lrc里瓦片图片换掉,成功实现
我找到了一个纯色深蓝色影像,发现加载这个影像是都是请求的一张图片,再看这个影像lrc文件,也是只引用这个图片的链接。那就可以把图片和文件放到静态服务器上,在线引用这个影像啦。代码,文件,图片放到下面啦,图片颜色可自己换,实现各种颜色滤镜。
mengban = new LSGlobe.LSLRCImageryProvider("http://show.wish3d.com/gyl/darkBaseMap.lrc");
mengban.name = "蒙版";
viewer.imageryLayers.addImageryProvider(mengban, 3);
darkBaseMap.lrc文件
<?xml version="1.0" encoding="GB18030"?><DataDefine>
<Version>0</Version>
<Name>img</Name>
<GeoGridType>WebMercatorWGS84</GeoGridType>
<SampleSize>256</SampleSize>
<FileExt></FileExt>
<DataVersion></DataVersion>
<DataType>urlformat</DataType>
<TileRowDir>NorthToSouth</TileRowDir>
<LocalPath></LocalPath>
<UrlParamOrder>X,Y,Z</UrlParamOrder>
<NetPath>http://localhost:8800/mengban.png</NetPath>
<Range>
<West>-180</West>
<East>180</East>
<South>-85</South>
<North>85</North>
<LevelBegin>1</LevelBegin>
<LevelEnd>20</LevelEnd>
</Range>
</DataDefine>

相关文章:
cesium可不可以改变影像底图颜色,如何给地球底图影像添加一层滤镜蒙版?
废话:你的球是不是很丑?是不是没有科技感?是不是没有好看的影像? 因果: 因:客户问,底图可不可以改变颜色,想让球更漂亮一些。 答:可以改变影像饱和度,透明度…...
MyBatis-MappedStatement什么时候生成?QueryWrapper如何做到动态生成了SQL?
通过XML配置的MappedStatement 这部分MappedStatement主要是由MybatisXMLMapperBuilder进行解析,核心逻辑如下: 通过注解配置的MappedStatement 核心逻辑就在这个里面了: 继承BaseMapper的MappedStatement 我们看看这个类,里…...
Netty系列-2 NioServerSocketChannel和NioSocketChannel介绍
背景 本文介绍Netty的通道组件NioServerSocketChannel和NioSocketChannel,从源码的角度介绍其实现原理。 1.NioServerSocketChannel Netty本质是对NIO的封装和增强,因此Netty框架中必然包含了对于ServerSocketChannel的构建、配置以及向选择器注册&am…...
智能客服的四大优势,提升企业服务效率
在这个信息化快速发展的时代,客户服务的重要性越来越凸显。传统的客服方式已经无法满足企业日益增长的服务需求,于是智能客服服务应运而生。智能客服服务不仅改变了企业与客户的互动方式,还提高了服务效率和客户满意度。本文将深入探讨智能客…...
AutoGPT开源项目解读
AutoGPT开源项目解读 (qq.com) AutoGPT旨在创建一个自动化的自我改进系统,能够自主执行和学习各种任务 项目基本信息 首先阅读项目的README.md,下述代理和智能体两个名词可互换 项目简介:一个创建和运行智能体的工具,这些智能体…...
Linux离线安装fontconfig
Linux离线下载yum包,安装字体库 一、下载安装包 以CentOS Linux release 7.9.2009下载fontconfig的rpm包的为例 http://mirror.centos.org/centos/7/按提示跳转历史库 找到对应版本的centos https://vault.centos.org/7.9.2009/os/x86_64/Packages/在Packages目…...
海山数据库(He3DB)+AI:(一)神经网络基础
文章目录 1 引言2 基本结构2.1 神经元2.2 模型结构 3 训练过程3.1 损失函数3.2 反向传播3.3 基于梯度的优化算法 4 总结 1 引言 神经网络可以被视为一个万能的拟合器,通过深层的隐藏层实现输入数据到输出结果的映射。神经网络的思想源于对大脑的模拟,在…...
CSS中选择器有哪些?(史上最全选择器)
CSS选择器是用来选择和应用样式到HTML元素上的工具。以下是所有主要的CSS选择器的详细分类和描述: 1. 基本选择器 通配符选择器 (*):选择所有元素。例如,* { color: red; } 会将所有元素的文字颜色设置为红色。元素选择器:选择指…...
本地部署 AI 智能体,Dify 搭建保姆级教程(下):知识库 RAG + API 调用,我捏了一个红楼解读大师
话接上篇: 本地部署 AI 智能体,Dify 搭建保姆级教程(上):工作流 Agent,把 AI 接入个人微信 相信大家已经在本地搭建好 Dify 了。 今日分享,继续介绍 Dify 的另外两项重要功能: 知…...
HarmonyOS应用开发者高级认证,Next版本发布后最新题库 - 答案纯享版
这篇文章是高级题库答案纯享版,只有需要选择的选项。如果需要查看所有选项,可以点击下方链接跳转。以考代学,还是推荐点击下方链接,查看完整的题库,边看边学习鸿蒙应用开发。此题库已更新完毕,笔者将不继续…...
基于PHP的文件包含介绍
引言:在实际开发过程中,经常会遇到部分模块功能需要重复使用的情况,比如数据库的增删改查,文件包含通过将需要重复使用的功能模块代码引入其他文件的内容,实现重用代码、分离配置等。然而,如果文件包含操作…...
K7系列FPGA多重启动(Multiboot)
Xilinx 家的 FPGA 支持多重启动功能(Multiboot),即可以从多个 bin 文件中进行选择性加载,从而实现对系统的动态更新,或系统功能的动态调整。 这一过程可以通过嵌入在 bit 文件里的 IPROG 命令实现上电后的自动加载。而…...
关于武汉芯景科技有限公司的RS232通信接口芯片XJ3243EEUI开发指南(兼容MAX3243EEUI)
一、芯片引脚介绍 1.芯片引脚 2.引脚描述 二、典型应用电路 三、功能描述 1.Transmitter 通过T1,T2可以将TTL电平转换为RS232电平 2.Receiver 通过R1,R2可以将RS232电平转换为TTL电平 3.工作模式控制 4.INVALID引脚...
TreeSize Free:你的免费磁盘空间管理专家
TreeSize Free是一款专为Windows用户设计的磁盘空间分析工具。它能够帮助用户快速识别并管理那些占用大量空间的文件夹和文件。 功能亮点 快速扫描:TreeSize Free能够迅速扫描整个磁盘卷,展示所有文件夹及其子文件夹的大小,甚至可以细化到单…...
python办公自动化:初识`python-docx`
1.1 什么是python-docx python-docx是一个用于在Python中创建和操作Word文档的库。它提供了一组简洁的API,让开发者可以轻松地生成、修改、和读取Microsoft Word (.docx)文件,而不需要安装Microsoft Office。这使得python-docx成为办公自动化、报告生成…...
LeetCode 算法:划分字母区间 c++
原题链接🔗:划分字母区间难度:中等⭐️⭐️ 题目 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段,同一字母最多出现在一个片段中。 注意,划分结果需要满足:将所有划分结果按顺序连接&#…...
PMP备考指南:策略、时间安排与心得分享
准备和时间安排,我是工作的时间把它顺便考了,大约花了一个月左右时间备考,前面的时间都在筹办婚礼,根本没时间,最后一个月都差点想放弃了,但想想还是冲一把就没有选择延考。 干货见下: ▌&…...
CentOS上通过frp实现HTTPS访问内网
要在CentOS上通过frp实现HTTPS访问内网,你需要按照以下步骤操作: 在外网服务器上安装frps(frp服务端)。 在外网服务器上配置frps,编辑配置文件frps.ini。 在frps服务器上启动frps服务。 在内网服务器上安装frpc&…...
短视频SDK解决方案,高效集成,助力商业变现
美摄科技,作为业界领先的多媒体技术服务商,其全面升级的短视频SDK解决方案,旨在为开发者与内容创作者提供一站式、高效能的创作工具,让每一个灵感都能瞬间转化为触动人心的视频作品。 【一站式解决方案,重塑短视频创作…...
C++系列-继承方式
继承方式 继承的语法继承方式:继承方式的特点继承方式的举例 继承可以减少重复的代码。继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易。基类父类,派生类子类,派生类是在继承了基类的部分成员基础…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块,用于对本地知识库系统中的知识库进行增删改查(CRUD)操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
