三天学会Cesium 快速开始

2024-01-08 15:32:58

快速开始

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

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

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

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

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

登录后：

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

步骤2.设置CesiumJS客户端

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

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

从CDN导入
使用NPM安装

从CDN导入

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

只需替换your_access_token为铯离子访问令牌即可。

复制到剪贴板。数据复制剪贴板。

<!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.75/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.75/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：

<span style="color:#2d3a42"><span style="color:#2d3a42"><code>npm install cesium
</code></span></span>

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

只需替换your_access_token为铯离子访问令牌即可。

复制到剪贴板。数据复制剪贴板。

// 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示例。

下一步

现在，您已经设置了Cesium应用程序，有一个值得探索的世界！查看您可以使用以下教程构建的内容：

建立飞行追踪器

根据FlightRadar24收集的雷达数据，可视化从旧金山到哥本哈根的真实航班。

可视化新提议的建筑物

用您自己的3D模型替换真实城市中的建筑物，并查看其如何更改视图。

码农公寓

快速开始

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

步骤2.设置CesiumJS客户端

从CDN导入

使用NPM安装

下一步

相关文章