Cesium 快速入門（七）材質詳解

看過的知識不等于學會。唯有用心總結、系統記錄，并通過溫故知新反復實踐，才能真正掌握一二
作為一名摸爬滾打三年的前端開發，開源社區給了我飯碗，我也將所學的知識體系回饋給大家，助你少走彎路！
OpenLayers、Leaflet 快速入門，每周保持更新 2 個案例
Cesium 快速入門，每周保持更新 4 個案例

Cesium 快速入門（一）快速搭建項目
Cesium 快速入門（二）底圖更換
Cesium 快速入門（三）Viewer：三維場景的“外殼”
Cesium 快速入門（四）相機控制完全指南
Cesium 快速入門（五）坐標系
Cesium 快速入門（六）實體類型介紹
Cesium 快速入門（七）材質詳解
Cesium 快速入門（八）Primitive（圖元）系統深度解析
Cesium 快速入門（九）Appearance（外觀）系統深度解析
Cesium 快速入門（十） JulianDate（儒略日期）詳解
Cesium 快速入門（十一）3D Tiles 大規模三維地理空間數據
Cesium 快速入門（十二）數據加載詳解
Cesium 快速入門（十三）事件系統

Cesium 材質詳解

在上一章實體的學習中，材質屬性只填充了顏色，這一章將介紹更多的材質屬性。材質一共包括以下幾種

基礎材質
- ColorMaterialProperty：顏色，所有支持材質的幾何體（Polygon/Ellipse/Rectangle 等）
- ImageMaterialProperty：圖片
幾何圖案材質
- CheckerboardMaterialProperty：棋盤格
- StripeMaterialProperty：條紋
- GridMaterialProperty：網格
折線專用材質
- PolylineGlowMaterialProperty：發光材質
- PolylineOutlineMaterialProperty：輪廓材質
- PolylineDashMaterialProperty：虛線材質
- PolylineArrowMaterialProperty：箭頭材質

基礎材質

顏色(ColorMaterialProperty)

純色填充材質，適用于所有支持材質的幾何體，是最基礎也最常用的材質類型。

new Cesium.ColorMaterialProperty(color);

顏色創建方式

Cesium 提供多種顏色創建方法：

方法	示例	說明
預定義顏色	`Cesium.Color.RED`	直接使用內置顏色常量
CSS 顏色字符串	`Cesium.Color.fromCssColorString("#ff0000")`	支持所有 CSS 顏色格式
RGBA 值	`Cesium.Color.fromBytes(255, 0, 0)`	字節表示法（0-255）
HSLA 值	`Cesium.Color.fromHsl(0, 1, 0.5, 0.5)`	色相(0-1)、飽和度(0-1)、亮度(0-1)、透明度(0-1)
隨機顏色	`Cesium.Color.fromRandom({alpha: 0.5})`	生成隨機顏色，可指定透明度范圍

基礎實例

<template><div ref="cesiumContainer" class="container"></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const cesiumContainer = ref(null);
let viewer = null;// 天地圖TOKEN
const token = "05be06461004055923091de7f3e51aa6";onMounted(() => {// 初始化Viewerviewer = new Cesium.Viewer(cesiumContainer.value, {geocoder: false, // 關閉地理編碼搜索homeButton: false, // 關閉主頁按鈕sceneModePicker: false, // 關閉場景模式選擇器baseLayerPicker: false, // 關閉底圖選擇器navigationHelpButton: false, // 關閉導航幫助animation: false, // 關閉動畫控件timeline: false, // 關閉時間軸fullscreenButton: false, // 關閉全屏按鈕baseLayer: false, // 關閉默認地圖});// 清空logoviewer.cesiumWidget.creditContainer.style.display = "none";// 創建半透明紅色材質const redMaterial = new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5) // 50%透明度);// 應用到多邊形viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray([116.3975, 39.9075, 116.4075, 39.9075, 116.4075, 39.9175, 116.3975,39.9175,]),material: redMaterial,height: 0,extrudedHeight: 100,},});// 縮放到多邊形viewer.zoomTo(viewer.entities);initMap();
});// 加載天地圖
const initMap = () => {// 以下為天地圖及天地圖標注加載const tiandituProvider = new Cesium.WebMapTileServiceImageryProvider({url:"http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +token,layer: "img",style: "default",format: "tiles",tileMatrixSetID: "w", // 天地圖使用 Web 墨卡托投影（EPSG:3857），需確保 tileMatrixSetID: "w"subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名maximumLevel: 18,credit: new Cesium.Credit("天地圖影像"),});// 添加地理標注const labelProvider = new Cesium.WebMapTileServiceImageryProvider({url:"http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&tileMatrix={TileMatrix}&tileRow={TileRow}&tileCol={TileCol}&style=default&format=tiles&tk=" +token,layer: "img",style: "default",format: "tiles",tileMatrixSetID: "w",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名輪詢maximumLevel: 18,credit: new Cesium.Credit("天地圖影像"),});// 天地圖影像添加到viewer實例的影像圖層集合中viewer.imageryLayers.addImageryProvider(tiandituProvider);// 天地圖地理標注（后添加的會覆蓋前面的）viewer.imageryLayers.addImageryProvider(labelProvider);
};
</script>
<style scoped>
.container {width: 100vw;height: 100vh;
}
</style>

