Cesium系统教程

duansamve

已于 2025-06-09 23:29:58 修改

阅读量2.1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： cesium 文章标签： cesium

于 2024-12-01 22:37:12 首次发布

原文链接：https://blog.youkuaiyun.com/w137160164/article/details/130788090

cesium 专栏收录该内容

22 篇文章

订阅专栏

前言

Cesium官网：官网链接

Cesium 是一个开源的、高性能的 3D 地球和地图可视化平台，它允许开发者创建基于 Web 的、交互式的地理空间应用程序。Cesium 的核心是一个 WebGL 驱动的引擎，它能够渲染大规模的地理数据集，支持高精度的地球模型和动态数据可视化。

本教程基于Cesium 1.119

最新版本下载：Downloads – Cesium

历史版本下载：https://sourceforge.net/projects/cesium.mirror/

在vue3中使用准备：

通过命令下载Cesium和Plugin：

npm install cesium@1.119
npm install vite-plugin-cesium -D

vite.config.js配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import cesium from 'vite-plugin-cesium';
 
 
export default defineConfig({
  plugins: [vue(),cesium()]
})

一、Cesium的初始化

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup lang="ts">
//AccessTokens需要到官网获取，详细看问题注意点
Cesium.Ion.defaultAccessToken = '你的AccessTokens'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Cesium";
const init = ()=>{
	const viewer = new Cesium.Viewer("cesiumContainer", {
	  homeButton: true, //首页位置，点击之后将视图跳转到默认视角
	  sceneModePicker: true, //是否显示投影方式控件
	  baseLayerPicker: true, //是否显示图层选择控件
	  navigationHelpButton: true, //是否显示帮助信息控件
	  geocoder: false, //是否显示地名查找控件
	  animation: false, //是否显示动画控件
	  timeline: false, //是否显示时间线控件
	  fullscreenButton: false, //视察全屏按钮
	  vrButton: false,//是否启用虚拟现实 (VR) 模式
	  shadows: true, //影子
	  infoBox: false, //是否显示点击要素之后显示的信息
	});
}

onMounted(()=>{
  init()
})
</script>

关闭左下角版权信息

viewer._cesiumWidget._creditContainer.style.display = "none";

二、加载影像

Cesium中数据加载包括ArcGIS在线地图、Bing地图、天地图、高德地图、OpenStreetMap、MapBox影像图等，ESRL、超图、中地数码等大型 GIS 厂商提供的自定义格式的 GIS数据，以及 GeoJSON、TIFF、SHP、KML、点云、三维模型等各种格式的 GIS 数据。

Cesium 提供了 BingMapsImageryProvider 类来加载 Bing地图，并且默认加载了微软公司的 Bing 地图。也就是说,在创建 Vewer 时，如果不指定ImageryProvider 类,就默认加载 Bing地图。

在加载 Bing地图时，需要申请 Bing地图密钥或者申请Cesium的token，否则可能会出现加载完成后没有地图出现的情况。

        const viewer = new Cesium.Viewer("cesiumContainer", {
            imageryLayers: new Cesium.ArcGisMapServerImageryProvider({
                //加载ArcGIS 在线地图
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            }),
        });

三、加载地形

使用Cesium World Terrain图层可以三维展示地形地势、水形数据让模型效果更立体

<template>
  <div id="cesiumContainer" ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script setup>
Cesium.Ion.defaultAccessToken = '你的AccessTokens'
import { onMounted, ref } from 'vue';
import * as Cesium from 'cesium';

const cesiumContainer = ref(null);

onMounted(async () => { // async不写会报错
  const viewer = new Cesium.Viewer("cesiumContainer", {
    homeButton: true, //首页位置，点击之后将视图跳转到默认视角
    sceneModePicker: true, //是否显示投影方式控件
    baseLayerPicker: true, //是否显示图层选择控件
    navigationHelpButton: true, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    animation: false, //是否显示动画控件
    timeline: false, //是否显示时间线控件
    fullscreenButton: false, //视察全屏按钮
    vrButton: false,//是否启用虚拟现实 (VR) 模式
    shadows: true, //影子
    infoBox: false, //是否显示点击要素之后显示的信息

    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestWaterMask: true,
      requestVertexNormals: true,
    }),
  });

  viewer._cesiumWidget._creditContainer.style.display = "none";
});
</script>

