news 2026/2/25 14:16:59

Cesium快速入门到精通系列教程二十二:Cesium1.95中设置颜色的方式

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门到精通系列教程二十二:Cesium1.95中设置颜色的方式

一、基础颜色定义方式

Cesium 中最核心的颜色类是 Cesium.Color,所有可视化元素(模型、几何体、材质、标签等)的颜色最终都依赖此类定义,主要有以下初始化方式:

1. 预定义纯色(直接调用内置常量)

Cesium 内置了常用的基础颜色常量,无需手动配置 RGBA,开箱即用:

// 常用预定义颜色 const red = Cesium.Color.RED; // 红色 (255,0,0,255) const green = Cesium.Color.GREEN; // 绿色 (0,255,0,255) const blue = Cesium.Color.BLUE; // 蓝色 (0,0,255,255) const white = Cesium.Color.WHITE; // 白色 (255,255,255,255) const black = Cesium.Color.BLACK; // 黑色 (0,0,0,255) const transparent = Cesium.Color.TRANSPARENT; // 全透明 (0,0,0,0) // 更多:CYAN(青)、MAGENTA(品红)、YELLOW(黄)、GRAY(灰)等 const green2 = Cesium.Color.GREEN.withAlpha(0.5)

2. RGBA 数值初始化(最常用)

通过红、绿、蓝、透明度的归一化值(0~1) 定义颜色,是最灵活的方式:

// 格式:Cesium.Color(red, green, blue, alpha) const customColor = new Cesium.Color(1.0, 0.5, 0.0, 1.0); // 橙色(不透明) const semiRed = new Cesium.Color(1.0, 0.0, 0.0, 0.5); // 半透明红色

3. 十六进制字符串 / 数值初始化

兼容前端常用的十六进制颜色格式(支持 #rrggbb/#rrggbbaa/0xrrggbb):

// 方式1:十六进制字符串(带#) const hexColor1 = Cesium.Color.fromCssColorString('#FF5733'); // 橙色 const hexColor2 = Cesium.Color.fromCssColorString('#FF573380'); // 半透明橙色(80是alpha) // 方式2:十六进制数值 const hexColor3 = Cesium.Color.fromRgba(0xFF5733FF); // 0xRRGGBBAA,最后两位是alpha

4. CSS 颜色名 / 渐变兼容

通过 CSS 标准颜色名或 RGBA 字符串初始化,兼容前端样式习惯:

// CSS 颜色名 const cssColor1 = Cesium.Color.fromCssColorString('orange'); // CSS RGBA 字符串 const cssColor2 = Cesium.Color.fromCssColorString('rgba(255, 87, 51, 0.5)');

5. HSL/HSV 颜色空间(进阶)

支持色相(H)、饱和度(S)、亮度(L)/ 明度(V)初始化,适合色彩调整:

// HSL:色相(0~360)、饱和度(0~1)、亮度(0~1)、alpha(0~1) const hslColor = Cesium.Color.fromHsl(30, 1.0, 0.5, 1.0); // 橙色(30度色相) // HSV:色相(0~360)、饱和度(0~1)、明度(0~1)、alpha(0~1) const hsvColor = Cesium.Color.fromHsv(30, 1.0, 1.0, 1.0);
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/22 7:56:55

天天劈砖休闲小游戏Linux演示教程

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ 本站教程、资源皆在单机环境进行,仅供单机研究学习使用。 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ 一、获取材料和结果演示 百度网盘链接: https://…

作者头像 李华
网站建设 2026/2/20 13:57:34

普中开发板基于51单片机贪吃蛇游戏设计

基于51单片机贪吃蛇游戏设计( proteus仿真程序设计报告讲解视频) 仿真图proteus8.17(有低版本) 程序编译器:keil 4/keil 5 编程语言:C语言 设计编号:P24 1主要功能: 基于51单片机的贪吃蛇游戏设计 1、采用8*8点…

作者头像 李华
网站建设 2026/2/20 9:58:52

《从零入门 Ascend C:手把手实现高性能向量加法自定义算子》

1. 引言:为什么需要 Ascend C?在深度学习模型训练与推理中,标准算子库(如 cuDNN、ACL)虽已高度优化,但面对新型网络结构、特殊数据格式或极致性能需求时,往往力不从心。此时,开发者需…

作者头像 李华
网站建设 2026/2/23 9:42:20

DroidCam零基础入门:5分钟把手机变电脑摄像头

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容: 制作一个交互式新手引导应用,通过动画演示和简单步骤:1) 如何在手机和电脑上安装DroidCam;2) 基础连接设置图解;3) 常见应用场景展示…

作者头像 李华
网站建设 2026/2/23 10:24:17

电商大促期间如何预防503错误?7个实战方案

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容: 开发一个电商高可用性监控系统,功能:1. 实时监控服务器负载 2. 预测流量峰值 3. 自动触发扩缩容 4. 优雅降级策略 5. 503错误预警。当检测到可能引发503的情…

作者头像 李华
网站建设 2026/2/20 14:35:16

Prompt工程能否代替模型训练?

Prompt 工程很强,但替代不了「模型训练」本身。下面我们从底层视角拆开看看:Transformer 在干嘛?Prompt 在干嘛?训练在干嘛?它们的边界到底在哪里?1 LLM的本质 可以把一个大模型抽象成一个条件概率分布&…

作者头像 李华