学习使用Cesium平台进行构建使用实际数据构建您的第一个Cesium应用

快速开始

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

步骤1.创建一个帐户并获得令牌

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

注册免费的帐户，以获取适用于您应用的全球卫星图像和真实3D内容。

登录后：

转到您的访问令牌标签。
请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。

步骤2.设置CesiumJS客户端

CesiumJS是一个开源JavaScript引擎。我们将使用它来可视化从Cesium中加载的内容。

本指南涵盖了两种设置CesiumJS的方法：

从CDN导入
使用NPM安装

从CDN导入

下面是一个完整的HTML页面，该页面将加载所需的JavaScript和CSS文件并初始化San Francisco的场景。

只需替换your_access_token为您的Cesium访问令牌即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    // 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),
      }
    });
  </script>
 </div>
</body>
</html>

使用NPM安装

如果使用Webpack，Parcel或Rollup等模块捆绑程序构建应用程序，则可以通过运行以下命令安装CesiumJS：

npm install cesium

下面的代码加载所需的JavaScript和CSS文件。

只需替换your_access_token为您的Cesium访问令牌即可。

// 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.
Cesium.Ion.defaultAccessToken = 'your_access_token';
// 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_URLCesiumJS导入之前全局变量必须设置。它必须指向提供这四个目录的URL。

例如，如果在处Assets/Images/cesium_credit.png提供的图片在之前带有static/Cesium/前缀http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png，那么您可以将基本网址设置如下：

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

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