<style scoped>
/* 确保 Cesium 容器占满整个视口 */
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium-1.119/Build/Cesium/Cesium.js"></script>
    <link
      rel="stylesheet"
      href="./Cesium-1.119/Build/Cesium/Widgets/widgets.css"
    />
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="cesiumContainer"></div>

    <script type="module">
      Cesium.Ion.defaultAccessToken =
        "使用注册的账号获取AccessToken";

      const viewer = new Cesium.Viewer("cesiumContainer", {
        // 使用Cesium World Terrain图层可以三维展示地形地势、水形数据让模型效果更立体
        terrainProvider: await Cesium.createWorldTerrainAsync({
          requestWaterMask: true,
          requestVertexNormals: true,
        }),
      });
    </script>
  </body>
</html>

注意：如果是html页面中，script类型请使用 module。

四、加载3D Tiles数据

Cesium目前支持两种模型方案，一个是使用3D tiles，另一个是加载glTF模型，3D tiles是适用于展示大区域面积的建筑模型，而glTF模型是加载单个独立模型。

3D Tiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集, 3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。

加载cesium提供的通用3D建筑

首先要到cesium的个人中心，资源仓库中添加Cesium OSM Buildings到自己的资源中，这种资源的建筑没有高度。

        const tileset = viewer.scene.primitives.add(
            await Cesium.Cesium3DTileset.fromIonAssetId(96188),
        );
        
        //移动视角到陆家嘴
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 3000),
            orientation: {
                heading: 0,
                pitch: -90,
                roll: 0
            }
        })

未加载模型前：

加载模型后：

添加有高度的建筑

纽约3D建筑

到cesium的个人中心，资源仓库中添加New York City 3D Buildings到自己的资源中

const tileset = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343),
 );

//移动视角到纽约，像上方一样，设置视角，也可以直接这么做
viewer.zoomTo(tileset)

结果如下：

根据高度设置建筑颜色

高度的顺序，因为我们用的是大于号一定要从大到小，反之则是从小到大

        tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ['${Height} >= 300', 'rgba(45,0,75,0.6)'],
                    ['${Height} >= 200', 'rgba(102,71,151, 1)'],
                    ['${Height} >= 100', 'rgba(170,62,204, 1)'],
                    ['${Height} >= 50', 'rgba(224,226,238, 1)'],
                    ['${Height} >= 25', 'rgba(252,230,200, 1)'],
                    ['${Height} >= 10', 'rgba(248,176,87, 1)'],
                    ['${Height} >= 5', 'rgba(198,106,11, 1)'],
                    ['true', 'rgba(127,59,8, 1)'],
                ]
            },
            show: '${Height} >= 0',
        });

结果如下：

根据经纬度设置建筑颜色：

        tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ['${Latitude} >= 40.712945742423585', 'rgba(255, 0, 0, 1.0)'], //红色
                    ['${Latitude} >= 40.64859281217332', 'rgba(0, 0, 255, 0.5)'], // 蓝色
                    ['${Latitude} >= 40.607812909160636', 'rgba(255, 0, 0, 0.7)'], // 红色
                ]
            },
            show: '${Height} >= 0',
        });

结果如下：

以某一点为圆点，根据到原点的距离设置颜色

        tileset.style = new Cesium.Cesium3DTileStyle({
            defines: {
                distance: "distance(vec2(${Latitude},${Longitude}),vec2(40.712945742423585, -74.01312421751199))",
            },
            color: {
                conditions: [
                    ["${distance} < 0.04", "color('red', 1.0)"],  //红
                    ["${distance} < 0.05", "color('orange', 1.0)"], //橙
                    ["${distance} < 0.06", "color('yellow', 1.0)"], //黄
                    ["${distance} < 0.07", "color('green', 1.0)"], //绿
                    ["${distance} < 0.08", "color('cyan', 1.0)"], //青
                    ["${distance} < 0.09", "color('blue', 1.0)"], //蓝
                    ["${distance} < 0.10", "color('purple', 1.0)"], //紫
                    ["true", "color('#ADD8E6',0.8)"],
                ]
            },
            show: '${Height} >= 0',
        });

结果如下：

添加鼠标经过建筑物的事件，这里做两个小功能：

