当前位置: 首页 > news >正文

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>

相关文章:

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

需求背景 需要实现一个动态的三维无人机航拍过程实景效果 代码开发中&#xff0c;迭代功能待续... 解决效果 cesium 实现三维无人机航拍过程实景效果 index.vue <template><div><el-button class"btn" click"start">开始</el-butt…...

Rust:使用 Warp 框架编写基于 HTTPS 的 RESTful API

在 Rust 中使用 Warp 框架编写基于 HTTPS 的 RESTful API&#xff0c;你需要首先设置好 TLS/SSL 证书以启用 HTTPS。以下是一个基本的步骤指南&#xff1a; 步骤 1: 安装 Rust 和 Cargo 确保你已经安装了 Rust 和 Cargo。你可以从 Rust 官网 下载并安装 Rust。 步骤 2: 创建…...

测试开发工程师需要掌握什么技能?

测试开发工程师是软件开发中至关重要的角色之一。他们负责编写、维护和执行自动化测试脚本、开发测试工具和框架&#xff0c;以确保软件的质量和稳定性。为了成为一名优秀的测试开发工程师&#xff0c;你需要掌握以下技能&#xff1a; 1. 编程技能&#xff1a; 作为测试开发工…...

SpelExpressionParser评估SpEL(Spring Expression Language)表达式的解析器

是Spring中用于解析和评估SpEL(Spring Expression Language)表达式的解析器,SpEL是一种强大且灵活的表达式语言,广泛用于Spring框架中,以便在运行时解析和评估表达式 主要功能 1.解析和评估表达式:spelExpressionParser可以解析复杂的表达式,并在运行时对其进行评估; 2.访问…...

C#学习系列之DataGrid无故添加空行

C#学习系列之DataGrid无故添加空行 前言解决前解决后总结 前言 采用别人的轮子&#xff0c;想在基础上改界面&#xff0c;但是copy后&#xff0c;无论怎么样都会有空行&#xff0c;实在是绑定数据的输入没有任何赋值。 解决前 绑定的数据中输入三组数据&#xff0c;但是没有第…...

详解Alibaba Cloud Linux 3.2104 LTS 64位镜像操作系统

Alibaba Cloud Linux 3.2104是阿里云推出的云原生Linux发行版Alibaba Cloud Linux 3版本&#xff0c;64位操作系统&#xff0c;由阿里云提供免费长期维护更新和漏洞修复&#xff0c;镜像Alibaba Cloud Linux 3.2104 LTS 64位操作系统性能很不错&#xff0c;针对ECS云服务器进行…...

springboot异常产生原因

DataIntegrityViolationException Cause: java.sql.SQLException: Field ‘id’ doesn’t have a default value org.springframework.dao.DataIntegrityViolationException: ### Error updating database. Cause: java.sql.SQLException: Field id doesnt have a default …...

Redis 7.x 系列【8】数据类型之哈希(Hash)

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 HSET2.2 HGET2.3 HDEL2.4 HEXISTS2.5 HGETALL2.6 HKEYS2.7 HLE…...

jetson 安装 Rustdesk失败

报错: rustdesk depends on gstreamer1.0-pipewire; however: Package gstreamer1.0-pipewire is not installed. 原因&#xff1a; 对于rustdesk&#xff0c;其1.2.3 版需要gstreamer1.0-pipewire软件包&#xff0c;但是此软件包仅适用于 Ubuntu 22.04、22.10、23.04 和 2…...

Vue原生写全选反选框

效果 场景&#xff1a;Vue全选框在头部&#xff0c;子框在v-for循环内部。 实现&#xff1a;点击全选框&#xff0c;所有子项选中&#xff0c;再次点击取消&#xff1b;子项全选中&#xff0c;全选框自动勾选&#xff0c;子项并未全选&#xff0c;全选框不勾选&#xff1b;已选…...

typescript学习回顾(三)

