vue3 cesium Build a Flight Tracker（构建航班跟踪器）

<template><div id="cesiumContainer"></div>
</template><script>// import * as Cesium from 'cesium/Cesium'let Cesium = require('cesium/Cesium');export default {name: "AirCesium",methods:{loadmap() {//添加默认access tokenCesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZjlhMzkyMS00NDA5LTQ0NjgtOWY1Zi0xMTY1OGU0YWY1M2EiLCJpZCI6MTU5MzYzLCJpYXQiOjE2OTE1NjY1NDh9.EDUo2Z9IaKanf5bx_8MgeDr4nQE-xMm1AavKw_7JiEA';// 创建观察器，并附加到id为“cesiumContainer”的div上const viewer = new Cesium.Viewer('cesiumContainer', {// 增加Cesium世界地形数据terrainProvider: Cesium.createWorldTerrain(),});// 将osm建筑物的3D瓦片数据添加进观察器中viewer.scene.primitives.add(Cesium.createOsmBuildings());// //通过经纬度,高度 设置初始界面位置// 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),//     }// });// 隐藏 底部水印viewer.cesiumWidget.creditContainer.style.display = "none";//从飞机身上收集到的雷达坐标.用经纬度和高度来描述飞机在哪const flightData = JSON.parse('官网去复制https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/');/* 初始化取景器计时器* 设所有雷达坐标的间隔均为30s，以此计算总的航班持续时间* 算出航班的开始时间和结束时间，其中开始时间为已知的航班出发时间，结束时间是开始时间和总持续时间的总和* 通过将航班的开始和结束时间设置为起点和终点来初始化取景器的计时器* 同时将取景器的当前时间设置为计时器开始时间 *///时间间隔30sconst timeStepInSeconds = 30;//总的时间=时间间隔*（雷达点数-1）const totalSeconds = timeStepInSeconds * (flightData.length - 1);//开始时间 使用根据国际标准ISO8601时间转换的儒略历时间const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");//结束时间=开始时间+总的时间const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate());// 生成开始时间的副本，并令其为取景器计时器的起点viewer.clock.startTime = start.clone();viewer.clock.stopTime = stop.clone();//令取景器的当前时间为开始时间viewer.clock.currentTime = start.clone();//用开始时间和结束时间设置取景器的时间线viewer.timeline.zoomTo(start, stop);// 将播放速度设置为50倍viewer.clock.multiplier = 50;// Start playing the scene.允许加速播放viewer.clock.shouldAnimate = true;//取样位置 相当于一个集合const positionProperty = new Cesium.SampledPositionProperty();//为每个雷达坐标建立对应时间和位置信息的实体点for (let i = 0; i < flightData.length; i++) {const dataPoint = flightData[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);//添加实体点viewer.entities.add({description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,position: position,point: { pixelSize: 10, color: Cesium.Color.GREEN }});}async function loadModel() {// 添加飞机模型路径const airplaneUri='/Cesium_Air.glb'//使用本地的资源//const airplaneUri = await Cesium.IonResource.fromAssetId(2134306);//网不好的话就不容易拿到在线资源//将飞机模型添加到轨迹上const airplaneEntity = viewer.entities.add({//和时间轴关联availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: start, stop: stop }) ]),//设置位置position: positionProperty,//模型数据model: { uri: airplaneUri },//  根据所提供的速度计算模型朝向orientation: new Cesium.VelocityOrientationProperty(positionProperty),// 飞行路径path: new Cesium.PathGraphics({ width: 3 })});// 令取景器视角固定跟随飞机viewer.trackedEntity = airplaneEntity;}// 上传飞机模型loadModel();}},mounted() {this.loadmap();}}
</script><style scoped>#cesiumContainer{width: 100%;height: 100%;margin: 0;padding: 0;}
</style>

注意：雷达点数据Build a Flight Tracker – Cesium

vue3 cesium Build a Flight Tracker（构建航班跟踪器）相关推荐

地区的json数据_Python 连接开放航空交通数据，轻松构建航班跟踪应用！
作者 | geomatics译者 | 弯月,责编 | 郑丽媛头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 以下为译文: 我喜欢跟踪位置这个主题,因为感觉像是我有第六感 ...
Python 连接开放航空交通数据，轻松构建航班跟踪应用！
作者 | geomatics 译者 | 弯月,责编 | 郑丽媛头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 以下为译文: 我喜欢跟踪位置这个主题,因为感觉像是我有 ...
使用Cesium for Unreal插件构建航班轨迹
使用Cesium for Unreal插件构建航班轨迹 Build a Flight Tracker with Cesium for Unreal 使用航班ADS-B数据创建USplineCompon ...
怎么构建有推送通知的 GitHub 跟踪器，你知道吗
在本文中,您将学习如何构建一个 GitHub 跟踪器,当跟踪的存储库中有新的问题/PR 时,它会通过发送推送通知来通知用户. 如果您选择加入,GitHub 已经通过电子邮件发送通知,但许多研究表明,推 ...
前端框架vue3的node安装及项目构建的4种方法
前端框架vue3的node安装及项目构建的4种方法 C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cnpm install ...
Golang 执行go build -buildmode=plugin命令构建插件出现 can‘t load package错误
Golang 执行go build -buildmode=plugin命令构建插件出现 can't load package错误这是一个很简单的错误,其实就是你要构建成插件的.go文件的路径不对直 ...
【开源项目】Build your own X 构建自己的项目
[开源项目]Build your own X 构建自己的项目简介 Build your own X 是一个精心收集了大量资源的项目指南,可以通过从头开始重新创建我们最喜爱的技术来掌握编程. 项目地址 ...
亚马逊云科技 Build On---基于Serverless 构建创新零售应用
目录活动内容: 结构框架前端后端 Serverless的优势与使用推荐使用心得总结本人有幸参加Amazon Buildon 第三季的线上实验体验活动,继上次揭秘出海爆款新物种背后的黑科技之 ...
mern技术栈好处?_通过构建运动追踪器应用程序来学习MERN堆栈（MERN教程）
mern技术栈好处? The MERN stack is a popular stack of technologies for building a modern single-page appli ...
R构建朴素贝叶斯分类器（Naive Bayes Classifier）
R构建朴素贝叶斯分类器(Naive Bayes Classifier) 目录 R构建朴素贝叶斯分类器(Naive Bayes Classifier) 朴素贝叶斯原理及分类器

vue3 cesium Build a Flight Tracker（构建航班跟踪器）

vue3 cesium Build a Flight Tracker（构建航班跟踪器）相关推荐

最新文章

热门文章