鼠标经过建筑物的时候高亮
鼠标经过建筑物的时候，悬浮显示一些关于建筑物的信息

        const scene = viewer.scene
        const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);  //处理事件
        const highlighted = {
            feature: undefined,
            originalColor: new Cesium.Color(),
        };
        const selected = {
            feature: undefined,
            originalColor: new Cesium.Color(),
        };
        const metadataOverlay = document.createElement("div");
        viewer.container.appendChild(metadataOverlay);
        //弹窗tips的样式
        metadataOverlay.className = "backdrop";
        metadataOverlay.style.display = "none";
        metadataOverlay.style.position = "absolute";
        metadataOverlay.style.bottom = "0";
        metadataOverlay.style.left = "0";
        metadataOverlay.style["pointer-events"] = "none";  //设置元素是否对鼠标事件做出反应
        metadataOverlay.style.padding = "4px";
        metadataOverlay.style.backgroundColor = "#303030";
        metadataOverlay.style.whiteSpace = "pre-line";
        metadataOverlay.style.fontSize = "16px";
        metadataOverlay.style.borderRadius = "4px";
        //添加想要处理的回调函数
        handler.setInputAction(function (movement) {
            //movement：startPosition开始位置，endPosition结束位置（代表当前模型位置）
            if (true) {
                if (Cesium.defined(highlighted.feature)) {
                    highlighted.feature.color = highlighted.originalColor;
                    highlighted.feature = undefined;
                }
                //返回一个带有“primitive”属性的对象，该属性包含场景中位于特定窗口坐标处的第一个图元（顶部），如果该位置没有任何内容，则返回undefined
                const feature = scene.pick(movement.endPosition);
                const featurePicked = feature instanceof Cesium.Cesium3DTileFeature;
                //是否包含此属性
                const isBuildingFeature =
                    featurePicked && feature.hasProperty("Majority_Ownership_Type");

                if (isBuildingFeature) {
                    if (feature !== selected.feature) {
                        highlighted.feature = feature;
                        Cesium.Color.clone(feature.color, highlighted.originalColor);
                        feature.color = Cesium.Color.AQUA;
                    }
                    metadataOverlay.style.display = "block";
                    metadataOverlay.style.bottom =
                        `${viewer.canvas.clientHeight - movement.endPosition.y}px`;
                    metadataOverlay.style.left = `${movement.endPosition.x}px`;
                    var tableHtmlScratch =
                        `<div style="color: #fff">${feature.getProperty(
                            "Majority_Ownership_Type")}</div>`
                    metadataOverlay.innerHTML = tableHtmlScratch;
                } else {
                    metadataOverlay.style.display = "none";
                }
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

自定义模型

1、上面的模型都是cesium自带的，如果是自己的模型，怎么加载呢？有两种方式：

通过Cesium3DTileset.fromUrl方式[官网地址](Cesium3DTileset - Cesium Documentation)

const tileset = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromUrl("/tileset/Photogrammetry/tileset.json")
);

2、上传到cesiumion自己的资源中，会生成一个id，然后用前面的方法

六、加载GeoJSON数据展示区块

矢量数据是用于描述地理空间几何特征的一类基于向量的地理信息数据，在地理信息系统(GIS)应用中广泛使用。矢量数据通常用于表示诸如点、线、面和多边形等地理空间对象，同时还可以附带一些地理相关的属性数据，如名称、类型和面积等等。

相比之下，栅格数据通常是一种基于像素的数据格式，用于描述地理空间上的每个像素的颜色或亮度等信息。在处理大规模地图数据、复杂地理空间关系和属性数据时，矢量数据通常更加具有效率和精度。

Cesium支持的矢量数据格式：

GeoJSON
KML (Keyhole Markup Language)
CZML (Cesium Language)

GeoJSON是一种常用的基于JavaScript对象表示法（JSON）的地理数据交换格式。GeoJSON支持诸如点、线、面和多边形等地理要素的表示，并且可以和矢量数据结构相互转换。在Cesium中，使用Cesium.GeoJsonDataSource.load()方法可以将本地的GeoJSON文件加载到图层中。

GeoJsonDataSource

从GeoJSON数据源创建实体。GeoJsonDataSource支持GeoJSON规范的各种要素类型和属性。
常用属性

name：用于描述数据源的名称
show：是否可见
clustering：EntityCluster类型，实体聚合相关设置

常用方法

load(url, options)：从指定的URL加载GeoJSON文件

加载示例

const viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000.json', {
  stroke: Cesium.Color.HOTPINK,
  fill: Cesium.Color.PINK,
  strokeWidth: 3,
  markerSymbol: '?'
}));

