Cesium快速入门

Appearance

Cesium 实体材质详解 ​

  • 材质（Material）是定义实体表面外观的核心属性，决定了对象的颜色、纹理、透明度和特效等视觉特征。
  • 在上一章实体的学习中，材质属性只填充了颜色，这一章将介绍更多的材质属性。材质一共包括以下几种：
    1. 基础材质
      • ColorMaterialProperty：颜色，所有支持材质的几何体
      • 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(async () => {
  // 初始化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";
  initMap();

  // 开启动画
  viewer.clock.shouldAnimate = true;

  // 创建动态颜色材质
  const dynamicColorMaterial = new Cesium.ColorMaterialProperty(
    new Cesium.CallbackProperty(() => {
      // 基于时间生成动态闪烁效果
      const time = viewer.clock.currentTime.secondsOfDay;
      const alpha = 0.5 + 0.5 * Math.sin(time * 2);
      return Cesium.Color.RED.withAlpha(alpha);
    }, false) // 启用自动更新
  );

  // 应用到多边形
  const polygonEntity = viewer.entities.add({
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        116.3975, 39.9075, 116.4075, 39.9075, 116.4075, 39.9175, 116.3975,
        39.9175,
      ]),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: dynamicColorMaterial,
    },
  });
  // 缩放到多边形
  viewer.zoomTo(polygonEntity);
});

// 加载天地图
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",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名
    maximumLevel: 18,
    credit: new Cesium.Credit("天地图影像"),
  });
  // 天地图影像添加到viewer实例的影像图层集合中
  viewer.imageryLayers.addImageryProvider(tiandituProvider);
};
</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);
属性类型默认值描述
imageString 或 HTMLImageElementundefined图片路径或 HTMLImageElement 对象
repeatCartesian2new Cartesian2(1.0, 1.0)纹理重复次数 (x, y)
colorColorColor.WHITE颜色
transparentBooleanfalse是否透明
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);
属性类型默认值描述
evenColorColorColor.WHITE偶数条纹颜色
oddColorColorColor.BLACK奇数条纹颜色
repeatCartesian2new Cartesian2(2.0, 2.0)棋盘格重复次数 (x, y)
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);
属性类型默认值描述
evenColorColorColor.WHITE偶数条纹颜色
oddColorColorColor.BLACK奇数条纹颜色
repeatNumber1条纹重复次数
orientationStringHORIZONTAL方向 ("HORIZONTAL" 或 "VERTICAL")
offsetNumber0偏移量
js
 material: new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.YELLOW,
    oddColor: Cesium.Color.BLACK,
    orientation: Cesium.StripeOrientation.HORIZONTAL, // 条纹方向
    repeat: 20, // 条纹密度
    offset: 0, // 偏移量
}),

条纹材质

网格材质（GridMaterialProperty） ​

js
new Cesium.GridMaterialProperty(options);
属性类型默认值描述
colorColorColor.WHITE网格颜色
cellAlphaNumber0.1单元格透明度
lineCountCartesian2new Cartesian2(8, 8)行列数量
lineThicknessCartesian2new Cartesian2(1.0, 1.0)线宽
lineOffsetCartesian2new 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);
属性类型默认值描述
colorColorColor.WHITE颜色
glowPowerNumber0.25发光强度 (0.0-1.0)
taperPowerNumber1.0渐细效果强度 (0.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(async () => {
  // 初始化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";
  initMap();

  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); // 缩放到实体位置
});

// 加载天地图
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",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名
    maximumLevel: 18,
    credit: new Cesium.Credit("天地图影像"),
  });
  // 天地图影像添加到viewer实例的影像图层集合中
  viewer.imageryLayers.addImageryProvider(tiandituProvider);
};
</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

折线发光材质

折线轮廓材质（PolylineOutlineMaterialProperty） ​

js
new Cesium.PolylineOutlineMaterialProperty(options);
属性类型默认值描述
colorColorColor.WHITE颜色
outlineColorColorColor.BLACK轮廓颜色
outlineWidthNumber1.0轮廓宽度(像素)
js
material: new Cesium.PolylineOutlineMaterialProperty({
  color: Cesium.Color.RED, // 颜色
  outlineColor: Cesium.Color.YELLOW, // 轮廓颜色
  outlineWidth: 5, // 轮廓宽度
});

折线轮廓材质

折线虚线材质（PolylineDashMaterialProperty） ​

js
new Cesium.PolylineDashMaterialProperty(options);
属性类型默认值描述
colorColorColor.WHITE颜色
gapColorColorColor.TRANSPARENT间隙颜色
dashLengthNumber16.0虚线长度(像素)
dashPatternNumber255虚线模式 (16 位二进制)，(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),

折线箭头材质