今天继续来分享ts的相关概念&#xff0c;枚举&#xff0c;ts模块化&#xff0c;接口和类型兼容性 ts的扩展类型&#xff1a;类型别名&#xff0c;枚举&#xff0c;接口和类 枚举 基础概念 枚举通常用于约束某个变量的取值范围。当然字面量和联合类型配合使用&#xff0c;也可…...

算尽天下财,铸就大明梦 —— 大明钱算子夏元吉的传奇一生

仕途生涯开始&#xff1a;洪武二十三年&#xff08;1390年&#xff09;&#xff0c;夏元吉因精通《诗经》&#xff0c;由湖广乡荐参加礼部组织的会试&#xff0c;虽未中举&#xff0c;但他并未气馁&#xff0c;反而更加努力地学习。洪武二十四年&#xff08;1391年&#xff09;…...

openCV3.0 C++ 学习笔记补充(自用 代码+注释)---持续更新 二(51-)

环境&#xff1a;OpenCV3.2.0 VS2015 51、Mean-Shift算法分割图像 cv::pyrMeanShiftFiltering() 参考链接&#xff1a;【从零学习OpenCV 4】分割图像——Mean-Shift分割算法 Mean-Shift算法又被称为均值漂移法&#xff0c;是一种基于颜色空间分布(彩色图像的像素值)的图像分割…...

读AI新生:破解人机共存密码笔记13有益机器

1. 标准模型 1.1. 我们能控制一个从外太空来的超级智能实体的概率几乎为零 1.2. 随着根据标准模型设计的机器变得更加智能&#xff0c;以及它们的行动范围遍及全球&#xff0c;关闭机器这种方法越来越不可行 1.2.1. 机器将会追求它们自己的目标&#xff0c;无论目标错得多么…...

Spring Boot中使用Swagger生成API文档

Spring Boot中使用Swagger生成API文档 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在现代的软件开发中&#xff0c;良好的API文档是团队协作和开发效率不可或…...

解决 macOS 中“无法验证开发者”的问题

解决 macOS 中“无法验证开发者”的问题 在使用 macOS 系统时&#xff0c;你可能会遇到一个常见的问题&#xff1a;当你尝试安装或打开某些应用程序时&#xff0c;系统会弹出一个警告&#xff0c;提示“无法验证开发者”。这通常发生在从非官方 App Store 下载的应用程序上。本…...

Emp.dll文件丢失?理解Emp.dll重要性与处理常见问题

在繁多的动态链接库&#xff08;DLL&#xff09;文件中&#xff0c;emp.dll 可能不是最广为人知的&#xff0c;但在特定软件或环境中&#xff0c;它扮演着关键角色。本文旨在深入探讨 emp.dll 的功能、重要性以及面对常见问题时的解决策略。 什么是 emp.dll&#xff1f; Emp.d…...

知识平台管理系统设计

知识平台管理系统设计是一个综合性的过程&#xff0c;旨在为企业或组织提供一个高效、便捷的知识管理解决方案。以下是知识平台管理系统设计的详细阐述&#xff1a; 一、设计目标和原则 1、设计目标&#xff1a;设计一款功能强大、易于使用、支持多种知识形式分类和搜索的知识管…...

Python 中字符串修饰符

1. 原始字符串 (Raw String) - r 或 R 使用 r 或 R 前缀&#xff0c;可以告诉 Python 字符串中的所有反斜杠都是普通字符&#xff0c;而不是转义字符。这在处理文件路径、正则表达式等情况下非常有用。 path rC:\new_folder\test.txt # 原始字符串2. 格式化字符串 (Formatt…...

红队内网攻防渗透:内网渗透之内网对抗:横向移动篇Kerberos委派安全RBCD资源Operators组成员HTLMRelay结合

红队内网攻防渗透 1. 内网横向移动1.1 横向移动-资源约束委派-利用域用户主机加入1.1.1 利用思路1.1.2 利用条件1.1.3 利用过程1.2 横向移动-资源约束委派-Acount Operators组1.2.1 利用思路:1.2.2 利用条件:1.2.3 利用过程:1.3 横向移动-资源约束委派-CVE结合HTLMRelay1.3.…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...