Cesium加载GeoJSON数据格式的中国地图示例

Cesium加载GeoJSON数据非常简单，只需要三步即可完成调用

1、创建viewer对象

2、使用Cesium.GeoJsonDataSource.load()方法加载GeoJSON数据

3、将加载的GeoJSON数据添加到viewer中

由于Cesium.GeoJsonDataSource.load()方法是异步的，我们这里使用await 的方式执行代码，首先我们将需要的GeoJSON数据拷贝到相关文件夹，然后在vue的onMounted中执行如下代码：

onMounted( async () => {
	const viewer = new Cesium.Viewer('cesiumContainer',{
	    animation:false,//动画小部件
	    baseLayerPicker:false,//地图图层组件
	    fullscreenButton:false,//全屏组件
	    geocoder:false,//地理编码搜索组件
	    homeButton:false,//首页组件
	    infoBox:false,//信息框
	    sceneModePicker:false,//场景模式
	    selectionIndicator:false,//选取指示器组件
	    timeline:false,//时间轴
	    navigationHelpButton:false,//帮助按钮
	    navigationInstructionsInitiallyVisible:false,  
	})
	const geoJson = await Cesium.GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000.json') 
	viewer.dataSources.add(geoJson)
})

启动项目，刷新浏览器查看效果。

七、加载KML数据展示POI

KML(Keyhole Markup Language) 是用于描述三维地球或平面地图信息的一种XML格式的标记语言，由Keyhole公司推出。KML支持3D地形图、标签、线、面、纹理和图片等元素。Cesium中，可以通过调用Cesium.KmlDataSource()实例来加载KML文件，并将其添加到图层中。

KmlDataSource

从KML（Keyhole Markup Language）数据源创建实体。KML是一种XML格式，用于描述地理位置和标记信息。

常用属性

name：用于描述数据源的名称
show：是否可见
camera：相机的初始位置和方位角

常用方法

load(url, options)：从指定的URL加载KML文件

加载示例（浏览器中开启跨域执行）：

    <script type="module">
        Cesium.Ion.defaultAccessToken =
            "填写申请的AccessToken";

        const viewer = new Cesium.Viewer("cesiumContainer", {
            // 使用Cesium World Terrain图层可以三维展示地形地势、水形数据让模型效果更立体
            terrainProvider: await Cesium.createWorldTerrainAsync({
                requestWaterMask: true,
                requestVertexNormals: true,
            }),
        });

        const options = {
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas,
        };

        let tour = null;
        viewer.dataSources
            .add(
                Cesium.KmlDataSource.load(
                    "https://sandcastle.cesium.com/SampleData/kml/eiffel-tower-flyto.kml",
                    options,
                ),
            )
            .then(function (dataSource) {
                tour = dataSource.kmlTours[0];
                tour.tourStart.addEventListener(function () {
                    console.log("Start tour");
                });
                tour.tourEnd.addEventListener(function (terminated) {
                    console.log(`${terminated ? "Terminate" : "End"} tour`);
                });
                tour.entryStart.addEventListener(function (entry) {
                    console.log(`Play ${entry.type} (${entry.duration})`);
                });
                tour.entryEnd.addEventListener(function (entry, terminated) {
                    console.log(`${terminated ? "Terminate" : "End"} ${entry.type}`);
                });

                tour.play(viewer.cesiumWidget);
            });
    </script>

八、加载CZML数据展示路径

CZML(Cesium Language) 是一种基于JSON格式的数据交换标记语言，用于描述三维场景中的对象、图形、传感器和装置等。CZML格式旨在提供例如位置、旋转、缩放和材质等属性数据信息，用于实现逼真的三维场景渲染。在Cesium中，可以使用Cesium.CzmlDataSource()实例加载和解析CZML数据源。

CzmlDataSource

使用CZML（Cesium Zoomable Markup Language）创建实体，CZML是一种用于描述场景和可视化的JSON格式。

常用属性

name：用于描述数据源的名称
show：是否可见

常用方法

load(url, options)：从指定的URL加载CZML文件

加载示例

const viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(Cesium.CzmlDataSource.load('https://sandcastle.cesium.com/SampleData/simple.czml'));
// 如果在线引用报错，则可以直接把simple.czml下载到本地引用

九、加载gltf文件

glTF文件介绍

glTF（Graphics Library Transmission Format）是一种用于存储3D模型和场景的格式。它是一种开放的标准格式，可用于在不同的3D引擎和软件之间传输和交换3D模型和场景数据。

