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

最新推荐文章于 2025-11-29 16:24:14 发布

原创

最新推荐文章于 2025-11-29 16:24:14 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#python #java #c语言 #javascript #c++

本文介绍了在3D可视化场景中如何通过鼠标绘制多边形并计算其面积。具体实现包括：监听鼠标事件添加点位，创建节点和线段，使用地理位置坐标计算面积，以及在测量结束时显示面积信息。该功能适用于数字孪生可视化场景。

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

最低0.47元/天解锁文章