Cesium 快速入门（七）材质详解

YGY Webgis糕手之路2025-08-01 12:45

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 材质详解

在上一章实体的学习中，材质属性只填充了颜色，这一章将介绍更多的材质属性。材质一共包括以下几种

  1. 基础材质
    • ColorMaterialProperty：颜色，所有支持材质的几何体（Polygon/Ellipse/Rectangle 等）
    • ImageMaterialProperty：图片
  2. 几何图案材质
    • CheckerboardMaterialProperty：棋盘格
    • StripeMaterialProperty：条纹
    • GridMaterialProperty：网格
  3. 折线专用材质
    • PolylineGlowMaterialProperty：发光材质
    • PolylineOutlineMaterialProperty：轮廓材质
    • PolylineDashMaterialProperty：虚线材质
    • PolylineArrowMaterialProperty：箭头材质

基础材质

颜色(ColorMaterialProperty)

纯色填充材质，适用于所有支持材质的几何体，是最基础也最常用的材质类型。

js 复制代码 
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}) 生成随机颜色，可指定透明度范围
基础实例
vue 复制代码 
<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(() => {
  // 初始化Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    geocoder: false, // 关闭地理编码搜索
    homeButton: false, // 关闭主页按钮
    sceneModePicker: false, // 关闭场景模式选择器
    baseLayerPicker: false, // 关闭底图选择器
    navigationHelpButton: false, // 关闭导航帮助
    animation: false, // 关闭动画控件
    timeline: false, // 关闭时间轴
    fullscreenButton: false, // 关闭全屏按钮
    baseLayer: false, // 关闭默认地图
  });
  // 清空logo
  viewer.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>
颜色操作方法
js 复制代码 
const baseColor = Cesium.Color.RED;
const modifiedColor = baseColor
  .withAlpha(0.5) // 设置透明度
  .brighten(0.2) // 增加亮度
  .darken(0.1); // 降低亮度

图片(ImageMaterialProperty)

使用图片纹理作为材质，支持重复、旋转和颜色混合，适用于创建具有真实感的表面效果。

js 复制代码 
new Cesium.ImageMaterialProperty(options);
  • options:
    • image：图片路径
    • repeat：纹理重复次数 (x, y)，默认 new Cartesian2(1.0, 1.0)
    • color：颜色，默认 Cesium.Color.WHITE
    • transparent：是否透明，默认 false
js 复制代码 
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)

js 复制代码 
new Cesium.CheckerboardMaterialProperty(options);
  • options:
    • evenColor：偶数条纹颜色
    • oddColor：奇数条纹颜色
    • repeat：棋盘格重复次数，默认 new Cartesian2(2.0, 2.0)
js 复制代码 
material: new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.WHITE, // 偶数格颜色
    oddColor: Cesium.Color.BLACK, // 奇数格颜色
    repeat: new Cesium.Cartesian2(10, 10), // 交替频率
}),

条纹材质(StripeMaterialProperty)

js 复制代码 
new Cesium.StripeMaterialProperty(options);
  • options:
    • evenColor：偶数条纹颜色
    • oddColor：奇数条纹颜色
    • repeat：条纹重复次数，默认 1.0
    • orientation：方向 ("HORIZONTAL" 或 "VERTICAL")，默认'HORIZONTAL'
    • offset：偏移量，默认 0
js 复制代码 
 material: new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.YELLOW,
    oddColor: Cesium.Color.BLACK,
    orientation: Cesium.StripeOrientation.HORIZONTAL, // 条纹方向
    repeat: 20, // 条纹密度
}),

网格材质(GridMaterialProperty)

js 复制代码 
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)
js 复制代码 
material: new Cesium.GridMaterialProperty({
   color: Cesium.Color.YELLOW, // 网格线颜色
   cellAlpha: 0.6, // 单元格透明度
   lineCount: new Cesium.Cartesian2(5, 5), // 网格密度
   lineThickness: new Cesium.Cartesian2(3, 3), // 网格线宽度
}),

折线专用材质

折线发光材质(PolylineGlowMaterialProperty)

js 复制代码 
new Cesium.PolylineGlowMaterialProperty(options);
  • options:
    • color：颜色
    • glowPower：发光强度 (0.0-1.0)，默认值：0.25
    • taperPower：渐细效果强度 (0.0-1.0)，默认值：1.0
vue 复制代码 
<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(() => {
  // 初始化Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    geocoder: false, // 关闭地理编码搜索
    homeButton: false, // 关闭主页按钮
    sceneModePicker: false, // 关闭场景模式选择器
    baseLayerPicker: false, // 关闭底图选择器
    navigationHelpButton: false, // 关闭导航帮助
    animation: false, // 关闭动画控件
    timeline: false, // 关闭时间轴
    fullscreenButton: false, // 关闭全屏按钮
    baseLayer: false, // 关闭默认地图
  });
  // 清空logo
  viewer.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)

js 复制代码 
new Cesium.PolylineOutlineMaterialProperty(options);
  • options:
    • color：颜色
    • outlineColor：轮廓颜色，默认 Color.BLACK
    • outlineWidth：轮廓宽度(像素)，默认 1.0
js 复制代码 
material: new Cesium.PolylineOutlineMaterialProperty({
  color: Cesium.Color.RED, // 颜色
  outlineColor: Cesium.Color.YELLOW, // 轮廓颜色
  outlineWidth: 5, // 轮廓宽度
});

折线虚线材质(PolylineDashMaterialProperty)

js 复制代码 
new Cesium.PolylineDashMaterialProperty(options);
  • options:
    • color：颜色
    • gapColor：间隙颜色，默认 Color.TRANSPARENT
    • dashLength：虚线长度(像素)，默认 16.0
    • dashPattern：虚线模式 (16 位二进制)，默认 255 (11111111)
js 复制代码 
material: new Cesium.PolylineDashMaterialProperty({
   color: Cesium.Color.BLUE,
   // gapColor: Cesium.Color.WHITE,
   dashLength: 24,
   // dashPattern: parseInt("11110000", 2), // 长虚线
}),

折线箭头材质(PolylineArrowMaterialProperty)

js 复制代码 
new Cesium.PolylineArrowMaterialProperty(color);
js 复制代码 
material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.YELLOW),
相关推荐
省四收割者6 分钟前
Go语言入门（10）-数组
数据结构·经验分享·笔记·vscode·算法·golang
喜欢你，还有大家35 分钟前
Linux笔记8——shell编程基础-2
linux·服务器·笔记
上单带刀不带妹38 分钟前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
泽虞1 小时前
《LINUX系统编程》笔记p3
linux·运维·服务器·c语言·笔记·面试
firshman_start1 小时前
文件包含的学习笔记
笔记·学习
11054654011 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax2 小时前
在图片没有加载完成时设置默认图片
前端
OEC小胖胖2 小时前
【React 设计模式】受控与非受控：解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
你怎么知道我是队长2 小时前
C语言---编译的最小单位---令牌(Token)
java·c语言·前端
ReedFoley3 小时前
【笔记】动手学Ollama 第七章 应用案例 Agent应用
笔记
热门推荐
01UV安装并设置国内源02【踩坑笔记】50系显卡适配的 PyTorch 安装03KGG转MP3工具|非KGM文件|解密音频04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06Claude Code VSCode集成开发指南：AI编程助手完整配置07DeepSeek更新！速览DeepSeek V3.1新特性08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）102025最新国内服务器可用docker源仓库地址大全（2025年8月更新）