glTF文件包含了设计场景或模型的几何形状、材质、纹理、动画等信息，同时有很好的兼容性和可扩展性。glTF文件基于JSON格式，具有易于阅读和修改的特点，同时也易于使用编程语言进行解析和使用。

glTF支持两种文件格式：*.glTF和 *.glb。

.glTF是一个基于JSON格式的文本文件，它可以包含场景、节点、网格信息、材质、动画、相机等3D模型元素，并且可以包括外部资源，如纹理、图像和二进制数据等。.glTF文件易于阅读、修改和编辑，同时可以使用gzip进行压缩以减小文件大小。但是.glTF文件格式在处理复杂场景时，可能会变得比较冗长，处理速度较慢。

.glb是一种基于二进制的文件格式，它包含所有的glTF数据，包括所有的外部资源。由于.glb文件是二进制文件，大大减小了文件大小和加载时间，同时保持了.glTF文件的灵活性和可编辑性。.glb文件也可以使用gzip压缩以进一步减小文件大小。但是.glb文件格式作为二进制文件，难以直接进行编辑和修改。

Cesium加载gltf文件的方法

在Cesium中加载gltf文件，可以使用viewer.entities.add方法进行加载，在这里需要注意一个细节，在add方法中加载model时，配置的参数是uri，不是url，这里一定要注意，否则会无法加载。

详细代码如下：

    <script type="module">
        Cesium.Ion.defaultAccessToken =
            "申请的AccessToken";

        const viewer = new Cesium.Viewer("cesiumContainer", {

        });

        viewer.entities.removeAll();

        const position = Cesium.Cartesian3.fromDegrees(
            -123.0744619,
            44.0503706,
            5000,
        );
        const heading = Cesium.Math.toRadians(135);
        const pitch = 0;
        const roll = 0;
        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

        const entity = viewer.entities.add({
            name: "https://sandcastle.cesium.com/SampleData/models/CesiumAir/Cesium_Air.glb",
            position: position,
            orientation: orientation,
            model: {
                uri: "https://sandcastle.cesium.com/SampleData/models/CesiumAir/Cesium_Air.glb",
                minimumPixelSize: 128,
                maximumScale: 20000,
            },
        });

        viewer.trackedEntity = entity;
    </script>

十、Scene场景

Cesium 中表示场景的对象，包含多个属性，用于控制和管理 3D 场景的各个方面。

Cesium.viewer.scene常见属性与方法

const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //camera
  //设置相机的位置
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114, 38, 1000),
  });
  
  // screenSpaceCameraController
  //禁用相机的旋转功能,没有办法拖拽平移
  viewer.scene.screenSpaceCameraController.enableRotate = true;
  
  //mode 
  //指示场景是在2D、3D或2.5D哥伦布视图
  viewer.scene.mode = Cesium.SceneMode.SCENE3D;
  //viewer.scene.mode = Cesium.SceneMode.SCENE2D;
  //viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
  
  //fog
  //场景中的雾效果设置
  viewer.scene.fog.enabled = true; // 启用雾效果
  viewer.scene.fog.density = 0; // 设置雾的密度
  
  //backgroundColor 
  // 设置背景颜色为青色
  viewer.scene.backgroundColor = Cesium.Color.CYAN;
  
  //sun,moon
  viewer.scene.sun.show = true; // 显示太阳
  viewer.scene.moon.show = true; // 隐藏月球
  
  //skyBox 
  //场景的天空盒,用于设置背景的天空图像
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      positiveX: "src/assets/images/image.png",
      negativeX: "src/assets/images/image.png",
      positiveY: "src/assets/images/image.png",
      negativeY: "src/assets/images/image.png",
      positiveZ: "src/assets/images/image.png",
      negativeZ: "src/assets/images/image.png",
    },
  });
  
  //scene.globe,场景中的地球对象,控制地球的显示属性
  //globe.enableLighting 
  //是否启用地球的光照效果
  viewer.scene.globe.enableLighting = true; // 启用光照
  
  //globe.dynamicAtmosphereLighting 
  //对大气和雾启用动态光照效果
  viewer.scene.globe.dynamicAtmosphereLighting = false;
  
  //globe.imageryLayers
  //用于管理和操作地球表面图像图层的集合
  const imageryLayers = viewer.scene.globe.imageryLayers;
  
  //globe.baseColor 
  //地球的基础颜色
  viewer.scene.globe.baseColor = Cesium.Color.BLUE; // 设置地球的基础颜色为蓝色
  
  //globe.show 
  //控制地球是否可见
  viewer.scene.globe.show = true; // 隐藏地球

