Cesium 是一个开源的 JavaScript 3D 地理信息可视化引擎，专门用于在 Web 浏览器中创建高性能的 3D 地球和 2D 地图应用。它基于 WebGL 技术，无需插件即可在浏览器中渲染复杂的 3D 地理场景。

一、安装环境

1、安装node.js

Cesium 的开发环境需要 Node.js。从 Node.js 官网 下载并安装最新 LTS 版本。

安装成功后，查看版本 。

node --version  # 应显示 v18.x 或更高
npm --version   # 应显示 9.x 或更高

如下所示，表示安装成功。

​

2、安装vue

在learn目录命令行模式下，运行安装命令。

npm install -g @vue/cli

查看vue版本,如下所示,表示vue安装成功。

​

3、创建vue3项目

在learn文件夹下运行如下命令新建cesium-first项目，提示选择，回车默认选项，生成vue3项目。

vue create cesium-first

4、安装cesium插件

cd learn\cesium-first,在项目根目录下，安装cesium插件。

npm install cesium

5、拷贝cesium库

将node_modules/cesuim/Build/Cesium下四个文件夹Assets、ThirdParty、Widgets、Workers，拷贝到public下；

将node_modules/cesuim/Build/Cesium/Widgets文件夹拷贝到src下，如下图所示，图为

已经拷贝完成的文件夹结构。

​

二、开发cesium项目

1、修改App.vue

修改app.vue，导入cesium库，在生命周期函数onMounted中，新建地球视图。

<template>
  <div id="cesiumContainer"></div>
</template>
  
<script setup>
   //导入Cesium核心库,Cesium是一个用于创建3D地球和2D地图的JavaScript库 - 提供地球、相机、实体、地形、影像等核心功能
  import * as Cesium from 'cesium'
 
  //导入Cesium控件样式,widgets.css是Cesium的默认样式文件,包含时间轴、图层选择器、缩放控件等UI元素的样式
  import "./Widgets/widgets.css"

  //导入Vue生命周期钩子：
  //  onMounted：组件挂载到DOM后执行的函数
  //  onUnmounted：组件从DOM卸载前执行的函数
  //  用于管理Cesium Viewer的生命周期，确保DOM就绪后再初始化
  import { onMounted, onUnmounted } from 'vue';
 
  //配置Cesium静态资源路径,CESIUM_BASE_URL是Cesium的全局配置变量,告诉Cesium从哪个URL加载WebWorker、图片等静态资源
  window.CESIUM_BASE_URL = "/";
    
  //声明Viewer变量：
  //  viewer用于保存Cesium Viewer实例的引用
  //  初始化为null，在onMounted中实例化
  //  需要在多个地方使用，所以声明为模块级变量
  let viewer = null
 
  onMounted(()=>{
     //  创建一个3D地球视图
   viewer= new Cesium.Viewer("cesiumContainer");
    
  })

  onUnmounted(() => {
  if (viewer) {
    // 销毁Viewer实例，释放内存
    viewer.destroy()
    viewer = null
  }
})

</script>

<style>
 
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 防止页面滚动 */
  }
  
  /*  确保Cesium地球能够充满整个容器
  - margin: 0;  移除所有元素的外边距（元素与元素之间的距离）
  - padding: 0; 移除所有元素的内边距（元素内容与边框之间的距离）  
  */
*{
  margin: 0;
  padding: 0;
}
</style>

2、运行项目

项目根目录下运行npm run serve命令.

npm run serve

界面如图。​

三、常用功能

1、创建一个纯净地球

   new Cesium.Viewer('cesiumContainer', {
            animation: false,           // 隐藏动画控件
            baseLayerPicker: false,     // 隐藏图层选择器
            fullscreenButton: false,    // 隐藏全屏按钮
            geocoder: false,            // 隐藏搜索框
            homeButton: false,          // 隐藏主页按钮
            infoBox: false,            // 隐藏信息框
            sceneModePicker: false,     // 隐藏2D/3D切换
            selectionIndicator: false, // 隐藏选择指示器
            timeline: false,           // 隐藏时间轴
            navigationHelpButton: false // 隐藏帮助按钮
        });

如下图所示，去掉右上角搜索、主页等功能的地球。

​

2、设置相机默认矩形区域

 Cesium.Camera.DEFAULT_VIEW_RECTANGLE=
        Cesium.Rectangle.fromDegrees(
             105,   // 西边经度（West longitude）
             21,    // 南边纬度（South latitude）
             110,   // 东边经度（East longitude）
             63     // 北边纬度（North latitude）
    )

 设置默认区域后，当用户点击"Home"按钮时，相机会飞到指定的区域，自动调整相机高度以显示整个区域。

