可视化场景内任意绘制多边形并测量面积

从零开始学习3D可视化之2D界面 在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的,3D“容器”提供了3D和2D的界面展示能力。上篇文章浅析过了3D空间界面,下面我继续学习一下2D界面如何与3D界面连接。ThingJS内置了div2d和div3d元素,创建2D界面时需要将元素插入到 div2d。 创建 UIAnchor UIAnchor可以把 2D html 界面连接到 3D 物体上,跟随 3D 物体移动。需要注意的是删除后,其对应的 panel 也会被删除。 var uiAnchor = app.create({ 阅读详情

一般测量功能主要表现在两方面,一是测量距离,二是测量面积。面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小,距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离。如何在3D场景中测量面积?下面我就在ThingJS平台实现鼠标任意点绘制多边形面积,计算绘制总长度和占地面积,支持在数字孪生可视化场景内任意绘制多边形并测量面积。

先来看一下实现效果:

实现思路

1、首先是添加注册事件,单击鼠标左键添加点位,鼠标移动持续绘制测量线段,双击或单击鼠标右键结束。

 
  appClick() {
        let _this = this;
        // 点击左键添加节点右键结束绘制
        _this.opts.app.on('SingleClick', function(e) {
            if (e.button == 0) {
                if (!e.picked) return;
                _this.numIndex++;
                _this.ePosition = e.pickedPosition;
                _this.createPoint(_this.ePosition);
                _this.coordinatesArr.push(_this.ePosition);
                _this.lineCoor.push(_this.ePosition);
                _this.createLine(_this.coordinatesArr);
                _this.getDistance();
                _this.template =
                    `<div id="div` + _this.opts.modelNum + _this.numIndex + `" class="card-label card-label` + _this.opts.modelNum + `">
                        <span class="text">`;
                if (_this.lineDistanceAll != null) {
                    _this.template += _this.lineDistanceAll + `米`;
                } else {
                    
Unity中根据平面的多边形点的数据,生成简单的立体网格 根据平面的多边形点的数据,生成简单的立体网格1.分析2.用耳切法生成多边形的三角面 最近需要一个功能,就是根据给定的多边形顶点(按照顺时针或者逆时针这样的顺序),然后生成一个具有高度,投影与多边形一样的一个Mesh。 比如给定以下的一些顶点的位置, 生成一个这样的Mesh。 1.分析 首先肯定就是要生成mesh的这样一个问题。mesh的主要内容包括顶点、三角形、法线(uv的话我用不上,所以就不考虑了,而且感觉不好弄)。 顶点,这个很简单,地面的一圈顶点是给定好的,然后上层的顶点只要加上一个高度就能算出 阅读详情

相关推荐

YOLOv8实例分割:掩膜面积计算与可视化实战指南

本文详细介绍了YOLOv8实例分割中掩膜面积计算的两种方法:轮廓面积法和像素计数法,并提供了实战代码示例。通过cv2.contourArea和scale_image等关键技术,帮助开发者精准计算物体掩膜面积,适用于医学图像分析、工业质检等场景。文章还包含结果可视化技巧和性能优化策略,提升计算机视觉项目的效率与精度。

weixin_29084231的博客 1033

YOLOv8实例分割实战:如何精准计算并可视化每个目标的掩膜面积(附完整代码)

本文详细介绍了YOLOv8实例分割模型在精准计算和可视化目标掩膜面积方面的实战应用。通过对比轮廓面积法和像素计数法两种主流技术,提供了完整的代码实现和优化策略,适用于生物医学图像分析和工业质检场景。文章还涵盖了结果可视化、工程化部署及性能优化等关键环节,帮助开发者快速掌握YOLOv8实例分割的核心技术。

weixin_30932215的博客 415

Halcon ROI绘制进阶技巧:从矩形到任意区域的完整指南

本文详细介绍了Halcon中ROI(Region of Interest)绘制的进阶技巧,从基础矩形到复杂任意区域的完整指南。通过对比六种核心ROI绘制方法的性能与适用场景,提供交互式绘制技巧、编程式生成方案及工程化应用实践,帮助提升工业视觉检测的效率和精度。

weixin_30300225的博客 273

基于ArcGIS JS实现仿百度地图的距离与面积测量功能

ArcGIS JavaScript API 是 Esri 提供的前端地图开发框架,基于 Dojo 构建,支持模块化加载。其核心由MapMapViewGraphicGeometry和等类构成。Map负责管理图层集合,MapView实现二维视图渲染与用户交互,二者需协同工作以展示地理数据。});该架构遵循“数据与视图分离”原则,便于扩展与维护,是构建测量应用的基础支撑体系。在启动测量功能时,通常需要进入“绘制模式”,此时应关闭默认导航,转而监听指针事件进行轨迹捕捉。

weixin_30820933的博客 795

5分钟搞定!用FunASR在本地快速部署达摩院Paraformer语音识别模型(附常见问题解决)

本文详细介绍了如何在本地快速部署阿里达摩院开源的Paraformer语音识别模型。通过FunASR工具包,用户可在5分钟内完成环境配置、模型下载与基础识别,并掌握批量处理、性能调优及构建API服务等进阶技巧。文章重点解析了Paraformer的非自回归架构带来的速度优势,并提供了音频格式转换、依赖冲突、显存不足等常见问题的实战解决方案,助力开发者实现高效、离线的语音转写应用。

p1q2r的博客 708

Visual Tracker Benchamark傻瓜式教程(二)

问题  1 1  在调用main.m跑TRE和SRE时,因为会生成相应的.mat数据文件,如果跑完以后发现自己算法生成的.mat文件有问题,那么要把该文件删除,待找到错误原因后,重新生成相应的.mat文件。因为程序中写的是如果已经存在了.mat文件,例如已经存在car4_STC.mat文件,即使该文件中的数据有错误,但是重新跑时会默认该文件中的数据写完,不会重新写入数据 问题  2  b

mingbujingren的专栏 9928

若依(RuoYi)框架从零到部署:Spring Boot+Vue权限系统完整配置指南

在Java企业级应用开发中,Spring Boot作为构建微服务和单体应用的基石,极大地简化了项目初始化和配置流程。其核心原理在于通过自动配置和起步依赖,快速整合数据访问、安全认证、缓存等常用模块,显著提升开发效率。这一技术价值在需要快速构建后台管理系统的场景中尤为突出,例如权限管理、用户角色分配等通用需求。若依(RuoYi)框架正是基于Spring Boot和Vue.js的优秀实践,它封装了RBAC权限模型、代码生成器等高频功能,提供了开箱即用的解决方案。本文聚焦于若依框架的【环境配置】与【项目部署】,通

weixin_33984032的博客 457

告别手动输入!用Access批量导入307种土壤数据到SWAT模型(附完整MDB操作流程)

本文详细介绍了如何利用Microsoft Access批量导入307种土壤数据到SWAT模型,显著提升数据录入效率。通过解析usersoil表结构、提供Access操作指南和VBA自动化脚本,帮助环境工程师避免手动输入错误,实现高效数据管理。文章还包含性能优化技巧和常见错误解决方案,是SWAT模型用户的实用指南。

weixin_28366053的博客 326

PySide6多线程避坑大全:信号槽崩溃、内存泄漏,这些雷我都帮你踩过了

本文深入探讨了PySide6多线程开发中的常见问题与解决方案,包括信号槽崩溃、内存泄漏等典型陷阱。通过实战案例和优化策略,帮助开发者避免UI线程操作错误、有效管理资源生命周期,并提升跨线程通信的可靠性。特别针对PySide6多线程特性,提供了线程安全日志、死锁检测等实用调试技巧。

weixin_32288959的博客 397

S7-1500 PLC与多台S7-200SMART PLC进行PROFINET通信的快捷方法

S7-1500 PLC与多台S7-200SMART PLC进行PROFINET通信的快捷方法

Robot_PLC_HMI_Automation 5695

C#操作MySQL从入门到精通(3)——新建数据库、新建表

我们要首先新建一个数据库,并且在数据库中新建一系列的表来管理数据库。

qq_34059233的博客 952

【Unity大规模RTS/攻城战框架】Large Scale Combat System - RTS Sieges深度解析

本文介绍了Unity专业级大规模RTS战斗框架Large Scale Combat System(LSCS)。该系统通过Job System+Burst技术解决了万人级单位的性能问题,提供完整的RTS操作体系、动态阵型系统、战术AI和攻城战功能。其亮点包括可破坏城门、行走城墙、战术AI配置系统,支持URP渲染管线,适用于Total War风格的大规模兵团对战项目。LSCS不仅提供核心战斗系统,还包含UI、小地图等配套模块,是Unity中少有的专业级RTS解决方案,特别适合需要深度战术玩法和大规模战斗的开发者

2403_88403568的博客 1336

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

上一篇: 园区模型与全景图联动开启第一人称巡游
下一篇: 可视化场景内任意绘制线段并测量距离
ThingJS_小锘
博客等级 码龄6年 170粉丝 254原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值