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);