官方案例（十五）：3D开发构造器参数测量多边形面积 ThingJS

本文链接：https://blog.csdn.net/ThingJS/article/details/113328523

本文介绍了如何使用ThingJS平台在3D场景中实现多边形面积的测量。通过创建构造器、混合绘制线与面以及添加HTML元素来显示测量详情，允许用户动态绘制并计算不规则形状的面积。该功能适用于前端、CAD和物联网可视化的开发场景，简化了传统CAD软件中的测量操作，便于快速分析和决策。

摘要由CSDN通过智能技术生成

#前端# #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();