注意：设置后，需要调用viewer.camera.flyHome() 函数，相机才会飞往此默认区域。

效果如下图：

3、设置相机位置

1）立即移动

立即将相机移动到指定位置

// 1. 创建三维空间坐标点
    // Cesium.Cartesian3.fromDegrees() 将经纬度和高度转换为Cesium使用的三维笛卡尔坐标
    // 参数：经度, 纬度, 高度（单位：米）
    var position = Cesium.Cartesian3.fromDegrees(
        116.391275,  // 东经116.391275度
        39.906217,   // 北纬39.906217度
        100          // 高度100米（距离地面的垂直高度）
    );
    
    // 2. 设置相机视图
    // viewer.camera.setView() 立即将相机移动到指定位置（无动画效果）
    viewer.camera.setView({
        destination: position  // 设置相机的目标位置
        // 注意：这里没有设置 orientation（相机朝向），
        // 所以相机会保持默认朝向（看向正下方）
    });

如下图，照相机视觉为天安门。

如果采用相机朝向、俯仰角，翻滚角度，代码如下：

   // 1. 创建三维空间坐标点
    // Cesium.Cartesian3.fromDegrees() 将经纬度和高度转换为Cesium使用的三维笛卡尔坐标
    // 参数：经度, 纬度, 高度（单位：米）
    var position = Cesium.Cartesian3.fromDegrees(
        116.391275,  // 东经116.391275度 
        39.906217,   // 北纬39.906217度 ）
        2000        // 高度100米（距离地面的垂直高度）
    );
    
    // 2. 设置相机视图
    // viewer.camera.setView() 立即将相机移动到指定位置（无动画效果）
    viewer.camera.setView({
        
        destination: position
        ,  // 设置相机的目标位置
        // 注意：这里没有设置 orientation（相机朝向），
        // 所以相机会保持默认朝向（看向正下方）
         orientation: {
            // 航向角：0=北，90=东，180=南，270=西
            heading: Cesium.Math.toRadians(45),    // 朝向东北方向（45度）
            
            // 俯仰角：-90=垂直向下，0=水平，90=垂直向上
            pitch: Cesium.Math.toRadians(-30),     // 向下倾斜30度（俯瞰视角）
            
            // 翻滚角：0=水平，正数=顺时针倾斜
            roll: 0.0                              // 保持水平，不倾斜

 
        }
    })

为了更清晰区分，用 “人体头部动作 + 旋转轴线” 双重维度总结，核心差异在于旋转围绕的轴线不同：

2）让相机飞往某个地方，有延时

 var position = Cesium.Cartesian3.fromDegrees(
        116.391275,  // 东经116.391275度（天安门经度）
        39.906217,   // 北纬39.906217度（天安门纬度）
        2000        // 高度100米（距离地面的垂直高度）
    );

   viewer.camera.flyTo({
      destination: position,  // 目标位置（上面定义的三维坐标）
      orientation: {          // 相机朝向（角度设置）
        heading: Cesium.Math.toRadians(0),   // 朝向正北
        pitch: Cesium.Math.toRadians(-90),   // 垂直向下俯瞰
        roll: 0                             // 无翻滚（水平）
    },
    duration: 4.5,          // 飞行时间 4.5 秒
    maximumHeight: 2000      // 飞行过程中的最大高度限制
   });

3）移动相机

 前后左右上下移动时，不会改变朝向\俯仰角\翻滚角。

// 1. moveForward - 沿相机朝向移动
viewer.camera.moveForward(10);

// 2. moveBackward - 沿相机朝向反向移动
viewer.camera.moveBackward(10);

// 3. moveLeft - 沿相机左方向移动
viewer.camera.moveLeft(10);

// 4. moveRight - 沿相机右方向移动
viewer.camera.moveRight(10);

// 5. moveUp - 沿相机上方向移动
viewer.camera.moveUp(10);

// 6. moveDown - 沿相机下方向移动
viewer.camera.moveDown(10);

// 7. lookUp-相机向上转动 ，类似于抬头看天空
viewer.camera.lookUp(Cesium.Math.toRadians(5));

// 8. lookDown-相机向下转动，类似于低头看地面
 viewer.camera.lookDown(Cesium.Math.toRadians(5));