用开发CesiumJS模拟飞机飞行应用(一，基本功能)

本部分向您展示如何构建您的第一个 Cesium 应用程序，以可视化模拟从旧金山到哥本哈根的真实航班，并使用 FlightRadar24收集的雷达数据。您将学习如何：

• 在网络上设置并部署您的 Cesium 应用程序。

• 添加全球 3D 建筑物、地形和图像的基础图层。

• 根据一段时间内的位置列表准确地可视化飞机的飞行轨迹，并仿真模拟飞机飞行状态。

  

这部分共分为三个章节来讲：

1. 基本环境搭建和基础功能实现

2. 添加3D路径点，显示飞机的飞行轨迹！

3. 完成飞机的飞行模拟代码添加。

导入 CesiumJS 库。JavaScript 和 CSS 文件：

<script src="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

为场景添加一个 HTML 容器：

<div id="cesiumContainer"></div>。

使用以下命令初始化查看器：

const viewer = new Cesium.Viewer('cesiumContainer');。

   现在，您的浏览器中运行了一个基本的 CesiumJS 应用程序，其中包含来自 Cesium ion 的全球卫星图像。

设置Glitch是否 自动刷新

  每次代码更改时，Glitch 都会自动刷新页面。您可以通过单击左上角的项目名称并取消选中此框来切换此选项：

使用应用程序窗口顶部的刷新按钮手动重新运行应用程序：

添加全球3D建筑物和地形

下面我们在场景中添加一些全局图层。默认情况下，您的 Cesium ion 帐户可以访问以下资源：

• Cesium World Terrain — 高分辨率地形，精度高达 1 m。

• Cesium OSM 建筑物— 超过 3.5 亿座建筑物源自 OpenStreetMap 数据。

• Bing 地图航空图像— 分辨率高达 15 厘米的全球卫星图像。

您的刚才开发的应用程序已默认使用 Bing 地图图层。

将index.html代码 中的 JavaScript 代码 替换 为以下代码，注意保留之前的访问令牌行。

// Keep your `Cesium.Ion.defaultAccessToken = 'your_token_here'` line from before here. 
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

const osmBuildings = await Cesium.createOsmBuildingsAsync();
viewer.scene.primitives.add(osmBuildings);

您通过单击并拖动来查看三维场景。拖动时按住 CTRL 键可改变相机角度。

自此，程序的开发环境和基本功能已经完成，下一节我们介绍如何在此基础上显示飞机的飞行轨迹!