cesium-测量高度垂直距离

cesium做垂直测量

完整代码

<template><div id="cesiumContainer" style="height: 100vh;"></div><div id="toolbar" style="position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-item>量测</el-breadcrumb-item><el-breadcrumb-item>垂直距离</el-breadcrumb-item></el-breadcrumb><el-row class="mb-4" style="margin-top: 15px"><el-button type="primary" @click="handleDrawPolyline">画线</el-button><el-button type="primary" @click="handleDrawPolylineCancel">清除</el-button></el-row></div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesiumHide.js";
import DrawVerticalDistance from "@/assets/utils/measure/DrawVerticalDistance.js";let viewer = null;
let verticalDistance = null;onMounted(() => {let initCesium = new InitCesium('cesiumContainer')viewer = initCesium.initViewer({});verticalDistance = new DrawVerticalDistance(viewer);flyToRight2();
})const handleDrawPolyline = () => {if (verticalDistance) {// 开始量算verticalDistance.start();}
}const handleDrawPolylineCancel = () => {if (!verticalDistance) return;verticalDistance.destroy();
}const flyToRight2 = async () => {let tileset = await Cesium.Cesium3DTileset.fromUrl('/src/assets/tileset/12/tileset.json', {});update3dtilesMaxtrix(tileset);viewer.scene.primitives.add(tileset);viewer.flyTo(tileset);
}function update3dtilesMaxtrix(tileSet) {//调整参数let params = {tx: 113.06265738392063, //模型中心X轴坐标（经度，单位：十进制度）ty: 22.646803971034342, //模型中心Y轴坐标（纬度，单位：十进制度）tz: 40, //模型中心Z轴坐标（高程，单位：米）rx: 0, //X轴（经度）方向旋转角度（单位：度）ry: 0, //Y轴（纬度）方向旋转角度（单位：度）rz: 2, //Z轴（高程）方向旋转角度（单位：度）scale: 1.3, //缩放比例};//旋转const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));const rotationX = Cesium.Matrix4.fromRotationTranslation(mx);const rotationY = Cesium.Matrix4.fromRotationTranslation(my);const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);//平移const position = Cesium.Cartesian3.fromDegrees(params.tx,params.ty,params.tz);const m = Cesium.Transforms.eastNorthUpToFixedFrame(position);//旋转、平移矩阵相乘Cesium.Matrix4.multiply(m, rotationX, m);Cesium.Matrix4.multiply(m, rotationY, m);Cesium.Matrix4.multiply(m, rotationZ, m);//比例缩放const scale = Cesium.Matrix4.fromUniformScale(params.scale);Cesium.Matrix4.multiply(m, scale, m);// console.log("矩阵m:", m);//赋值给tilesettileSet._root.transform = m;
}
</script>
<style scoped>
#cesiumContainer {overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner {color: #ffffff !important;
}
</style>
InitCesiumHide
import * as Cesium from "cesium";class InitCesiumHide {constructor(cesiumContainer, options) {this.cesiumContainer = cesiumContainer;}initViewer(options) {Cesium.Ion.defaultAccessToken = 'token';// 西南东北，默认显示中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);return new Cesium.Viewer(this.cesiumContainer, {animation: false, // 隐藏动画控件baseLayerPicker: false, // 隐藏图层选择控件fullscreenButton: false, // 隐藏全屏按钮vrButton: false, // 隐藏VR按钮，默认falsegeocoder: false, // 隐藏地名查找控件  地理编码homeButton: false, // 隐藏Home按钮infoBox: false, // 隐藏点击要素之后显示的信息窗口sceneModePicker: false, // 隐藏场景模式选择控件selectionIndicator: false, // 显示实体对象选择框，默认truetimeline: false, // 隐藏时间线控件navigationHelpButton: false, // 隐藏帮助按钮scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存shouldAnimate: true, // 开启动画自动播放sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率...options});}
}export default InitCesiumHide
DrawVerticalDistance
import BaseMeasure from "./baseMeasure";
import '../prompt/prompt.css'
import Prompt from '../prompt/prompt.js'
import * as Cesium from "cesium";/*** 三角测量类* @class* @augments BaseMeasure* @alias BaseMeasure.MeasureTriangle*/
class DrawVerticalDistance extends BaseMeasure {constructor(viewer, opt) {super(viewer, opt);if (!opt) opt = {};this.unitType = "length";this.style = opt.style || {};//线this.heightfloatLabel = null;this.spaceDistancefloatLabel = null;this.horizonDistancefloatLabel = null;this.heightLine = null;this.spaceLine = null;this.horizonLine = null;this.firstPosition = null;this.endPosition = null;this.midPosition = undefined;this.lowPosition = undefined;this.highPosition = undefined;}//开始测量start(callback) {if (!this.prompt && this.promptStyle.show) {this.prompt = new Prompt(this.viewer, this.promptStyle)}var that = this;this.state = 1;that.handler.setInputAction((evt) => { //单击开始绘制var cartesian = that.getCatesian3FromPX(evt.position, that.viewer);if (!cartesian) return;if (!that.firstPosition) {that.firstPosition = cartesian.clone();that.heightfloatLabel = that.createLabel(cartesian, "");that.spaceDistancefloatLabel = that.createLabel(cartesian, "", 10);that.horizonDistancefloatLabel = that.createLabel(cartesian, "");let point = that.createPoint(cartesian.clone());point.wz = 0;that.controlPoints.push(point);} else {that.endPosition = cartesian;that.computerPosition(that.firstPosition, that.endPosition);let point = that.createPoint(cartesian.clone());point.wz = 1;that.controlPoints.push(point);if (that.handler) {that.handler.destroy();that.handler = null;}if (that.prompt) {that.prompt.destroy();that.prompt = null;}that.state = "endCreate";if (callback) callback();}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);this.handler.setInputAction(function (evt) {that.state = "creating";if (!that.firstPosition) {that.prompt.update(evt.endPosition, "左键点击确定起点，再次点击确定终点并结束");return;}that.prompt.update(evt.endPosition, "左键点击确定起点，再次点击确定终点并结束");var cartesian = that.getCatesian3FromPX(evt.endPosition, that.viewer);if (!cartesian) return;that.endPosition = cartesian;that.computerPosition(that.firstPosition, that.endPosition);if (that.firstPosition && that.endPosition && !that.heightLine) {that.heightLine = that.viewer.entities.add({polyline: {positions: new Cesium.CallbackProperty(function () {return [that.lowPosition, that.midPosition]}, false),show: true,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.GOLD,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,}),width: 3,}});that.heightLine.objId = that.objId;that.horizonLine = that.viewer.entities.add({polyline: {positions: new Cesium.CallbackProperty(function () {return [that.highPosition, that.midPosition]}, false),show: true,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.GOLD,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,}),width: 3,}});that.horizonLine.objId = that.objId;}if (that.heightLine) that.createLabels();}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);}//计算正上方的点computerPosition(p1, p2) {const cartographic1 = Cesium.Cartographic.fromCartesian(p1.clone());const cartographic2 = Cesium.Cartographic.fromCartesian(p2.clone());if (cartographic1.height > cartographic2.height) {this.highPosition = p1.clone();this.lowPosition = p2.clone();this.midPosition = Cesium.Cartesian3.fromRadians(cartographic2.longitude, cartographic2.latitude, cartographic1.height);} else {this.lowPosition = p1.clone();this.highPosition = p2.clone();this.midPosition = Cesium.Cartesian3.fromRadians(cartographic1.longitude, cartographic1.latitude, cartographic2.height);}}startEdit(callback) {if (!(this.state == "endCrerate" || this.state == "endEdit")) return;this.state = "startEdit";if (!this.modifyHandler) this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);let that = this;for (let i = 0; i < that.controlPoints.length; i++) {let point = that.controlPoints[i];if (point) point.show = true;}this.modifyHandler.setInputAction(function (evt) {let pick = that.viewer.scene.pick(evt.position);if (Cesium.defined(pick) && pick.id) {if (!pick.id.objId)that.modifyPoint = pick.id;that.forbidDrawWorld(true);}}, Cesium.ScreenSpaceEventType.LEFT_DOWN);this.modifyHandler.setInputAction(function (evt) {if (!that.modifyPoint) return;let cartesian = that.getCatesian3FromPX(evt.endPosition, that.viewer);if (!cartesian) return;that.modifyPoint.position.setValue(cartesian.clone());if (that.modifyPoint.wz == 0) {that.firstPosition = cartesian.clone()} else {that.endPosition = cartesian.clone()}that.computerPosition(that.firstPosition, that.endPosition);that.createLabels();}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);this.modifyHandler.setInputAction(function (evt) {if (!that.modifyPoint) return;that.modifyPoint = null;that.forbidDrawWorld(false);that.state = "endEdit";if (callback) callback();}, Cesium.ScreenSpaceEventType.LEFT_UP);}endEdit() {let that = this;this.state = "endEdit";if (this.modifyHandler) {this.modifyHandler.destroy();this.modifyHandler = null;}for (let i = 0; i < that.controlPoints.length; i++) {let point = that.controlPoints[i];if (point) point.show = false;}}createLabels() {let that = this;//高度差var height = Math.abs(Cesium.Cartographic.fromCartesian(that.highPosition).height - Cesium.Cartographic.fromCartesian(that.lowPosition).height);var height_mid = Cesium.Cartesian3.midpoint(that.lowPosition, that.midPosition, new Cesium.Cartesian3());that.heightfloatLabel.show = true;that.heightfloatLabel.position.setValue(height_mid);let text1 = that.formateLength(height, that.unit);that.heightfloatLabel.label.text = "垂直距离：" + text1;that.heightfloatLabel.length = height;}claer() {this.destroy();}//清除测量结果destroy() {this.state = "no";let that = this;if (that.heightLine) {that.viewer.entities.remove(that.heightLine);that.heightLine = null;}// if (this.spaceLine) {// 	this.viewer.entities.remove(this.spaceLine);// 	this.spaceLine = null;// }if (that.horizonLine) {that.viewer.entities.remove(that.horizonLine);that.horizonLine = null;}if (that.heightfloatLabel) {that.viewer.entities.remove(that.heightfloatLabel);that.heightfloatLabel = null;}that.heightfloatLabel = null;if (this.spaceDistancefloatLabel) {this.viewer.entities.remove(this.spaceDistancefloatLabel);this.spaceDistancefloatLabel = null;}that.spaceDistancefloatLabel = null;if (that.horizonDistancefloatLabel) {that.viewer.entities.remove(that.horizonDistancefloatLabel);that.horizonDistancefloatLabel = null;}that.horizonDistancefloatLabel = null;if (that.prompt) {that.prompt.destroy();that.prompt = null;}if (that.handler) {that.handler.destroy();that.handler = null;}}setUnit(unit) {if (this.heightfloatLabel) {let text1 = this.formateLength(this.heightfloatLabel.length, unit);this.heightfloatLabel.label.text = "垂直距离：" + text1;}this.unit = unit;}
}export default DrawVerticalDistance;

效果图

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

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

相关文章

【51单片机】直流电机实验和步进电机实验

【51单片机】直流电机实验和步进电机实验

目录 直流电机实验直流电机介绍ULN2003 芯片介绍硬件设计软件设计实验现象 步进电机实验步进电机简介步进电机的工作原理步进电机极性区分双极性步进电机驱动原理单极性步进电机驱动原理细分驱动原理 28BYJ-48 步进电机简介软件设计 橙色 直流电机实验 在未学习 PWM 之前&…
阅读更多...
智慧城市：打造低碳未来，引领城市数字化转型新篇章

智慧城市：打造低碳未来，引领城市数字化转型新篇章

在“万物皆可数字化”的新时代浪潮下&#xff0c;智慧城市作为未来城市发展的先锋方向&#xff0c;正在以前所未有的速度和规模重塑我们的城市面貌。 智慧城市不仅是一个技术革新的标志&#xff0c;更是城市治理、民生服务等领域全面升级的重要引擎。 一、智慧城市的多元应用领…
阅读更多...
玩家笔记：幻兽帕鲁搭建服务器开服教程

玩家笔记：幻兽帕鲁搭建服务器开服教程

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…
阅读更多...
高频一体式读写器现场应用

高频一体式读写器现场应用

一体式读写器将所有组件集成在一个设备内&#xff0c;具有设计紧凑、安装简单、一体读写的特点&#xff0c;可在生产、仓库等领域中应用。高频一体式读写器现场应用 一体式读写器可以在在工业生产线上应用&#xff0c;读取产线设备的各种信息并记录&#xff0c;实现自动化控制和…
阅读更多...
从零开始 TensorRT（4）命令行工具篇：trtexec 基本功能

从零开始 TensorRT（4）命令行工具篇：trtexec 基本功能

前言 学习资料&#xff1a; TensorRT 源码示例 B站视频&#xff1a;TensorRT 教程 | 基于 8.6.1 版本 视频配套代码 cookbook 参考源码&#xff1a;cookbook → 07-Tool → trtexec 官方文档&#xff1a;trtexec 在 TensorRT 的安装目录 xxx/TensorRT-8.6.1.6/bin 下有命令行…
阅读更多...
kubectl命令

kubectl命令

kubenetes部署服务的流程 以部署一个nginx服务来说明kubernetes系统各个组件调用关系&#xff1a; 1. 首先要明确&#xff0c;一旦kubernetes环境启动之后&#xff0c;master和node都会将自身的信息存储到etcd数据库中 2. 一个nginx服务的安装请求会首先被发送到master节点的ap…
阅读更多...
C++ dfs 与图有关的知识（四十七）【第七篇】

C++ dfs 与图有关的知识（四十七）【第七篇】

今天我们接着来学习树上搜索&#xff08;dfs深度优先搜索&#xff09; 1.树的深度与子树大小 树的深度&#xff1a;规定根结点是树的第一层&#xff0c;树根的孩子结点是树的第二层&#xff0c;以此类推&#xff0c;树的深度就是结点的最大层数。 根据定义&#xff0c;如果我们…
阅读更多...
c语言实现greedy snake（贪吃蛇）

c语言实现greedy snake（贪吃蛇）

##第一个小项目 大一学生寒假项目 最终实现效果如图 一.以C语言实现个人小项目 在我们快速学完了一个高级编程语言&#xff0c;就应该写一个小项目来加以巩固自己的学习成果。 所以今天&#xff0c;我们来尝试写一写greedy snake&#xff0c;对于大学生来说也是可以加强能…
阅读更多...
Gateway API 实践之（七）FSM Gateway 的负载均衡算法

Gateway API 实践之（七）FSM Gateway 的负载均衡算法

FSM Gateway 流量管理策略系列&#xff1a; 故障注入黑白名单访问控制限速重试会话保持健康检查负载均衡算法TLS 上游双向 TLS 在微服务和 API 网关架构中&#xff0c;负载均衡是至关重要的&#xff0c;它确保每个服务实例都能平均地处理请求&#xff0c;同时也为高可用性和故…
阅读更多...
python 基础知识点（蓝桥杯python科目个人复习计划34）

python 基础知识点（蓝桥杯python科目个人复习计划34）

今日复习内容&#xff1a;以做题为主 例题1&#xff1a;Alice 和 Bob的爱恨情仇 题目描述&#xff1a; Alice和Bob最近正在学习博弈论&#xff0c;为了学以致用&#xff0c;他们找来了一大堆的小饼干 &#xff0c;并通过博弈的方式来吃掉这些小饼干。他们轮流对这些饼干进行…
阅读更多...
随机森林超参数的网格优化（机器学习的精华--调参）

随机森林超参数的网格优化（机器学习的精华--调参）

随机森林超参数的网格优化&#xff08;机器学习的精华–调参&#xff09; 随机森林各个参数对算法的影响 影响力参数⭐⭐⭐⭐⭐几乎总是具有巨大影响力n_estimators&#xff08;整体学习能力&#xff09;max_depth&#xff08;粗剪枝&#xff09;max_features&#xff08;随机…
阅读更多...
ASP.NET Core 预防开放式重定向攻击

ASP.NET Core 预防开放式重定向攻击

写在前面 为预防钓鱼网站的常用套路&#xff0c;在进行 Web 应用程序的开发时&#xff0c;原则上应该将所有由用户提交的数据视为不可信。如果应用程序中包含了基于 URL 内容重定向的功能&#xff0c;需要确保这种类型的重定向操作只能在应用本地完成&#xff0c;或者明确判断…
阅读更多...
[技术杂谈]如何下载vscode历史版本

[技术杂谈]如何下载vscode历史版本

网站模板&#xff1a; https://code.visualstudio.com/updates/v1_85 如果你想下载1.84系列可以访问https://code.visualstudio.com/updates/v1_84​​​​​​ 然后看到&#xff1a; 选择对应版本下载即可&#xff0c;我是windows x64系统选择x64即可开始下载
阅读更多...
MQTT在linux下服务端和客户端的应用

MQTT在linux下服务端和客户端的应用

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级、开放标准的消息传输协议&#xff0c;设计用于受限设备和低带宽、不稳定网络的通信。 MQTT的一些关键特点和概念&#xff1a; 发布/订阅模型&#xff1a; MQTT采用发布/订阅&#xff08;Publ…
阅读更多...
QCustomplot实现灰度曲线图

QCustomplot实现灰度曲线图

从 QCustomplot官网 https://www.qcustomplot.com/index.php/download 下载支持文件。首页有些demo可以进行参考学习。 新建一个Qt工程&#xff0c;将下载得到的qcustomplot.h和qcustomplot.cpp文件加入到当前工程。pro文件中加上 printsupport 在ui界面中&#xff0c;添加一…
阅读更多...
云服务器总结

云服务器总结

1.服务器重装系后远程连接报错 Host key for xxx.xxx.xxx.xxx has changed and you have requested strict checking. 问题原因 ssh会把你每个你访问过计算机的公钥(public key)都记录在~/.ssh/known_hosts。当下次访问相同计算机时&#xff0c;OpenSSH会核对公钥。如果公钥不…
阅读更多...
【Linux】信号-上

【Linux】信号-上

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 目录 &#x1f449;&#x1f3fb;信号的概念与产生jobs命令普通信号和实…
阅读更多...
BridgeTower：融合视觉和文本信息的多层语义信息，主打复杂视觉-语言任务

BridgeTower：融合视觉和文本信息的多层语义信息，主打复杂视觉-语言任务

BridgeTower 核心思想子问题1&#xff1a;双塔架构的局限性子问题2&#xff1a;不同层次的语义信息未被充分利用子问题3&#xff1a;模型扩展性和泛化能力 核心思想 论文&#xff1a;https://arxiv.org/pdf/2206.08657.pdf 代码&#xff1a;https://github.com/microsoft/Bri…
阅读更多...
基于Java SSM框架实现网上租车系统项目【项目源码+论文说明】计算机毕业设计

基于Java SSM框架实现网上租车系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现网上租车系统演示 摘要 随着现在网络的快速发展&#xff0c;网上管理系统也逐渐快速发展起来&#xff0c;网上管理模式很快融入到了许多商家的之中&#xff0c;随之就产生了“网上租车系统”&#xff0c;这样就让网上租车系统更加方便简单。 对于本网上…
阅读更多...
JAVA Web 学习（五）Nginx、RPC、JWT

JAVA Web 学习（五）Nginx、RPC、JWT

十二、反向代理服务器——Nginx 支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&#xff0c;即使运行几个月也不需要重新启动&#xff0c;还能在不间断服务的情况下对软件版本进行热更新。性能是 Nginx 最重要的考量&#xff0c;其占用内存少、并发能力强、能支持…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023