当前位置：首页 > news >正文

【WebGIS】Cesium：快速创建三维地图

news 2024/12/24 9:15:15

这时为初学者书写的Cesium教程将帮助初学者从零开始搭建Cesium开发环境，并构建一个最简单的Cesium项目。以下是详细步骤，包括环境搭建、项目结构设置以及实现最基本的Cesium功能。

注册 Cesium 账户并获取 API Token

访问 Cesium 官网
前往 Cesium 官网.
注册账户
如果你还没有账户，点击页面右上角的 “Sign Up” 注册一个免费账户。
获取 API Token
- 登录后，进入 Cesium Ion 页面。
- 在左侧菜单中选择 “Access Tokens”。
- 创建一个新的 Access Token，给它命名（如 “My Cesium Token”），然后保存生成的 token。

创建 HTML 文件

创建 HTML 文件
打开你的文本编辑器（如 VSCode、Notepad++ 等），创建一个新的 HTML 文件，命名为 index.html。

编写 HTML 文件内容
将以下代码粘贴到 index.html 文件中，确保将 YOUR_ACCESS_TOKEN 替换为你从 Cesium Ion 获取的 token：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My First Cesium App</title><!-- 加载 Cesium 的 CSS 样式 --><link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>/* 设置页面和Cesium容器的大小 */html, body, #cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head>
<body><!-- Cesium 地图容器 --><div id="cesiumContainer"></div><!-- 加载 Cesium 的 JavaScript 文件 --><script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script><script>// 设置 Cesium Ion 的 Access TokenCesium.Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN';// 初始化 Cesium Viewer，绑定到 cesiumContainer 容器var viewer = new Cesium.Viewer('cesiumContainer');</script>
</body>
</html>

设置 Cesium Ion Token：在 JavaScript 部分，使用 Cesium.Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN'; 来设置你从 Cesium Ion 获取的 token。这是必要的步骤，尤其在需要访问 Cesium 提供的基础地形、影像或其他数据时。
页面布局：通过简单的 CSS 设置，确保 Cesium 的容器充满整个页面，地球会自动在页面加载后显示。
Cesium Viewer：Cesium.Viewer 是 Cesium 的基础类，它提供了一个带有默认设置的 3D 地球场景。在这里我们创建了 viewer 实例并将其绑定到 cesiumContainer 容器中。

启动并查看效果

将 index.html 文件保存好后，你可以通过以下两种方式启动：

本地直接打开文件：
- 打开文件所在的文件夹，双击 index.html 文件，用浏览器（如 Chrome 或 Edge）打开即可。
- 你将看到一个 3D 地球，摄像机会飞到纽约市上空。
通过本地服务器（推荐）：
- 如果你安装了 Node.js，可以使用 http-server 运行一个本地服务器。
- 在终端中进入 index.html 文件所在的目录，运行以下命令：
```
npx http-server -p 8080
```
- 然后在浏览器中访问 http://localhost:8080 即可。