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

一般测量功能主要表现在两方面，一是测量距离，二是测量面积。面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离。如何在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 + `米