第一个cesium项目

第一个cesium项目#

创建 Vite 项目#

这里使用vite搭建demo, 选择 Vanilla （代表原生 JS）

1
npm create vite@latest my-cesium-demo

安装 Cesium#

我们需要安装 Cesium 库本身，以及一个专门为 Vite 打造的 Cesium 插件。

安装 Cesium:
Terminal window
```
1
npm install cesium
```
安装 Vite 插件 (vite-plugin-cesium): 这个插件会自动帮你处理 Cesium 的静态资源。
Terminal window
```
1
npm install vite-plugin-cesium -D
```

配置 Vite#

在项目根目录新建 vite.config.js 文件。

1
import { defineConfig } from 'vite';
2
import cesium from 'vite-plugin-cesium'; // 引入插件
3

4
export default defineConfig({
5
  plugins: [
6
    cesium() // 使用插件
7
  ]
8
});

Cesium 代码#

打开 index.html，把 <body> 里的内容改成一个简单的 div，作为 Cesium 的容器：

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Cesium Demo</title>
8
  </head>
9
  <body>
10
    <div id="cesiumContainer"></div>
11
    <script type="module" src="/main.js"></script>
12
  </body>
13
</html>

main.js

1
// 1. 引入 Cesium 的 CSS
2
import 'cesium/Build/Cesium/Widgets/widgets.css'
3

4
// 2. 引入 Cesium 库
5
import * as Cesium from 'cesium'
6

7
// 3. 设置 Cesium 静态资源路径
8
// (这一步很重要，vite-plugin-cesium 会自动处理，但我们需要告诉 Cesium 从哪里加载)
9
window.CESIUM_BASE_URL = '/Cesium/'
10

11
// 4. (可选) 设置你的 Cesium Ion Token
12
const ACCESS_TOKEN =
13
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZjRiOWJjYS05YjFlLTQwMDItODJlMy1iNzNkODU5NDJiMjIiLCJpZCI6Mjg1NjUyLCJpYXQiOjE3NDIzNjYzODB9._KJdWwzj8NIjoVImtrNdClZ3zqa44wo3qb5cOXdOpBU'
14
Cesium.Ion.defaultAccessToken = ACCESS_TOKEN
15

16
// 5. 初始化 Cesium Viewer
17
const viewer = new Cesium.Viewer('cesiumContainer', {
18
  // --- 为了保持 Demo 简洁，我们关闭一些默认控件 ---
19
  animation: false, // 是否显示动画控件
20
  baseLayerPicker: false, // 是否显示图层选择器
21
  fullscreenButton: false, // 是否显示全屏按钮
22
  geocoder: false, // 是否显示地名查找控件
23
  homeButton: false, // 是否显示 Home 按钮
24
  infoBox: false, // 是否显示信息框
25
  sceneModePicker: false, // 是否显示3D/2D/哥伦布视图切换器
26
  selectionIndicator: false, // 是否显示选取指示器
27
  timeline: false, // 是否显示时间线
28
  navigationHelpButton: false, // 是否显示导航帮助按钮
29

30
})
31
// (可选) 关掉 logo
32
viewer._cesiumWidget._creditContainer.style.display = 'none'
33
// 移除原有的layer
34
viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
35
// viewer.imageryLayers.removeAll()
36

37
// 添加一个在 Ion 注册的 layer
38
const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(Cesium.IonImageryProvider.fromAssetId(3954))
39
viewer.imageryLayers.add(imageryLayer)
40

41
console.log('Cesium + Vite demo is running!')

第一个cesium项目#

创建 Vite 项目#

安装 Cesium#

配置 Vite#

Cesium 代码#

文章分享