1.在 Vue 3 中使用 Cesium 快速展示三维地球

运行效果

一、前言

在 WebGIS 和三维可视化项目中，Cesium 是目前最成熟、最强大的 Web 端三维地球引擎之一，广泛应用于：

智慧城市
数字孪生
三维 GIS
遥感影像与倾斜摄影
三维地图与空间分析

本文将结合 Vue 3 + Composition API + TypeScript ，使用 Cesium 1.131.0 ，实现一个最简洁、最易上手的三维地球展示示例，非常适合 Cesium 初学者或 Vue 前端开发者入门。

二、技术栈说明

本文使用的核心技术栈如下：

Vue 3
Composition API
TypeScript
Cesium 1.131.0
Vue Router
OpenStreetMap 免费底图

示例以"能跑起来 + 好理解"为目标，不依赖 Cesium Ion，不需要 Token。

三、Cesium 安装与基础配置

1️⃣ 安装 Cesium

javascript 复制代码

npm install cesium@1.131.0

或者：

pnpm add cesium@1.131.0

2️⃣ 引入 Cesium 样式

Cesium 的 UI 控件样式必须单独引入：

javascript 复制代码

import 'cesium/Build/Cesium/Widgets/widgets.css'

四、Vue 3 组件完整示例

下面是一个完整、可直接使用的 Vue 3 单文件组件示例，用于展示三维地球。

javascript 复制代码

<!--
 * @Author: 彭麒
 * @Date: 2025-12-23
 * @Email: 1062470959@qq.com
 * @Description: Cesium 地球展示
-->
<template>
    <button @click="goBack" class="back-btn">返回</button>
  <div class="container">

    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">在Vue3中使用Cesium展示地球</div>
    </div>
    <div ref="cesiumContainer" id="cesium-viewer"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

const router = useRouter();
let viewer: Cesium.Viewer | null = null;

onMounted(() => {
  const cesiumContainer = document.getElementById('cesium-viewer');
  if (!cesiumContainer) return;

  // 初始化 Cesium Viewer - 最简单的配置
  viewer = new Cesium.Viewer(cesiumContainer, {
    // 使用默认的椭球地形（不需要网络请求）
    terrainProvider: new Cesium.EllipsoidTerrainProvider(),
    // 基本控件
    homeButton: true,
    sceneModePicker: true,
    baseLayerPicker: false, // 关闭底图选择器，因为我们使用固定底图
    navigationHelpButton: true,
    animation: false, // 关闭动画控件
    timeline: false, // 关闭时间轴
    fullscreenButton: true,
    vrButton: false,
    geocoder: false, // 关闭地理编码器
    infoBox: true,
    selectionIndicator: true,
  });

  // 移除默认底图，使用免费的 OpenStreetMap 底图
  viewer.imageryLayers.removeAll();
  viewer.imageryLayers.addImageryProvider(
    new Cesium.OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/'
    })
  );

  // 设置初始相机位置（全球视角）
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(104.0, 35.0, 15000000.0),
  });
});

onBeforeUnmount(() => {
  if (viewer) {
    viewer.destroy();
    viewer = null;
  }
});

const goBack = () => {
  router.push('/Cesium');
};
</script>

<style scoped>
.container {
  width: 1200px;
  height: 800px;
  margin: 50px auto;
  border: 1px solid #42B983;
  position: relative;
}

#cesium-viewer {
  width: 1160px;
  height: 700px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}

.back-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 20px;
  background: #42B983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.back-btn:hover {
  background: #35a372;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(66, 185, 131, 0.3);
}
</style>

六、运行效果

运行后即可看到：

一个可旋转、可缩放的三维地球
使用 OpenStreetMap 底图
支持鼠标拖拽、滚轮缩放
支持 2D / 3D 视角切换

七、常见问题

❓ 是否必须使用 Cesium Ion Token？

不必须

本文示例：

不使用 Ion
不需要 Token
完全本地可运行

❓ Vue 3 中使用 Cesium 的最佳方式？

✅ 推荐：

Composition API
Viewer 只初始化一次
页面卸载时 destroy

八、总结

本文通过一个最小可运行示例 ，演示了如何在 Vue 3 + TypeScript 项目中使用 Cesium 1.131.0 展示三维地球