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><s-mousetip v-if="tip.visible">{{ tip.text }}</s-mousetip>
</template>
<script setup>
import {onMounted, ref} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesiumHide.js";
import DrawStraightLineDistance from "@/assets/utils/measure/DrawStraightLineDistance.js";
import SMousetip from '@/view/cesiumDemo/components/s-mousetip.vue'let viewer = null;
let drawStraightLine = null;
let tip = ref({text: '',visible: false
})onMounted(() => {let initCesium = new InitCesium('cesiumContainer')viewer = initCesium.initViewer({});flyToRight2();
})const handleDrawPolyline = () => {tip.value.text = '左键点击确定起点,再次点击确定终点并结束';tip.value.visible = true;drawStraightLine = new DrawStraightLineDistance({Cesium: Cesium, viewer: viewer, callback: handleDrawPolylineEnd});drawStraightLine.startCreate();
}const handleDrawPolylineEnd = (polylineData) => {tip.value.text = '';tip.value.visible = false;
}const handleDrawPolylineCancel = () => {drawStraightLine.clear();
}const flyToRight2 = () => {let camera = viewer.scene.camera;camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(115.2766, 36.5522, 1500.34),});
}
</script>
<style scoped>
#cesiumContainer {overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner {color: #ffffff !important;
}
</style>
DrawStraightLineDistance.js
/* 绘制直线  水平距离 */
class DrawStraightLineDistance {constructor(arg) {this.viewer = arg.viewer;this.Cesium = arg.Cesium;this.callback = arg.callback;this._polyline = null; //活动线this._polylineLast = null; //最后一条线this._positions = [];  //活动点this._entities_point = [];  //脏数据this._entities_md_point = [];  //脏数据this._entities_md1_point = [];  //脏数据this._entities_line = [];  //脏数据this._polylineData = null; //用于构造线数据}//返回最后活动线get line() {return this._polylineLast;}//返回线数据用于加载线getData() {return this._polylineData;}//加载线loadPolyline(data) {let that = this;let polyline = that.viewer.entities.add({polyline: {positions: data,show: true,material: that.Cesium.Color.RED,width: 3,clampToGround: true}});return polyline;}//开始创建startCreate() {let that = this;that.handler = new that.Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);that.handler.setInputAction(function (evt) { //单击开始绘制//屏幕坐标转地形上坐标let cartesian = that.getCatesian3FromPX(evt.position);if (that._positions.length === 0) {that._positions.push(cartesian.clone());}that._positions.push(cartesian);that.createPoint(cartesian);// 绘制点if (that._positions.length > 2) {if (!that._polyline) {return;}that._positions.pop();// that._positions.push(cartesian);that.createPoint(cartesian);// 绘制点that._polylineData = that._positions.concat();that.viewer.entities.remove(that._polyline); //移除that._polyline = null;that._positions = [];let line = that.loadPolyline(that._polylineData); //加载线that._entities_line.push(line);that._polylineLast = line;if (typeof that.callback == "function") {that.callback(that._polylineData);}for (let i = 0; i < that._entities_md1_point.length; i++) {that.viewer.entities.remove(that._entities_md1_point[i]);}let distance = that.Cesium.Cartesian3.distance(that._polylineData[0], that._polylineData[1]).toFixed(2);// let midPoint = that.Cesium.Cartesian3.midpoint(that._polylineData[0], that._polylineData[1]);let midPoint = that.Cesium.BoundingSphere.fromPoints(that._polylineData).centerthat.createMdPoint(midPoint, distance);that.handler.destroy();that.handler = null;}}, that.Cesium.ScreenSpaceEventType.LEFT_CLICK);this.handler.setInputAction(function (evt) { //移动时绘制线if (that._positions.length < 1) return;let cartesian = that.getCatesian3FromPX(evt.endPosition);if (!that.Cesium.defined(that._polyline)) {that._polyline = that.createPolyline();}if (that._polyline) {that._positions.pop();that._positions.push(cartesian);}let distance = that.Cesium.Cartesian3.distance(that._positions[0], that._positions[1]).toFixed(2);// let midPoint = that.Cesium.Cartesian3.midpoint(that._polylineData[0], that._polylineData[1]);let midPoint = that.Cesium.BoundingSphere.fromPoints(that._positions).centerthat.createMdPoint11(midPoint, distance);}, that.Cesium.ScreenSpaceEventType.MOUSE_MOVE);}//创建点createPoint(cartesian) {let that = this;let point = this.viewer.entities.add({position: cartesian,point: {pixelSize: 10,color: that.Cesium.Color.YELLOW,}});that._entities_point.push(point);return point;}//创建点createMdPoint(cartesian, distance) {let that = this;let point = this.viewer.entities.add({position: cartesian,point: {pixelSize: 1,color: that.Cesium.Color.YELLOW,},label: {text: '水平距离:' + distance + '米',    //描述内容font: '14px Sans-Serif',   //字体大小 类型fillColor: that.Cesium.Color.fromCssColorString('#ffffff'),  //颜色outlineColor: that.Cesium.Color.GOLD,//设置背景颜色透明backgroundColor: new that.Cesium.Color(0, 0, 0, 0.7),//打开背景  打开背景 (不会被线段覆盖)showBackground: true,// scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 2000, 0.01),// disableDepthTestDistance: Number.POSITIVE_INFINITY}});that._entities_md_point.push(point);return point;}//创建点createMdPoint11(cartesian, distance) {let that = this;for (let i = 0; i < that._entities_md1_point.length; i++) {that.viewer.entities.remove(that._entities_md1_point[i]);}let point = this.viewer.entities.add({position: cartesian,point: {pixelSize: 1,color: that.Cesium.Color.YELLOW,},label: {text: '水平距离:' + distance + '米',    //描述内容font: '14px Sans-Serif',   //字体大小 类型fillColor: that.Cesium.Color.fromCssColorString('#ffffff'),  //颜色outlineColor: that.Cesium.Color.GOLD,//设置背景颜色透明backgroundColor: new that.Cesium.Color(0, 0, 0, 0.7),//打开背景  打开背景 (不会被线段覆盖)showBackground: true,// scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 2000, 0.01),// disableDepthTestDistance: Number.POSITIVE_INFINITY}});that._entities_md1_point.push(point);return point;}//创建线createPolyline() {let that = this;let polyline = this.viewer.entities.add({polyline: {//使用cesium的peopertypositions: new that.Cesium.CallbackProperty(function () {return that._positions}, false),show: true,material: that.Cesium.Color.RED,width: 3,clampToGround: true}});that._entities_line.push(polyline);return polyline;}//销毁destroy() {if (this.handler) {this.handler.destroy();this.handler = null;}}//清空实体对象clear() {for (let i = 0; i < this._entities_point.length; i++) {this.viewer.entities.remove(this._entities_point[i]);}for (let i = 0; i < this._entities_md_point.length; i++) {this.viewer.entities.remove(this._entities_md_point[i]);}for (let i = 0; i < this._entities_md1_point.length; i++) {this.viewer.entities.remove(this._entities_md1_point[i]);}for (let i = 0; i < this._entities_line.length; i++) {this.viewer.entities.remove(this._entities_line[i]);}this._polyline = null;this._positions = [];this._entities_point = [];  //脏数据this._entities_md_point = [];  //脏数据this._entities_md1_point = [];  //脏数据this._entities_line = [];  //脏数据this._polylineData = null; //用于构造线数据this._polylineLast = null;this.destroy();}getCatesian3FromPX(px) {let cartesian;let ray = this.viewer.camera.getPickRay(px);if (!ray) return null;cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);return cartesian;}
}export default DrawStraightLineDistance

效果图 

InitCesiumHide.js

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

 

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

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

相关文章

Qt实现类似ToDesk顶层窗口 不规则按钮

先看效果&#xff1a; 在进行多进程开发时&#xff0c;可能会遇到需要进行全局弹窗的需求。 因为平时会使用ToDesk进行远程桌面控制&#xff0c;在电脑被控时&#xff0c;ToDesk会在右下角进行一个顶层窗口的提示&#xff0c;效果如下&#xff1a; 其实要实现顶层窗口&#xf…

【ELK】logstash快速入门

1.概述 1.1.什么是logstash&#xff1f; 之前我们聊了es&#xff0c;并且用docker搭建了一个eskibana的环境。es目前最普遍的用法是用来存储日志的&#xff0c;然后结合kibana对日志做一些可视化的工作。既然要收集日志&#xff0c;就面临着一个问题&#xff1a; 各个系统的…

如何保证MySQL和Redis中的数据一致性?

文章目录 前言一、缓存案例1.1 缓存常见用法1.2 缓存不一致产生的原因 二、解决方案2.1 先删除缓存&#xff0c;再更新数据库2.2 先更新数据库&#xff0c;删除缓存2.3 只更新缓存&#xff0c;由缓存自己同步更新数据库2.4 只更新缓存&#xff0c;由缓存自己异步更新数据库2.5 …

ElementUI 组件:Layout布局(el-row、el-col)

ElementUI安装与使用指南 Layout布局 点击下载learnelementuispringboot项目源码 效果图 el-row_el-col.vue页面效果图 项目里el-row_el-col.vue代码 <script> export default {name:el-row_el-col 布局 }</script><template><div class"roo…

C/C++ (stdio.h)标准库详解

cstdio,在C语言中称为stdio.h。该库使用所谓的流与物理设备&#xff08;如键盘、打印机、终端&#xff09;或系统支持的任何其他类型的文件一起操作。 在本文将会通过介绍函数参数&#xff0c;举出实际的简单例子来帮助大家快速上手使用函数。 目录 一、流 二、库函数 1、F…

离线数仓-数据治理

目录 一、前言 1.1 数据治理概念 1.2 数据治理目标 1.3 数据治理要解决的问题 1.3.1 合规性 元数据合规性 数据质量合规性 数据安全合规性 1.3.2 成本 存储资源成本 计算资源成本 二、数据仓库发展阶段 2.1 初始期 2.2 扩张期 2.3 缓慢发展期 2.4 变革期 三、…

LabVIEW电能质量监测系统

LabVIEW电能质量监测系统 随着全球能源需求的增加以及能源危机的加剧&#xff0c;对电能的有效利用和质量监控变得越来越重要。特别是在电力系统中&#xff0c;电能质量的监测对于保证电力设备的稳定运行和提高能源利用效率具有重要意义。采用LabVIEW软件开发了一套高效的电能…

查看自己电脑是arm还是x64(x86);linux操作系统识别

1、查看自己电脑是arm还是x64&#xff08;x86&#xff09; linux 参考&#xff1a; https://liuweiqing.blog.csdn.net/article/details/131783851 uname -a如果输出是 x86_64&#xff0c;那么你的系统是 64 位的 x86 架构&#xff08;通常我们称之为 x64&#xff09;。如果…

MySQL原理(五)事务

一、介绍&#xff1a; 1、介绍&#xff1a; 在计算机术语中&#xff0c;事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit)。事务是恢复和并发控制的基本单位。 2、事务的4大特性 原子性、一致性、隔离性、持久性。这四个属性通常称为ACID特性…

Zoho Projects与Jira:中国市场的理想替代品之争?

在软件开发生命周期中&#xff0c;项目管理一直是一个非常重要的环节。为了更好地协作、追踪项目的进程和管理任务&#xff0c;许多公司选择了Jira这款著名的项目管理工具&#xff0c;它是个非常强大的工具&#xff0c;但是作为一款纯国外产品&#xff0c;他可能不适合中国市场…

性能篇:如何解决高并发下 I/O瓶颈?

大家好,我是小米!今天我们来聊一个在高并发场景下经常遇到的挑战,那就是I/O瓶颈。随着互联网的快速发展,我们的应用在处理海量数据时,I/O操作成为了一个极为关键的环节。那么,问题来了,什么是I/O呢? 什么是I/O I/O(Input/Output)是计算机系统中一个至关重要的概念,…

canvas设置图形各种混合模式,类似photoshop效果

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

dubbo+sentinel最简集成实例

说明 在集成seata后&#xff0c;下面来集成sentinel进行服务链路追踪管理&#xff5e; 背景 sample-front网关服务已配置好 集成 一、启动sentinel.jar 1、官网下载 选择1:在本地启动 nohup java -Dserver.port8082 -Dcsp.sentinel.dashboard.serverlocalhost:8082 -Dp…

QSlider使用笔记

最近做项目使用到QSlider滑动条控件&#xff0c;在使用过的过程中&#xff0c;发现一个问题就是点滑动条上的一个位置&#xff0c;滑块并没有移动到鼠标点击的位置&#xff0c;体验感很差&#xff0c;于是研究了下&#xff0c;让鼠标点击后滑块移动到鼠标点击的位置。 1、event…

记录element-plus树型表格的bug

问题描述 如果数据的子节点命名时children,就没有任何问题&#xff0c;如果后端数据结构子节点是其他名字&#xff0c;比如thisChildList就有bug const tableData [{id: 1,date: 2016-05-02,name: wangxiaohu,address: No. 189, Grove St, Los Angeles,selectedAble: true,th…

2024 IC FPGA 岗位 校招面试记录

引言 各位看到这篇文章时&#xff0c;24届校招招聘已经渐进尾声了。 在这里记录一下自己所有面试&#xff08;除了时间过短或者没啥干货的一些研究所外&#xff0c;如中电55所&#xff08;南京&#xff09;&#xff0c;航天804所&#xff08;上海&#xff09;&#xff09;的经…

【安装指南】maven下载、安装与配置详细教程

&#x1f33c;一、概述 maven功能与python的pip类似。 Apache Maven是一个用于软件项目管理和构建的强大工具。它是基于项目对象模型的&#xff0c;用于描述项目的构建配置和依赖关系。以下是一些关键的 Maven 特性和概念&#xff1a; POM&#xff08;Project Object Model&…

Javaweb之SpringBootWeb案例之 @ConfigurationProperties的详细解析

4.3 ConfigurationProperties 讲解完了yml配置文件之后&#xff0c;最后再来介绍一个注解ConfigurationProperties。在介绍注解之前&#xff0c;我们先来看一个场景&#xff0c;分析下代码当中可能存在的问题&#xff1a; 我们在application.properties或者application.yml中配…

神经网络 | 基于多种神经网络模型的轴承故障检测

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本文主要源自《第二届全国技能大赛智能制造工程技术项目比赛试题&#xff08;样题&#xff09; 模块 E 工业大数据与人工智能应用》&#xff0c;基于给出的已知轴承状态的振动信号样本&#xff0c;对数据进行分析&#xff0c;建…

CMake生成osg的FFMPEG插件及Windows下不生成VS工程问题解决

在Windows下&#xff0c;如何利用CMake生成osg的FFMPEG插件&#xff0c;请参考如下博文&#xff0c;同生成jpeg插件类似&#xff1a; osg第三方插件的编译方法&#xff08;以jpeg插件来讲解&#xff09;。 如下为生成FFMPEG时必要的设置&#xff1a; 注意&#xff1a; 一定要…