Cesium 快速入门（一）快速搭建项目

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二

作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

Cesium 快速入门指南

本指南将引导您完成 CesiumJS 项目的快速搭建，并解决常见的渲染问题。

环境准备

首先，我们需要创建一个 Vue 项目，并安装 CesiumJS 及其相关的 Vite 插件。

bash 复制代码

# 1. 创建 Vue 项目 (推荐使用 npm 7+，若遇到问题可尝试添加 --npm)
npm create vite@latest my-vue-cesium -- --template vue

# 2. 进入项目目录
cd my-vue-cesium

# 3. 安装 CesiumJS
npm install cesium --save

# 4. 安装 vite-plugin-cesium 插件 (用于解决 CesiumJS 静态资源加载问题)
# CesiumJS 在运行时需要加载大量的静态资源（如 Workers、Assets、Widgets、ThirdParty），
# vite-plugin-cesium 插件会自动处理这些资源的复制和路径配置，避免渲染错误。
# 如果不使用此插件，您需要手动配置 `window.CESIUM_BASE_URL`，具体可参考 CesiumJS 官方教程：
# https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
npm i vite-plugin-cesium -D

工程配置

直接将下面代码复制到vite.config.js文件中

js 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import cesium from "vite-plugin-cesium";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), cesium()],
});

组件实现

vue 复制代码

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

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const cesiumContainer = ref(null);
let viewer = null;

onMounted(() => {
  // 初始化Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {});
});
</script>

效果验证

未配置插件时的典型渲染错误

正确配置后的地球显示效果