CesiumJS 快速入门

月亮与六便士O_o
1,467 阅读4分钟

原文地址：CesiumJS Quickstart – Cesium

这是一个入门级教程，将指导您如何使用 Cesium 来构建一个涵盖真实世界数据的三维应用程序。接下来，你将学习如何在网页上开发 Cesium 应用：

1. 创建账户并获取令牌

Cesium ion 是一个用于流式传输和托管 3D 内容的开放平台。

首先，注册一个Cesium ion 免费账户，获取全球卫星图像和现实世界 3D 内容以用于您的应用程序。

登录后执行以下操作：

  1. 访问您的 Access Tokens（访问令牌） 页面。
  2. 拷贝默认令牌旁的复制按钮所提供的令牌。我们将在下一步骤中使用此令牌。

image.png

2. 配置 CesiumJS

CesiumJS 是一个开源的 JavaScript 引擎。我们将使用它来渲染从 Cesium ion 加载的内容。

本指南将介绍两种配置 CesiumJS 的方法：

  • 通过 CDN 导入
  • 使用 NPM 安装

从 CDN 导入

以下示例展示了一个完整的 HTML 页面，其会加载所需的 JavaScript 与 CSS 文件，并初始化旧金山的场景。若您没有特定的开发环境，只需将下述 HTML 代码保存为文件，并通过浏览器打开即可。记得将 your_access_token 替换为您的 Cesium ion 访问令牌。

注意：要查看这个示例工作，您需要通过HTTP服务器来承载这个HTML页面，因为直接在浏览器中打开本地文件可能由于安全限制而不会加载外部资源。您可以使用 Node.js 简单的本地服务器来实现这一点，如 http-server、serve。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- 引入 CesiumJS 的 JavaScript 和 CSS 文件 -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    // 您的访问令牌可以在这里找到：https://ion.cesium.com/tokens.
    // 用您的 Cesium ion 访问令牌替换 `your_access_token`。
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    // 在带有 `cesiumContainer` ID 的 HTML 元素中初始化 Cesium Viewer。
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });    
    // 将相机飞到给定的经度、纬度和高度的旧金山。
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
      }
    });
    // 添加 Cesium OSM Buildings，一个全球 3D 建筑层。
    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);   
  </script>
</div>
</body>
</html>

使用 NPM 安装

如果您的应用是通过模块打包器（如 Webpack、Parcel 或 Rollup）构建，您可以通过以下命令来安装 CesiumJS：

npm install cesium

以下示例演示了如何加载所需的 JavaScript 和 CSS 文件。同样地，记得将 your_access_token 替换为您的 Cesium ion 访问令牌。

// CesiumJS 静态文件在服务器上的 URL。
window.CESIUM_BASE_URL = '/';
import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
// 您的访问令牌可以在这里找到：https://ion.cesium.com/tokens.
// 用您的 Cesium ion 访问令牌替换 `your_access_token`。
Ion.defaultAccessToken = 'your_access_token';
// 在带有 `cesiumContainer` ID 的 HTML 元素中初始化 Cesium Viewer。
const viewer = new Viewer('cesiumContainer', {
  terrain: Terrain.fromWorldTerrain(),
});    
// 将相机飞到给定的经度、纬度和高度的旧金山。
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
  orientation: {
    heading: CesiumMath.toRadians(0.0),
    pitch: CesiumMath.toRadians(-15.0),
  }
});
// 添加 Cesium OSM Buildings，一个全球 3D 建筑层。
const buildingTileset = await createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingTileset);

配置 CESIUM_BASE_URL

为了确保 CesiumJS 正确工作，您需要在服务器上托管一些静态文件，包括 Web workers、SVG 图标等。请确保配置您的模块打包器复制以下四个目录并将它们作为静态文件提供服务：

  • node_modules/cesium/Build/Cesium/Workers
  • node_modules/cesium/Build/Cesium/ThirdParty
  • node_modules/cesium/Build/Cesium/Assets
  • node_modules/cesium/Build/Cesium/Widgets

在导入 CesiumJS 之前，您必须设置全局变量 window.CESIUM_BASE_URL。

在导入 CesiumJS 之前必须设置全局变量 window.CESIUM_BASE_URL。它必须指向以上四个目录提供服务的 URL。

例如，如果图片 Assets/Images/cesium_credit.png 可以通过服务路径 http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png 访问，您应如下设置基础 URL：

window.CESIUM_BASE_URL = '/static/Cesium/';

这确保了 CesiumJS 能够找到并正确加载所需的静态资源文件。

下一步

至此，您已经成功设置了自己的 Cesium 应用程序，并拥有了一个展现世界的全球视图。现在，您可以开始探索更多的可能性，看看利用您刚刚学到的知识，能够构建出什么样的应用：

avatar
文章
阅读
粉丝