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

T0uken

已于 2024-10-11 19:24:15 修改

阅读量494

点赞数 12

分类专栏： GIS 文章标签： cesium gis

于 2024-10-11 19:19:43 首次发布

本文链接：https://blog.csdn.net/2303_80346267/article/details/142861351

版权

GIS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这时为初学者书写的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 Token
        Cesium.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 即可。