标签：多边形 测量 coordinates 开发 ThingJS opts 3D
#前端# #CAD# #物联网可视化开发#
- 用于测量的构造器
- 线与面的混合绘制
- 添加HTML元素
简介：如何在3D场景中测量面积？ThingJS平台实现多点测量开发，支持鼠标任意点绘制多边形面积，使用自带量角功能，计算绘制总长度和占地面积，结合3D场景更好理解。
demo链接：http://www.thingjs.com/guide/?m=sample
用于测量的构造器
面积测量的对象是带有地理位置（coordinates）的多边形要素，与线段测量的开发方式类似，需要创建一个对象类型的构造器，可以添加属性字段以存储信息。
ThingJS平台创建 Constructor () 构造器为对象的属性赋初始值，JS中可以任意扩展构造参数option，实现动态绑定。
线与面的混合绘制
在图像中，四个点能够形成不规则的四边形或者矩形，ThingJS示例利用由点及面的原理，通过节点和线段来创建参数组，统一所有鼠标点击后的坐标点集合，生成不规则的测量面积。再通过修改多边区域的样式参数（如颜色、透明度），来提升测量面积可见度。
/**
* 生成测量面
* @param {Array} coordinates - 所有鼠标点击后的坐标点集合
*/
createPolygon(coordinates) {
var _this = this;
if (_this.regionPolygon) {
_this.regionPolygon.destroy();
_this.polygonCard.remove();
_this.opts.app.query('dashLine' + _this.opts.modelNum).destroy();
}
let coordinatesSort = [...coordinates];
coordinatesSort.sort(function (a, b) {
return a[1] - b[1];
});
let points01 = JSON.parse(JSON.stringify(coordinates));
points01.forEach((v, k) => {
v[1] = coordinatesSort[0][1];
})
let id = _this.opts.modelNum > 10 ? _this.opts.modelNum : '0' + _this.opts.modelNum;
_this.regionPolygon = app.create({
type: 'Shape',
id: 'Area' + id,
points: points01, // 传入世界坐标系下点坐标
height: 0.1,
style: {
color: '#F99D0B', // 区域颜色
opacity: 0.8 // 不透明度 (默认是 0.5 半透明)
},
})
测量的注册事件主要是以鼠标操作为主，点击左键添加节点，右键或双击结束绘制，鼠标移动持续绘制测量线段，单击删除节点，整体代码和测量线段的开发逻辑一致。
添加HTML元素
屏幕上的2D面板一般用来动态展示测量详情，属于HTML表格，增加tbody标签以存储当前测量信息，形成一个HTML表格，让3D场景和数据分析结合起来。
3D场景开发并不高深，只要结合ThingJS的物联网接口能力，甚至使用HTML/CSS等网页开发元素，一样能够快速完成3D可视化开发。
/**
* 为测量面板增加tbody标签存储当前测量信息
*/
createPanel() {
if ($('.empty')) {
$('.empty').remove();
}
let tbody = `<tbody id="tb-polygon` + this.opts.modelNum + `" class="tj-group"></tbody>`
$('.tj-table').prepend(tbody);
this.table = $('#tb-polygon' + this.opts.modelNum);
}
结尾
CAD测量面积需要很多按键操作，属于工具类软件，ThingJS不是为了测量本身，而是为了更容易在线测量面积，实现快速分析决策，所以更多是管理方式的转变，应用到数字孪生技术解决方案中。
关于ThingJS
ThingJS平台提供物联网3D可视化组件，让3D开发更轻松！直接Javascript调用3D脚本，基于200个3D开发源码示例，让你全面了解物联网可视化开发逻辑。场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效，同20万个开发者一起成为数字孪生技术创新者！
标签：多边形,测量,coordinates,开发,ThingJS,opts,3D 来源： https://blog.csdn.net/ThingJS/article/details/113328523
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。