用开发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 键可改变相机角度。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/518340.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何让文案充满故事感,媒介盒子揭秘

文案本质是沟通&#xff0c;而故事是一种高明的沟通策略&#xff0c;在信息泛滥的时代下&#xff0c;“有故事感”的文案拥有比普通文案更强大的传播力&#xff0c; 它们利用人类对故事的天然喜好&#xff0c;消解了用户对广告的排斥感。今天媒介盒子就来和大家聊聊&#xff1a…

获取别人店铺的所有商品API接口

使用淘宝淘口令接口的步骤通常包括&#xff1a; 注册成为淘宝开放平台的开发者&#xff1a;在淘宝开放平台网站上注册账号并完成认证。 创建应用以获取API密钥&#xff1a;在您的开发者控制台中创建一个应用&#xff0c;并获取用于API调用的密钥&#xff0c;如Client ID和Clie…

如何选择乐歌升降台,一张图带你了解全型号参数功能

在现代办公环境中&#xff0c;久坐已成为一种常态&#xff0c;而这种生活方式带来的不良影响日益凸显。乐歌办公升降电脑台应运而生&#xff0c;不仅是一种办公家具&#xff0c;更是健康办公的有力助手。让我们从多个角度深入了解这款产品的功能意义。 1. 台面层数 乐歌办公升…

分销商城小程序怎么做_打造高效分销商城小程序的秘诀

在数字化浪潮席卷全球的今天&#xff0c;小程序成为了连接线上线下的重要桥梁。其中&#xff0c;分销商城小程序因其独特的裂变传播能力和低门槛的创业模式&#xff0c;受到了越来越多创业者和商家的青睐。那么&#xff0c;如何打造一个高效、吸引人的分销商城小程序呢&#xf…

PCA算法原理及实现(Python)

文章目录 一、基变换二、数据降维2.1 为什么要进行数据降维&#xff1f;2.2 优化目标 三、PCA算法步骤四、求解特征值、特征向量4.1 特征值分解&#xff08;ED&#xff09;4.2 奇异值分解&#xff08;SVD&#xff09; 五、Kernel PCA六、Python代码6.1 读取数据6.2 PCA实现6.3 …

URL?后参数有特殊字符问题

前端对于URL的参数不做处理 不处理、用URLDecoder.decode()处理、用URLEncoder.encode()处理、用URLEncoder.encode()处理后再用URLDecoder.decode()处理 结果 前端对于URL的参数用encodeURIComponent(‘XF-OPPZZD-26*316’)处理 结果 前端不处理有&字符时 结果会把后…

新能源车高压线束更换VR虚拟互动教学保障了培训安全可控

随着新能源汽车市场的快速发展&#xff0c;对于新能源汽车检修人才的需求也日益增长。然而&#xff0c;传统的培训模式往往存在一些限制&#xff0c;如培训周期长、成本高、实践机会少等。为了解决这些问题&#xff0c;新能源车检修VR互动培训应运而生&#xff0c;成为一种创新…

如何在Win系统部署Tomcat服务并实现远程访问内网站点

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学…

NLP:自定义模型训练

书接上文&#xff0c;为了完成指定的任务&#xff0c;我们需要额外训练一个特定场景的模型 这里主要参考了这篇博客&#xff1a;大佬的博客 我这里就主要讲一下我根据这位大佬的博客一步一步写下时&#xff0c;遇到的问题&#xff1a; 文中的cfg在哪里下载&#xff1f; 要不…

抽奖小程序怎么在线制作_引爆你的营销活动

抽奖小程序&#xff0c;轻松在线制作&#xff0c;引爆你的营销活动&#xff01; 在如今数字化时代&#xff0c;营销方式层出不穷&#xff0c;如何快速吸引用户眼球&#xff0c;提高品牌知名度&#xff0c;成为每个企业关注的焦点。今天&#xff0c;我要向大家介绍一款神奇的工…

vue3 vue-i18n 多语言

1. 安装 npm install vue-i18n -s 2. 引入main.js import { createI18n } from vue-i18n import messages from ./i18n/index const i18n createI18n({legacy: false,locale: Cookies.get(language) || en_us, // set localefallbackLocale: en_us, // set fallback local…

Linux Ubuntu系统安装MySQL并实现公网连接本地数据库【内网穿透】

文章目录 前言1 .安装Docker2. 使用Docker拉取MySQL镜像3. 创建并启动MySQL容器4. 本地连接测试4.1 安装MySQL图形化界面工具4.2 使用MySQL Workbench连接测试 5. 公网远程访问本地MySQL5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 前言 本文主…