cesium 实现三维无人机航拍过程实景效果

需求背景

需要实现一个动态的三维无人机航拍过程实景效果
代码开发中,迭代功能待续...

解决效果

cesium 实现三维无人机航拍过程实景效果

index.vue

<template><div><el-button class="btn" @click="start">开始</el-button></div>
</template><script>
let lineEntity,lineDatasource = new Cesium.CustomDataSource("line-polygun"),wrjModelDatasource = new Cesium.CustomDataSource("wrj"),wrjEntity,wrjLineEntity,curPosition,lineArr =[]export default {data() {return {// 飞行区域边界线坐标coordinates: [[116.069898, 31.303655], [116.098708, 31.322126], [116.108063, 31.311256], [116.079317, 31.292959], [116.069898, 31.303655]],// 飞行路线points: [[116.069898, 31.303655, 200], [116.098708, 31.322126, 200], [116.108063, 31.311256, 200], [116.079317, 31.292959, 200]],// 当前飞行位置curRuningArr_i: 0,curRuningArr: [],}},mounted() {const viewer = window.dasViewer;viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider()viewer.dataSources.add(lineDatasource);viewer.dataSources.add(wrjModelDatasource);this.initwork()},destory() {lineDatasource.entities.removeAll()viewer.dataSources.remove(lineDatasource);wrjModelDatasource.entities.removeAll()viewer.dataSources.remove(wrjModelDatasource);},methods: {initwork() {const viewer = window.dasViewer;const pos = Cesium.Cartesian3.fromDegreesArray(this.coordinates.flat())const entity = lineDatasource.entities.add({polyline: {positions: pos,width: 1.5,material: Cesium.Color.fromCssColorString("#C0C0C0").withAlpha(0.5),// disableDepthTestDistance: Number.POSITIVE_INFINITY, //解决遮挡问题heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,}})viewer.flyTo(entity)this.addModel()},addModel() {const viewer = window.dasViewer;const positions = Cesium.Cartesian3.fromDegreesArrayHeights(this.points.flat())wrjEntity = wrjModelDatasource.entities.add({position: Cesium.Cartesian3.fromDegrees(116.069898, 31.303655, 200),model: {uri: process.env.VUE_APP_MODEL_API + '/wrj.glb',scale: 100,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.CENTER,},})wrjLineEntity = wrjModelDatasource.entities.add({polyline: {positions: positions,width: 1.5,material: Cesium.Color.fromCssColorString("red").withAlpha(1),heightReference: Cesium.HeightReference.NONE,}})// viewer.scene.postRender.addEventListener(()=>{//   wrjLineEntity.polyline.positions = lineArr// });},start() {let runQueue = this.points.map((_, i) => ([this.points[i], this.points[i + 1]]))runQueue.pop()runQueue = runQueue.map(pos => ({pos,startCartesian3: Cesium.Cartesian3.fromDegrees(pos[0][0], pos[0][1], pos[0][2]), // 该路径起始点cartesian3Pos: pos.map(item => Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2])) // 该路径起始点和目标点}))this.runRecursion(0, runQueue)},runRecursion(i, runArr, callback) {const self = thisconst speed = 700 // todo 默认速度为500m/sconst cartesian3Pos = runArr[i].cartesian3PoslineArr = runArr.slice(0, Math.max(1, i + 1)).map(item => item.startCartesian3).flat()self.curRuningArr_i = iself.curRuningArr = runArrself.runFn(cartesian3Pos, lineArr, speed, () => {if (++i < runArr.length) self.runRecursion(i, runArr, callback)})},runFn([startPosition, targetPosition], lineArr, speed, callback) { // [startPosition 初始点位 targetPosition 目标点位] lineArr 路径线点位 speed 速度const subtract = Cesium.Cartesian3.subtract(startPosition, targetPosition, new Cesium.Cartesian3());const meter = Cesium.Cartesian3.magnitude(subtract) // 得出距离多少米const step = meter / speedconst startTime = Cesium.JulianDate.now()curPosition = new Cesium.Cartesian3()wrjEntity.position = new Cesium.CallbackProperty(() => {const elapsedTime = Cesium.JulianDate.secondsDifference(Cesium.JulianDate.now(), startTime);const ratio = elapsedTime / step;if (ratio >= 1.0) {callback()return targetPosition.clone()} else {return Cesium.Cartesian3.lerp(startPosition, targetPosition, ratio, curPosition)}}, false);},}
}
</script><style lang="less" scoped>
.btn {position: fixed;top: 20px;left: 20px;
}
</style>

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

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

相关文章

vue根据文字长短展示跑马灯效果

介绍 为大家介绍一个我编写的vue组件 auto-marquee &#xff0c;他可以根据要展示文本是否超出展示区域&#xff0c;来判断是否使用跑马灯效果&#xff0c;效果图如下所示 假设要展示区域的宽度为500px&#xff0c;当要展示文本的长度小于500px时&#xff0c;只会展示文本&…

如何借助物联网实现农情监测与预警

如何借助物联网实现农情监测与预警&#xff1f; 物联网技术&#xff0c;作为信息技术与传统行业的深度融合产物&#xff0c;正逐步变革着农业生产的管理模式&#xff0c;特别是在农情监测与预警领域展现出巨大潜力。其核心在于通过感知层的各类传感器、通信层的数据传输技术以…

高编:线程

一、pthread 线程 优点&#xff1a; 比多进程节省资源&#xff0c;可以共享变量。 概念&#xff1a; 线程是轻量级进程&#xff0c;一般是一个进程中的多个任务。进程是系统中最小的资源分配单位.线程是系统中最小的执行单位 特征&#xff1a; 1、共享资源 2、效率高 …

qt可点击的QLabel

需求——问题与思路 使用wpf实现一个可点击的超链接label相当简单&#xff08;如下图&#xff09;&#xff0c;但是qt的QLabel不会响应点击事件&#xff0c;那就从QLabel继承一个类&#xff0c;然后在该类中重写mousePressEvent函数&#xff0c;并在该函数中对左键点击事件做响…

AI硬件加速版XVDPU入门

XVDPU是可以提高CNN计算的速度和延迟&#xff0c;他的目标不是直接替换软件在传统硬件或者通用GPU上实现CNN运算。他的目标就是加速CNN计算。 XVDP的实现方式&#xff1a;CNN卷积计算的是 原始图形矩阵{x行*y列*通道数a}*卷积滑块{w行g列t通道}卷积后的图形{m行*n列*通道数b} …

应对SQL注入攻击:保障网站安全的策略

在互联网的广阔天地中&#xff0c;网站安全始终是站长用户和企业开发者不可忽视的重要议题。其中&#xff0c;SQL注入攻击作为一种常见的网络攻击手段&#xff0c;严重威胁着网站的数据安全和业务稳定。什么是SQL注入攻击&#xff0c;我们该如何应对这种攻击呢&#xff1f;今天…

第1篇 什么是区块链?——从零开始的区块链入门指南

在这个信息爆炸的时代&#xff0c;区块链这个词儿已经成了热词儿。那么&#xff0c;区块链到底是啥玩意儿呢&#xff1f;别急&#xff0c;今天咱们就从头开始&#xff0c;给你掰扯掰扯区块链的来龙去脉&#xff0c;让你轻松入门。 一、区块链的定义 想象一下&#xff0c;区块…

T568A与T568B:网络线标准的差异

T568A和T568B是两种常见的网络线标准&#xff0c;用于在以太网中连接计算机和网络设备。它们定义了线缆中各个线对的连接方式&#xff0c;确保了数据 的传输质量和网络的可靠性。本文将详细介绍T568A和T568B之间的区别&#xff0c;并提供相应的源代码作为示例。 1.T568A标准 …

成都欣丰洪泰文化传媒有限公司电商服务的新星力量

在当今这个数字化飞速发展的时代&#xff0c;电商行业如日中天&#xff0c;成为拉动经济增长的新引擎。在这股浪潮中&#xff0c;一家名为成都欣丰洪泰文化传媒有限公司的企业&#xff0c;凭借其专业的电商服务能力和创新的营销策略&#xff0c;成为了众多品牌背后的强大推手。…

怎么保护CAD图纸丨CAD图纸防泄密方法推荐

怎么保护CAD图纸丨CAD图纸防泄密方法推荐 在现代工程设计和建筑行业中&#xff0c;CAD图纸承载着项目的核心信息&#xff0c;是极其重要的知识产权。一旦CAD图纸被盗或泄露&#xff0c;不仅可能导致商业机密的丧失&#xff0c;还可能给公司带来重大经济损失&#xff0c;甚至面…

上海市计算机学会竞赛平台2023年5月月赛丙组区间最大公约数

题目描述 给定两个正整数&#x1d43f;,&#x1d445;L,R&#xff0c;你可以任意选择两个正整数&#x1d465;,&#x1d466;x,y且满足&#x1d43f;≤&#x1d465;<&#x1d466;≤&#x1d445;L≤x<y≤R&#xff0c;并求出&#x1d465;,&#x1d466;x,y的最大公约…

leetcode hot100 第三题:最长连续序列(Java)

给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 解…

AI新功能发布:AI生成数据库和AI规划任务,CoCodeAI再添新成员!

Hi&#xff0c;大家好&#xff0c;好久不见&#xff01; 我是CoCodeAI智能助手CoCo。 CoCodeAI智能助手CoCo 我无比荣幸地为大家揭晓 CoCode开发云的璀璨新星&#xff1a; AI生成数据库AI规划任务。 近日&#xff0c;CoCode开发云旗下Co-Project V3.8智能项目管理平台重磅发…

(笔记)Mac上打开Android模拟器导致声音变了的解决方法

我听歌的时候用Android Studio打开Android模拟器的时候 发现歌曲的声音变了 解决方法&#xff1a; 编辑这个配置文件 /Users/{user_name}/.android/avd/{emulator_name}/config.ini vim ~/.android/avd/Pixel_4a_API_32.avd/config.ini 将里面的hw.audioInputyes改成hw.aud…

MySQL数据库中文乱码处理

出现中文乱码之后处理方式 1、执行下面语句查看一下关于编码方式 show variables like %char%结果展示&#xff1a;【你应该和我的不一样】 2、如果你的和我查询结果不一致请设置成一致语句&#xff0c;根据自己需要复制语句 如下&#xff1a;【除了最后一条记录哈】 SET G…

关于Disruptor监听策略

Disruptor框架提供了多种等待策略&#xff0c;每种策略都有其适用的场景和特点。以下是这些策略的详细介绍及其适用场景&#xff1a; 1. BlockingWaitStrategy 特点&#xff1a; 使用锁和条件变量进行线程间通信&#xff0c;线程在等待时会进入阻塞状态&#xff0c;释放CPU资…

2024 年江西省研究生数学建模竞赛A题:交通信号灯管理问题分析、实现代码及参考论文

2024 年江西省研究生数学建模竞赛题目交通信号灯管理 1 题目 交通信号灯是指挥车辆通行的重要标志&#xff0c;由红灯、绿灯、 黄灯组成。红灯停、绿灯行&#xff0c;而黄灯则起到警示作用。交通 信号灯分为机动车信号灯、非机动车信号灯、人行横道信号 灯、方向指示灯等。 一…

文件扫描件怎么弄?文件扫描就用这5个方法

在快节奏的现代生活中&#xff0c;我们经常需要处理大量纸质文件&#xff0c;因为它们不仅占用空间&#xff0c;还可能因时间的流逝而损坏或丢失。 幸运的是&#xff0c;有了文件扫描软件手机版&#xff0c;我们可以将这些文件轻松转换为PDF格式&#xff0c;既保留了原始布局&…

第五届计算机、大数据与人工智能国际会议(ICCBD+AI 2024)

随着科技的飞速发展&#xff0c;计算机、大数据和人工智能等前沿技术已成为推动社会进步的重要力量。为了加强这一领域的学术交流与合作&#xff0c;促进技术创新与发展&#xff0c;第五届计算机、大数据与人工智能国际会议&#xff08;ICCBDAI 2024&#xff09;将于2024年11月…

Unreal Engine@Jetson Orin Nano尚不支持

Unreal EngineJetson Orin Nano尚不支持 1. 源由2. Unreal Engine介绍3. 问题4. 编译方法5. 补充 1. 源由 最近在看SC-Explorer方面的内容&#xff0c;在模拟方面采用了Unreal Engine。 本打算跑下模拟&#xff0c;因此打算在JetsonOrin的板子上试试看。 2. Unreal Engine介绍…