完整可参考Cesium官网-Scene

十一、Camera相机

Cesium 中用于控制视图的相机对象，具有多个属性来调整视角和相机行为。

Cesium.viewer.camera常见属性与方法

const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //setView
  //设置相机的视图，通过提供目标位置、方向等参数来调整视角
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114, 38, 1000),
    orientation: {
      heading: Cesium.Math.toRadians(90.0),
      pitch: Cesium.Math.toRadians(-30.0),
      roll: 0.0,
    },
  });
  
  //flyTo
  //平滑地移动相机到指定的位置和视角。
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-75.1, 39.57, 1000),
    orientation: {
      heading: Cesium.Math.toRadians(90.0),
      pitch: Cesium.Math.toRadians(-30.0),
      roll: 0.0,
    },
  });
  
  //lookAt
  // 使相机平视某个目标点
  viewer.camera.lookAt(
    Cesium.Cartesian3.fromDegrees(-75.1, 39.57), // 目标位置
    new Cesium.Cartesian3(0.0, 0.0, 1000.0) // 相机位置
  );

destination：摄像机视角的目标位置，指定摄像机的中心点。
Cartesian3：三维笛卡尔直角坐标。当用来表示位置的时候，这个坐标指在地固坐标系下，相对地球中心的坐标位置，单位是米。（可以看作，以椭球中心为原点的空间直角坐标系中的一个点的坐标）
fromDegrees(longitude, latitude, height)：将经纬度和高度转换为地球中心坐标系中的三维坐标。
orientation：摄像机的方向和姿态，定义了摄像机的朝向、俯仰和滚转角度。
heading：摄像机的航向角，以弧度为单位。表示摄像机的左右旋转角度。0 弧度表示正北方向，90 弧度表示正东方向。
pitch：摄像机的俯仰角，以弧度为单位。表示摄像机的上下旋转角度。负值表示向下看，正值表示向上看。
roll：摄像机的滚转角，以弧度为单位。表示摄像机绕其自身轴线的旋转。

完整可参考Cesium官网-Camera

十二、Clock时钟

Cesium 中的时钟对象，用于控制时间和动画。它管理时间的流逝，允许你设置、调整和查询当前的时间以及时间相关的设置。

Cesium.viewer.clock常见属性与方法

const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //currentTime
  // 当前的时间
  const currentTime = viewer.clock.currentTime;
  
  //startTime 
  //时钟的起始时间点
  viewer.clock.startTime = Cesium.JulianDate.fromDate(new Date(2024, 0, 1));

  //stopTime 
  //时钟的停止时间点
  viewer.clock.stopTime = Cesium.JulianDate.fromDate(new Date(2024, 12, 31));
  
  //clockRange 
  //时钟的范围限制，指定时钟是否可以超出 startTime 和 stopTime 的范围
  //时间轴会在达到最大时间时回到最小时间继续循环，但不会超出范围。用户可以看到时间在循环
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

  //时间轴的范围被限制在最小和最大时间之间，用户无法超出此范围。时间自动回到范围内的最后一个有效时间点
  //viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

  //时间轴没有限制，用户可以随意向前或向后移动时间，不受最小和最大时间的限制
  //viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
  
  //multiplier 
  //时间乘数，控制时间流逝的速度
  viewer.clock.multiplier = 10; // 将时间流逝速度设为正常的 10 倍

  //shouldAnimate 
  //时钟是否处于动画状态
  viewer.clock.shouldAnimate = true; // 启用动画

  //onTick
  //时钟滴答事件的回调函数，每次时钟更新时触发
  viewer.clock.onTick.addEventListener(function (clock) {
    console.log("Clock ticked:", clock.currentTime);
  });

  //clockStep 
  //时间推进步长，控制时间更新的频率
  viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 使用系统时钟来推进时间

currentTime、startTime、stopTime ：通常都是一个 Cesium.JulianDate 对象。
JulianDate：Cesium 中用于表示时间的类，基于儒略日系统。它提供了精确的时间表示，适合高精度的时间计算。
fromDate：JulianDate 类的一个静态方法。它接受一个 JavaScript 的 Date 对象，并将其转换为儒略日期格式，这种格式用于 Cesium 的时间系统中。