在這里插入圖片描述

顏色操作方法

const baseColor = Cesium.Color.RED;
const modifiedColor = baseColor.withAlpha(0.5) // 設置透明度.brighten(0.2) // 增加亮度.darken(0.1); // 降低亮度

圖片(ImageMaterialProperty)

使用圖片紋理作為材質，支持重復、旋轉和顏色混合，適用于創建具有真實感的表面效果。

new Cesium.ImageMaterialProperty(options);

options:
- image：圖片路徑
- repeat：紋理重復次數 (x, y)，默認 new Cartesian2(1.0, 1.0)
- color：顏色，默認 Cesium.Color.WHITE
- transparent：是否透明，默認 false

material: new Cesium.ImageMaterialProperty({image: new URL("../assets/vue.svg", import.meta.url).href, // 圖片路徑repeat: new Cesium.Cartesian2(4, 4), // 平鋪次數// color: Cesium.Color.RED, // 圖片顏色// transparent: true, // 當圖像具有透明度時設置為true
}),

在這里插入圖片描述

幾何圖案材質

棋盤格材質(CheckerboardMaterialProperty)

new Cesium.CheckerboardMaterialProperty(options);

options:
- evenColor：偶數條紋顏色
- oddColor：奇數條紋顏色
- repeat：棋盤格重復次數，默認 new Cartesian2(2.0, 2.0)

material: new Cesium.CheckerboardMaterialProperty({evenColor: Cesium.Color.WHITE, // 偶數格顏色oddColor: Cesium.Color.BLACK, // 奇數格顏色repeat: new Cesium.Cartesian2(10, 10), // 交替頻率
}),

在這里插入圖片描述

條紋材質(StripeMaterialProperty)

new Cesium.StripeMaterialProperty(options);

options:
- evenColor：偶數條紋顏色
- oddColor：奇數條紋顏色
- repeat：條紋重復次數，默認 1.0
- orientation：方向 (“HORIZONTAL” 或 “VERTICAL”)，默認’HORIZONTAL’
- offset：偏移量，默認 0

 material: new Cesium.StripeMaterialProperty({evenColor: Cesium.Color.YELLOW,oddColor: Cesium.Color.BLACK,orientation: Cesium.StripeOrientation.HORIZONTAL, // 條紋方向repeat: 20, // 條紋密度
}),

在這里插入圖片描述

網格材質(GridMaterialProperty)

new Cesium.GridMaterialProperty(options);

options:
- color：網格顏色
- cellAlpha：單元格透明度 (0.0-1.0)，默認 0.1
- lineCount：行列數量 (x, y)，默認值：new Cartesian2(8, 8)
- lineThickness：線寬 (x, y)，默認值：new Cartesian2(1.0, 1.0)
- lineOffset：線偏移 (x, y)，默認值：new Cartesian2(0.0, 0.0)

material: new Cesium.GridMaterialProperty({color: Cesium.Color.YELLOW, // 網格線顏色cellAlpha: 0.6, // 單元格透明度lineCount: new Cesium.Cartesian2(5, 5), // 網格密度lineThickness: new Cesium.Cartesian2(3, 3), // 網格線寬度
}),

