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

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

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二
作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门 ，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

Cesium 快速入门（一）快速搭建项目
Cesium 快速入门（二）底图更换
Cesium 快速入门（三）Viewer：三维场景的“外壳”
Cesium 快速入门（四）相机控制完全指南
Cesium 快速入门（五）坐标系
Cesium 快速入门（六）实体类型介绍
Cesium 快速入门（七）材质详解
Cesium 快速入门（八）Primitive（图元）系统深度解析
Cesium 快速入门（九）Appearance（外观）系统深度解析
Cesium 快速入门（十） JulianDate（儒略日期）详解
Cesium 快速入门（十一）3D Tiles 大规模三维地理空间数据
Cesium 快速入门（十二）数据加载详解
Cesium 快速入门（十三）事件系统

Cesium 快速入门指南

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

环境准备

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

# 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文件中

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()],
});

组件实现

<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>

效果验证

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

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