完整可参考：Cesium官网-Clock

十三、Entity实体

Cesium.viewer 的 entities 属性是一个 Cesium.EntityCollection 对象，用于管理和操作场景中的所有实体（如点、线、面、模型等）。

Cesium.viewer.entities 常见属性与方法

  const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //add
  //将一个实体对象添加到 EntityCollection 中
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1, 39.57),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
    },
  });
  
  //remove
  //从 EntityCollection 中移除一个实体对象
  viewer.entities.remove(entity);

  //removeAll
  //移除 EntityCollection 中的所有实体
  viewer.entities.removeAll();

  //getById
  //根据实体的 ID 获取实体对象
  const specifiedEntity = viewer.entities.getById("1");
  console.log("specifiedEntity", specifiedEntity);

  //suspendEvents()
  //暂停所有与 EntityCollection 相关的事件处理。可以用来临时禁用事件，减少性能开销
  viewer.entities.suspendEvents();

  //resumeEvents()
  // 恢复之前暂停的事件处理
  viewer.entities.resumeEvents();

  //contains(entity)
  //检查 EntityCollection 中是否包含指定的实体
  const containsEntity = viewer.entities.contains(entity);

添加Cesium.Entity实体的详细配置选项

//add
const heading = Cesium.Math.toRadians(135);
const pitch = 0;
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const entity = viewer.entities.add({
  //实体的唯一标识符，用于区分不同的实体
  id: "1",
  //实体的名称，便于描述和识别
  name: "UFC综合格斗轻量级世界冠军崇拜者",
  //实体的朝向，描述其旋转状态
  orientation: Cesium.Transforms.headingPitchRollQuaternion(position, hpr),
  //实体的位置。可以是固定的位置或随时间变化的 CallbackProperty
  position: Cesium.Cartesian3.fromDegrees(116.391, 39.917),
  //配置点的外观
  point: {
    pixelSize: 50, //点的大小
    color: Cesium.Color.CYAN, //点的颜色
    outlineColor: Cesium.Color.CORAL, //点的轮廓颜色
    outlineWidth: 10, //轮廓宽度
  }
})

//配置标签的样式
  label: {
    text: "Hello", //标签文本
    //font: 字体
    fillColor: Cesium.Color.RED, //填充颜色
    //outlineColor: 轮廓颜色
    outlineWidth: 50, //轮廓宽度
    //style: 标签样式（如填充、轮廓等）
  },

 //配置广告牌的样式
  billboard: {
    image: "src/assets/images/image2.webp", //图片 URL
    scale: 2, //缩放比例
    width: 100, //图片宽度
    height: 100, //图片高度
    color: Cesium.Color.WHITE, //图片颜色
  },

//配置折线的样式
  polyline: {
  //折线的坐标数组
  positions: Cesium.Cartesian3.fromDegreesArray([
	116.391,
	39.921, // 点1
    116.386,
    39.921, // 点2
    116.386,
    39.916, // 点3
    116.386,
    39.912, // 点4
  ]),
  width: 5.0, // 折线宽度
  material: Cesium.Color.RED, //折线颜色
  arcType: Cesium.ArcType.NONE, // 弧类型，NONE 表示不弯曲
},

//配置走廊的样式
  corridor: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        116.391,
        39.921, // 点1
        116.396,
        39.921, // 点2
        116.396,
        39.916, // 点3
        116.396,
        39.912, // 点4
      ]),
      width: 30, //走廊宽度
      material: Cesium.Color.CORAL, //走廊颜色
    },

//配置模型的样式
  model: {
   uri: "/models/Cesium_Man.glb", //模型文件的 URL
    scale: 300, //模型的缩放比例
    color: Cesium.Color.WHITE, //模型颜色
    minimumPixelSize: 2, //最小像素尺寸
  },
});

Cesium.HeadingPitchRoll： Cesium 中一个用于表示实体旋转的类。
heading： 沿Z轴的旋转角度，通常表示实体的朝向（偏航角）。它控制实体在水平面上的旋转，类似于一个航向角。
pitch： 沿X轴的旋转角度，表示实体的俯仰角。它控制实体的上下倾斜，即前后方向的旋转。
roll： 沿Y轴的旋转角度，表示实体的滚转角。它控制实体绕前后轴的旋转，即左右倾斜。

完整可参考：Cesium官网-Entity