CesiumJS 快速入门

这是使用真实世界数据使用 Cesium 构建 3D 应用程序的快速入门。您将学习如何在网页上设置 Cesium 应用程序，如下所示：

加载旧金山全球 3D 地形和建筑物的基本 Cesium 应用程序。单击以进行交互，或在搜索框中键入地址。

步骤 1：创建账户并获得令牌

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

注册一个免费的 Cesium 帐户，为您的应用程序获取全球卫星图像和真实世界的 3D 内容。登录后：

1. 转到您的 Access Tokens 选项卡。
2. 请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。

步骤 2：设置 CesiumJS 客户端

CesiumJS 是一个开源的 JavaScript 引擎。我们将使用它来可视化我们从 Cesium ion 加载的内容。 本指南涵盖了两种设置 CesiumJS 的方法：

• 从 CDN 导入
• 使用 NPM 安装

从 CDN 导入

下面是一个完整的 HTML 页面，它将加载所需的 JavaScript 和 CSS 文件并初始化旧金山的场景。如果您没有开发环境，您可以创建一个包含此 HTML 的文件并在浏览器中查看它。 为方便起见，我们在下面的代码段中包含了您帐户中的默认访问令牌。

// Your access token can be found at: https://cesium.com/ion/tokens.
// This is the default access token from your ion account

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODdlN2I5OS1iZDMyLTQ2MTItODQwYi01MGE3NGI3NGIzNGUiLCJpZCI6MTE4MjU5LCJpYXQiOjE2NzA5ODI0MDd9.XpfuSxbcNuxNF1jMqI5FxveHXhiq6VVCsww80hIVAME';

// Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// Fly the camera to San Francisco at the given longitude, latitude, and height.
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),
  }
});

在沙箱中打开

Sandcastle 中的代码略有不同，因为 Sandcastle 不需要您的令牌进行身份验证，而且它会自动创建高级 HTML 标记。

使用 NPM 安装

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

npm install cesium

下面的代码加载所需的 JavaScript 和 CSS 文件。 为方便起见，我们在下面的代码段中包含了您帐户中的默认访问令牌。

// The URL on your server where CesiumJS's static files are hosted.
window.CESIUM_BASE_URL = '/';

import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

// Your access token can be found at: https://cesium.com/ion/tokens.
// This is the default access token from your ion account

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODdlN2I5OS1iZDMyLTQ2MTItODQwYi01MGE3NGI3NGIzNGUiLCJpZCI6MTE4MjU5LCJpYXQiOjE2NzA5ODI0MDd9.XpfuSxbcNuxNF1jMqI5FxveHXhiq6VVCsww80hIVAME';

// Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());

// Fly the camera to San Francisco at the given longitude, latitude, and height.
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_BASE_URL

CesiumJS 需要一些静态文件托管在你的服务器上，比如 web worker 和 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

window.CESIUM_BASE_URL 必须在导入 CesiumJS 之前设置全局变量。 它必须指向提供这四个目录的 URL。 例如，如果 http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png 的图片 Assets/Images/cesium_credit.png 使用了 static/Cesium/ 前缀，那么您可以按如下方式设置基本 URL：

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

有关完整的 Webpack 配置，请参阅 Cesium Webpack 示例。

下一步

现在您已经设置了您的 Cesium 应用程序，可以探索整个世界！查看您可以使用这些教程构建什么：

构建航班跟踪：使用 FlightRadar24 收集的雷达数据可视化从旧金山到哥本哈根的真实航班。

可视化拟构建筑：用您自己的 3d 模型替换真实城市中的建筑物，并查看它如何改变视图。