Day 1：准备工作以及创建一个地球

## 准备工作下载VS code

**VS Code：** <https://code.visualstudio.com/>

VS code下载好后安装扩展Live Server

![扩展截图][1]

## 账号准备（推荐注册）

**cesium官网：**<https://cesium.com/>

这个账号可注册也可不注册，不注册也能使用cesium开发网页，但是注册了可以使用cesium官方提供的一些资源

比如：

Aerometrex Denver High Resolution 3D Model with Street Level Enhanced 3D (Non-Commercial Trial)
Bing Maps Aerial 等等。

![2025-08-05T06:06:20.png][2]

## 环境准备

- CDN 引入 JS 和 CSS

JS和 CSS 文件可以通过 CDN 引入，无需下载。

JS引入
`<script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script>`

CSS引入
`<link href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css" rel="stylesheet">`

完整代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <title>Cesium Earth</title>
    <style>
        /* 重置基本样式 */
        html, body, #earth {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="earth"></div>
    <script>
        const viewer = new Cesium.Viewer('earth');
    </script>
</body>
</html>
```
- 本地引入 JS 和 CSS

下载cesium文件：[下载地址](https://github.com/CesiumGS/cesium/releases/download/1.132/Cesium-1.132.zip)

该文件中包含了cesium的JS和CSS文件，而且还包含文档，也有很多实例在里面

以下就是下载后的文件，我们需要的是中Build文件夹中的Cesium文件夹下的所有文件，将Cesium文件夹复制，拷贝到html文件所在目录下

![文件展示][5]

拷贝结果 文件结构如图所示

本地资源代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./Cesium/Cesium.js"></script>
    <link href="./Cesium/Widgets/widgets.css" rel="stylesheet">
    <title>Cesium Earth</title>
    <style>
        /* 重置基本样式 */
        html, body, #earth {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="earth"></div>
    <script>
        const viewer = new Cesium.Viewer('earth');
    </script>
</body>
</html>
```

- 在VS code中打开html文件，右击点击OPEN with Live Server，即可在浏览器中打开网页，即可看到地球

### **CDN资源加载代码演示图**

![代码图片.png][4]

### **CDN资源加载效果演示**

![效果图片.png][3]

### **本地资源加载代码演示图**

![代码图片.png](https://api.bestuss.cn/upload/6892572f0e1c9.png)

### **本地资源加载演示图**

![效果图.png](https://api.bestuss.cn/upload/68925690cf15f.png)

## 代码解读

其中我们只需要关注
```html
    <div id="earth"></div>
    <script>
        const viewer = new Cesium.Viewer('earth');
    </script>
```

你可以这样想，你有一张纸和一个印章，上面这个步骤就相当于你将章印在纸上。
现在将`<div id="earth"></div>`想象成一张纸，`Cesium.Viewer('');`就是印章，`const viewer = new Cesium.Viewer('earth');`就是将印章印在纸上这一动作。

就这样地球就出来啦，快来找找你的家乡吧，下期我们来让画面变得更整洁！

Github地址：[https://github.com/lxd2study/cesiumwork](https://github.com/lxd2study/cesiumwork)

[1]: http://blog.bestuss.cn/usr/uploads/2025/08/1509126441.png
  [2]: http://blog.bestuss.cn/usr/uploads/2025/08/84863228.png
  [3]: https://api.bestuss.cn/upload/68924da502a6d.png
  [4]: https://api.bestuss.cn/upload/68924f3e63c67.png
  [5]: https://api.bestuss.cn/upload/689251d1bc6bb.png

Loading content...

Day 1：准备工作以及创建一个地球

添加新评论

最新文章

最近回复

分类

归档

杂项