Cesium实战三：飞行航线动画

飞行航线追踪

可视化从旧金山到哥本哈根的真实航班。

1、获取点位数据：构建飞行跟踪器 – Cesium (cesium.com)

2、在地图上添加飞行点位：循环遍历点位数据，利用Entity直接添加点至地图上。

//添加飞行点位
const addFlightPoint = () => {const length = filghtData.length;for (let i = 0; i < length; i++) {const dataPoint = filghtData[i];viewer.entities.add({description: `Location:(${dataPoint.longitude},${dataPoint.latitude},${dataPoint.height})`,position: Cesium.Cartesian3.fromDegrees(dataPoint.longitude, //经度dataPoint.latitude, //纬度dataPoint.height //高度),point: {pixelSize: 8, //点尺寸color: Cesium.Color.RED, //点颜色},});}
};

3、将飞行点位连接起来，并创建飞行移动实体：

  • 假设雷达样本采样间隔为30s,设定飞行开始时间，飞行结束时间由飞行开始时间+飞行持续时间计算出来。
  • 将开始、结束时间绑定到viewer的时间轴上去，调整时间速率，开启时间动画。
  • 利用采样位置属性实例Cesium.SampledPositionProperty()，循环遍历将所有点与时间创建成样本实例并利用addSample()添加进采样位置属性实例。
  • 创建飞机模型实例，绑定时间间隔集合。利用 Cesium.VelocityOrientationProperty()将飞机实体方向设置为样本一致。
  • 创建飞行路线，利用Cesium.PathGraphics({ width: 3 })设置线条宽度为3.
  • 利用 viewer.trackedEntity = airPlaneEntity设置相机视角跟随飞机实体。
//将飞行点位连接起来，并创建飞行移动实体
const createFlyLine = () => {const length = filghtData.length;const timeStepInSeconds = 30; //雷达样本间隔const totalSeconds = timeStepInSeconds * (length - 1); //飞行的持续时间const start = Cesium.JulianDate.fromIso8601("2022-12-17T23:10:00Z"); //飞行开始时间const stop = Cesium.JulianDate.addSeconds(start,totalSeconds,new Cesium.JulianDate()); //通过计算获得飞行结束时间viewer.clock.startTime = start; //开始时间viewer.clock.stopTime = stop; //停止时间viewer.clock.currentTime = start; //当前时间viewer.timeline.zoomTo(start, stop); //将视图设置为提供的时间。viewer.clock.multiplier = 50; //加快播放速度viewer.clock.shouldAnimate = true; //时针向前走//创建采样位置属性实例const positionProperty = new Cesium.SampledPositionProperty();for (let i = 0; i < length; i++) {const dataPoint = filghtData[i];const time = Cesium.JulianDate.addSeconds(start,i * timeStepInSeconds,new Cesium.JulianDate());const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude,dataPoint.latitude,dataPoint.height);positionProperty.addSample(time, position); //调用addSample方法将样本实例添加进去}//添加飞机模型// const airPlaneUri = Cesium.IonResource.fromAssetId(1980066).then((a)=>{return a});// console.log(airPlaneUri);const airPlaneEntity = viewer.entities.add({//创建时间间隔集合availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop }), //创建时间间隔]),position: positionProperty,//添加飞机模型model: {uri: "../public/GLB/Cesium_Air.glb",minimumPixelSize: 128,maximumScale: 20000,},orientation: new Cesium.VelocityOrientationProperty(positionProperty), //设置方向与采样属性一致path: new Cesium.PathGraphics({ width: 3 }), //路径图形，并宽度为3});viewer.trackedEntity = airPlaneEntity; //视角跟随飞机实体
};

4、添加三维建筑、地形图层：

//添加三维建筑
const loadOSMBuildings = async () => {viewer.scene.primitives.add(await Cesium.Cesium3DTileset.fromIonAssetId(96188, {show: true,}));
};
//添加地形
const addTerrainProvider = async () => {viewer.terrainProvider =await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",{token:"KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..",});
};

在这里插入图片描述

附：完整代码：

<template><div id="view_container"></div>
</template>
<script setup lang="ts">
import * as Cesium from "cesium";
import "../public/Widgets/widgets.css";
import { onMounted } from "vue";import filghtData from "../public/JSON/flightData.json";let viewer: Cesium.Viewer; //地图实例//中国地图JSON：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
//1、加载静态资源
window.CESIUM_BASE_URL = "/";
//2、添加令牌
Cesium.Ion.defaultAccessToken ="your token"
//3、设置地图初始默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(73.5, //西经4, //南纬135.4, //东经53.5 //北纬
);
onMounted(async () => {//5、创建并初始化viewer实例viewer = new Cesium.Viewer("view_container", {infoBox: false, //小弹窗// animation: false, //左下角动画仪表盘baseLayerPicker: false, //右上角图层选择按钮geocoder: false, //搜索框homeButton: false, //home按钮sceneModePicker: false, //模式切换按钮// timeline: false, //底部时间轴navigationHelpButton: false, //右上角帮助按钮fullscreenButton: false, //右下角全屏按钮selectionIndicator: false, //选择指示器});//6、隐藏logo(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";loadGeoJSON();loadCZML();addFlightPoint();createFlyLine();loadOSMBuildings();addTerrainProvider();
});//7、加载GeoJSON数据
const loadGeoJSON = () => {// viewer.dataSources.add(Cesium.GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',{//   stroke:Cesium.Color.fromCssColorString('#048dfa'),//折线和多边形轮廓的默认颜色。//   fill:Cesium.Color.fromCssColorString('#afd6f0'),//填充颜色#048dfa//   strokeWidth:3,//轮廓宽度//   markerSymbol:'?',//为每个点创建的地图图钉的默认符号。// }));//因为加载是Ajax请求，所以可以使用以下方式加载Cesium.GeoJsonDataSource.load("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",{stroke: Cesium.Color.fromCssColorString("#048dfa"), //折线和多边形轮廓的默认颜色。fill: Cesium.Color.fromCssColorString("#afd6f0"), //填充颜色#048dfastrokeWidth: 3, //轮廓宽度markerSymbol: "?", //为每个点创建的地图图钉的默认符号。}).then((dataSources: Cesium.GeoJsonDataSource) => {viewer.dataSources.add(dataSources);});
};//8、加载KML
//9、加载czml
const czml = [{id: "document",name: "box",version: "1.0",},{id: "shape1",name: "Blue box",position: {cartographicDegrees: [-114.0, 40.0, 300000.0],},box: {dimensions: {cartesian: [400000.0, 300000.0, 500000.0],},material: {solidColor: {color: {rgba: [0, 0, 255, 255],},},},},},{id: "shape2",name: "Red box with black outline",position: {cartographicDegrees: [-107.0, 40.0, 300000.0],},box: {dimensions: {cartesian: [400000.0, 300000.0, 500000.0],},material: {solidColor: {color: {rgba: [255, 0, 0, 128],},},},outline: true,outlineColor: {rgba: [0, 0, 0, 255],},},},{id: "shape3",name: "Yellow box outline",position: {cartographicDegrees: [-100.0, 40.0, 300000.0],},box: {dimensions: {cartesian: [400000.0, 300000.0, 500000.0],},fill: false,outline: true,outlineColor: {rgba: [255, 255, 0, 255],},},},
];
const loadCZML = () => {Cesium.CzmlDataSource.load(czml).then((datasoutcePromise: Cesium.CzmlDataSource) => {viewer.dataSources.add(datasoutcePromise);});
};
//10、添加飞行点位
const addFlightPoint = () => {const length = filghtData.length;for (let i = 0; i < length; i++) {const dataPoint = filghtData[i];viewer.entities.add({description: `Location:(${dataPoint.longitude},${dataPoint.latitude},${dataPoint.height})`,position: Cesium.Cartesian3.fromDegrees(dataPoint.longitude, //经度dataPoint.latitude, //纬度dataPoint.height //高度),point: {pixelSize: 8, //点尺寸color: Cesium.Color.RED, //点颜色},});}
};
//11、将飞行点位连接起来，并创建飞行移动实体
const createFlyLine = () => {const length = filghtData.length;const timeStepInSeconds = 30; //雷达样本间隔const totalSeconds = timeStepInSeconds * (length - 1); //飞行的持续时间const start = Cesium.JulianDate.fromIso8601("2022-12-17T23:10:00Z"); //飞行开始时间const stop = Cesium.JulianDate.addSeconds(start,totalSeconds,new Cesium.JulianDate()); //通过计算获得飞行结束时间viewer.clock.startTime = start; //开始时间viewer.clock.stopTime = stop; //停止时间viewer.clock.currentTime = start; //当前时间viewer.timeline.zoomTo(start, stop); //将视图设置为提供的时间。viewer.clock.multiplier = 50; //加快播放速度viewer.clock.shouldAnimate = true; //时针向前走//创建采样位置属性实例const positionProperty = new Cesium.SampledPositionProperty();for (let i = 0; i < length; i++) {const dataPoint = filghtData[i];const time = Cesium.JulianDate.addSeconds(start,i * timeStepInSeconds,new Cesium.JulianDate());const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude,dataPoint.latitude,dataPoint.height);positionProperty.addSample(time, position); //调用addSample方法将样本实例添加进去}//添加飞机模型// const airPlaneUri = Cesium.IonResource.fromAssetId(1980066).then((a)=>{return a});// console.log(airPlaneUri);const airPlaneEntity = viewer.entities.add({//创建时间间隔集合availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop }), //创建时间间隔]),position: positionProperty,//添加飞机模型model: {uri: "../public/GLB/Cesium_Air.glb",minimumPixelSize: 128,maximumScale: 20000,},orientation: new Cesium.VelocityOrientationProperty(positionProperty), //设置方向与采样属性一致path: new Cesium.PathGraphics({ width: 3 }), //路径图形，并宽度为3});viewer.trackedEntity = airPlaneEntity; //视角跟随飞机实体
};
//12、添加三维建筑
const loadOSMBuildings = async () => {viewer.scene.primitives.add(await Cesium.Cesium3DTileset.fromIonAssetId(96188, {show: true,}));
};
//13、添加地形
const addTerrainProvider = async () => {viewer.terrainProvider =await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",{token:"KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..",});
};
</script>
<style>
html,
body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
*,
#app {margin: 0;padding: 0;
}
#view_container {width: 100vw;height: 100vh;
}
</style>

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

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

相关文章

彻底搞懂CPU特权级

彻底搞懂CPU特权级

程序员在用户程序开发过程中,会遇到两个基本概念即用户态和内核态&#xff0c;我们所说的模式切换&#xff0c;就是用户态和内核态之间的切换。 用户态和内核态其实是CPU的特权级&#xff0c;所以模式的切换就是CPU特权级的切换&#xff0c;模式等同于特权级&#xff0c;不同的…
阅读更多...
Cesium 问题：[Violation]‘requestAnimationFrame‘ handler took 58ms

Cesium 问题：[Violation]‘requestAnimationFrame‘ handler took 58ms

文章目录 问题分析解决问题 Cesium 在引入页面后，控制台弹出提示信息： [Violation]requestAnimationFrame handler took 58ms分析 这个警告信息表明使用 requestAnimationFrame 方法时，其处理函数执行所需的时间超过了一定阈值，从而触发了警告。requestAnimationFrame 方…
阅读更多...
Java+SpringBoot：制造企业质量管理的双引擎

Java+SpringBoot：制造企业质量管理的双引擎

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…
阅读更多...
mysql高可用架构设计

mysql高可用架构设计

一、主从架构 主从架构一般如下所示 这里从节点一般设置成只读&#xff08;readonly&#xff09;模式。这样做&#xff0c;有以下几个考虑&#xff1a; 有时候一些运营类的查询语句会被放到备库上去查&#xff0c;设置为只读可以防止误操作&#xff1b; 防止切换逻辑有 bug&a…
阅读更多...
Linux——进程池

Linux——进程池

Linux——进程池 池化技术进程池信道模拟任务进程退出一个bug 今天我们来学习一下管道的应用——进程池。如果有没看过上一篇管道的小伙伴可以点击这里&#xff1a; https://blog.csdn.net/qq_67693066/article/details/136371517 池化技术 我们首先要了解一下池化技术&#x…
阅读更多...
StarRocks实战——特来电StarRocks应用实践

StarRocks实战——特来电StarRocks应用实践

目录 一、为何引入StarRocks 二、主要应用场景 三、封装或扩展 四、集群监控预警 五、总结规划展望 5.1 使用经验分享 5.2 下一步计划 5.2.1 StarRocks集群自动安装 5.2.2 StarRocks集群高可用架构 原文大佬的这篇StarRocks应用实践有借鉴意义&#xff0c;这里摘抄下来…
阅读更多...
Socket网络编程(三)——TCP快速入门

Socket网络编程(三)——TCP快速入门

目录 概述TCP连接可靠性1. 三次握手过程2. 四次挥手过程3. 为什么挥手需要四次&#xff1f; 传输可靠性TCP核心APITCP传输初始化配置&建立连接客户端创建Socket建立连接服务端创建ServerSocket监听连接ServerSocket 和 Socket的关系 Socket基本数据类型传输客户端数据传输服…
阅读更多...
AI芯片行业深度：发展现状、竞争格局、市场空间及相关公司深度梳理

AI芯片行业深度：发展现状、竞争格局、市场空间及相关公司深度梳理

从广义上讲只要能够运行人工智能算法的芯片都叫作AI芯片&#xff0c;但通常意义上的AI芯片指的是针对人工智能算法做了特殊加速设计的芯片。AI芯片也被称为AI加速器或计算卡&#xff0c;即专门用于处理人工智能应用中的大量计算任务的模块&#xff08;其他非计算任务仍由CPU负责…
阅读更多...
ACwing :1221 四平方和 （二分）

ACwing :1221 四平方和 （二分）

*#include <iostream> #include <cstring> #include <algorithm>using namespace std; const int N 5e6 10; int n;struct sum{int s,c,d;bool operator < (const sum &T)const{ // 重载小于符号if(s ! T.s) return s < T.s;if(c ! T.c) …
阅读更多...
day11_oop_fianl_satic_多态

day11_oop_fianl_satic_多态

今日内容 零、 复习昨日 一、final 二、static 三、多态 四、向上转型&向下转型 五、多态应用 零、 复习昨日 0 类封装步骤 属性私有private提供setget方法 1 继承关键词,继承的好处 extends减少代码重复为多态做准备 2 子类可以使用父类什么 非私有的属性和方法 3 方法重写…
阅读更多...
总结：直径测量的发展历程！在线测径仪已成主要方式！

总结：直径测量的发展历程！在线测径仪已成主要方式！

测量在生活、生产和科学探究中扮演着至关重要的角色。从古至今&#xff0c;人们对测量的探索从未停止。而外径作为一种基础的几何尺寸&#xff0c;其测量也经过了多代发展&#xff0c;直到至今被广泛应用到工业生产中的在线测径仪。本文就来介绍一下外径测量的发展历程&#xf…
阅读更多...
【pyinstaller打包记录】Linux系统打包可执行文件后，onnxruntime报警告(Init provider bridge failed)

【pyinstaller打包记录】Linux系统打包可执行文件后，onnxruntime报警告(Init provider bridge failed)

简介 PyInstaller 是一个用于将 Python 程序打包成可执行文件&#xff08;可执行程序&#xff09;的工具。它能够将 Python 代码和其相关的依赖项&#xff08;包括 Python 解释器、依赖的模块、库文件等&#xff09;打包成一个独立的可执行文件&#xff0c;方便在不同环境中运行…
阅读更多...
【Sql Server】存储过程的创建和使用事务，常见运用场景，以及目前现状

【Sql Server】存储过程的创建和使用事务，常见运用场景，以及目前现状

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…
阅读更多...
浅析扩散模型与图像生成【应用篇】(五)——SDEdit

浅析扩散模型与图像生成【应用篇】(五)——SDEdit

5. SDEdit: Guided Image Synthesis and Editing With Stochastic Differential Equations 该文提出一种基于SDE扩散模型的引导图像生成和编辑方法。通过使用者在原图上给出一些引导&#xff0c;比如在图像上涂鸦或者增加一个图块&#xff0c;甚至可以不给定原图&#xff0c;直…
阅读更多...
如何从 WordPress 中的静态资源中删除查询字符串

如何从 WordPress 中的静态资源中删除查询字符串

今天有一个客户来问询&#xff0c;hostease主机创建的WordPress站点&#xff0c;在GTMetrix或Pingdom进行网站速度测试&#xff0c;看到有关查询字符串的警告。如果不想看到查询字符串的警告&#xff0c;要如何处理呢?我们测试&#xff0c;可以通过一些处理满足这个需求。我们…
阅读更多...
三整数排序问题的解题逻辑

三整数排序问题的解题逻辑

【题目描述】 输入3个整数&#xff0c;从小到大排序后输出。 【样例输入】 20 7 33 【样例输出】 7 20 33 【解析】 本题解法大概有3种&#xff1a; 1、穷举条件法。 此方法先判断a、b、c大小的所有可能&#xff0c;再根据各种可能性输出不同的排序。 思路是先判断a、…
阅读更多...
C++17中的类模板参数推导

C++17中的类模板参数推导

在C17之前&#xff0c;必须明确指出类模板的所有参数。自从C17起必须指明类模板参数的限制被放宽了。通过使用类模板参数推导(Class Template Argument Deduction(CTAD))&#xff0c;只要编译器能根据初始值推导出所有模板参数&#xff0c;那么就可以不指明参数。 C17中的类模板…
阅读更多...
记录一次排查负载均衡不能创建的排查过程

记录一次排查负载均衡不能创建的排查过程

故障现象&#xff0c;某云上&#xff0c;运维同事在创建负载均衡的时候&#xff0c;发现可以创建资源&#xff0c;但是创建完之后&#xff0c;不显示对应的负载均衡。 创建负载均衡时候&#xff0c;按f12发现console有如下报错 后来请后端网络同事排查日志发现&#xff0c;是后…
阅读更多...
中科大计网学习记录笔记（十七）：拥塞控制原理 | TCP 拥塞控制

中科大计网学习记录笔记（十七）：拥塞控制原理 | TCP 拥塞控制

前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面的部分发现信…
阅读更多...
论文学习—Model-based Adversarial Meta-Reinforcement Learning

论文学习—Model-based Adversarial Meta-Reinforcement Learning

Model-based Adversarial Meta-Reinforcement Learning Abstract1. Introduction2. Related work3 Preliminaries基于模型的强化学习&#xff08;MBRL&#xff09;:区别和联系&#xff1a; 4 Model-based Adversarial Meta-Reinforcement Learning4.1 Formulation 4.2 Computin…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023