在這里插入圖片描述

折線專用材質

折線發光材質(PolylineGlowMaterialProperty)

new Cesium.PolylineGlowMaterialProperty(options);

options:
- color：顏色
- glowPower：發光強度 (0.0-1.0)，默認值：0.25
- taperPower：漸細效果強度 (0.0-1.0)，默認值：1.0

<template><div ref="cesiumContainer" class="container"></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const cesiumContainer = ref(null);
let viewer = null;// 天地圖TOKEN
const token = "05be06461004055923091de7f3e51aa6";onMounted(() => {// 初始化Viewerviewer = new Cesium.Viewer(cesiumContainer.value, {geocoder: false, // 關閉地理編碼搜索homeButton: false, // 關閉主頁按鈕sceneModePicker: false, // 關閉場景模式選擇器baseLayerPicker: false, // 關閉底圖選擇器navigationHelpButton: false, // 關閉導航幫助animation: false, // 關閉動畫控件timeline: false, // 關閉時間軸fullscreenButton: false, // 關閉全屏按鈕baseLayer: false, // 關閉默認地圖});// 清空logoviewer.cesiumWidget.creditContainer.style.display = "none";const polyline = viewer.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArray([116.39, 39.9, 116.41, 39.9, 116.41, 39.92, 116.39, 39.92,]),width: 16,// 發光材質material: new Cesium.PolylineGlowMaterialProperty({color: Cesium.Color.CYAN, // 顏色glowPower: 0.3, // 亮度taperPower: 0.7, // 衰減率}),},});// 定位到線viewer.zoomTo(polyline); // 縮放到實體位置initMap();
});// 加載天地圖
const initMap = () => {// 以下為天地圖及天地圖標注加載const tiandituProvider = new Cesium.WebMapTileServiceImageryProvider({url:"http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +token,layer: "img",style: "default",format: "tiles",tileMatrixSetID: "w", // 天地圖使用 Web 墨卡托投影（EPSG:3857），需確保 tileMatrixSetID: "w"subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名maximumLevel: 18,credit: new Cesium.Credit("天地圖影像"),});// 添加地理標注const labelProvider = new Cesium.WebMapTileServiceImageryProvider({url:"http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&tileMatrix={TileMatrix}&tileRow={TileRow}&tileCol={TileCol}&style=default&format=tiles&tk=" +token,layer: "img",style: "default",format: "tiles",tileMatrixSetID: "w",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名輪詢maximumLevel: 18,credit: new Cesium.Credit("天地圖影像"),});// 天地圖影像添加到viewer實例的影像圖層集合中viewer.imageryLayers.addImageryProvider(tiandituProvider);// 天地圖地理標注（后添加的會覆蓋前面的）viewer.imageryLayers.addImageryProvider(labelProvider);
};
</script>
<style scoped>
.container {width: 100vw;height: 100vh;
}
</style>

在這里插入圖片描述

折線輪廓材質(PolylineOutlineMaterialProperty)

new Cesium.PolylineOutlineMaterialProperty(options);

options:
- color：顏色
- outlineColor：輪廓顏色，默認 Color.BLACK
- outlineWidth：輪廓寬度(像素)，默認 1.0

material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.RED, // 顏色outlineColor: Cesium.Color.YELLOW, // 輪廓顏色outlineWidth: 5, // 輪廓寬度
});

在這里插入圖片描述

折線虛線材質(PolylineDashMaterialProperty)

new Cesium.PolylineDashMaterialProperty(options);

options:
- color：顏色
- gapColor：間隙顏色，默認 Color.TRANSPARENT
- dashLength：虛線長度(像素)，默認 16.0
- dashPattern：虛線模式 (16 位二進制)，默認 255 (11111111)

material: new Cesium.PolylineDashMaterialProperty({color: Cesium.Color.BLUE,// gapColor: Cesium.Color.WHITE,dashLength: 24,// dashPattern: parseInt("11110000", 2), // 長虛線
}),

在這里插入圖片描述

折線箭頭材質(PolylineArrowMaterialProperty)

new Cesium.PolylineArrowMaterialProperty(color);

material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.YELLOW),

在這里插入圖片描述