一般的测量功能主要体现在测量距离和面积两个方面。 面积测量是根据鼠标画出的范围通过地理坐标系的变换计算出实际面积的大小，距离测量是根据鼠标在地图上画出的点实时计算出两点之间的实际距离。 如何在3D场景中测量面积？ 在这里，用ThingJS平台实现鼠标的任意点绘制多边形面积，计算绘制总长和占地面积，支持在数字双胎可视化场景内多边形的任意绘制和面积测量。
让我们先来看看实现效果：
实现思路
1、首先添加注册事件，点击鼠标左键添加点，通过鼠标移动继续绘制测量线段，双击或点击右键退出。app点击()。
let _this=this；
//点击左键添加节点的右键，结束绘制
_ this.opts.app.on (单击)，函数(e ) {
if(e.Button==0) {
if (！ e .被拾取(返回；
_ this .编号；
_ this.e位置=e .已拾取的位置；
_ this.create point (_ this.e位置；
_ this.coordinates arr.push (this.e位置)；
_ this.line coor.push (this.e位置)；
_ this.create line (this .协调区域)；
_ this.get距离(；
_this.template=
divid=' div ` _ this.opts.model num _ this.numindex ` ' class='卡标签标签` _ this.opts.model
跨度类='文本'；
if(this.linedistanceall！=空值) {
_ this.template=_ this.linedistanceall `米`；
} else {
_ this.template=` span style='颜色： # f 45905； 边界光： 1px固态#抄送； margin-right 33605 px ` _ this .平面标识` /跨度起点`
}
_this.template =
` /跨度
span imgid=' points ` _ this.opts.model num _ this.numindex ' ' src=' /指南/示例/图像/测量/移除
/div `；
_ this.boardid=' div ' _ this.opts .模型编号_ this .编号；
_ this .创建卡(this.region point )；
_this.pointsObj={
id : ' points ' _ this.opts.model num _ this.numindex，//起点顶板跨距标签id
parent : ' div ' _ this.opts.model num _ this.numindex，//起点顶板div标签id
coor : _ this.opts.curr位置，//起点坐标
距离：
(；
_ this.pointsobjarr.push (this.points obj )；
_this.cardClick (；
} else {
if (this .协调区域2 ) {
_ this.destroy全部(；
_ this.rianleydom.CSS ('显示'，'无' )；
返回；
(；
_this.end (；
}
_ this.rianleydom.CSS ('显示'，'无' )；
、“点击”；
//用鼠标持续描绘测量线段
_this.opts.app.on('mousemove '，函数(e ) {
if (e .已拾取) {
_ this.e位置=e .已拾取的位置；
_ this.points arr=[ . _ this .协调区域，_ this.e位置]；
_ this .创建线(this.points arr )；
_ this.line.style.color=' # f 88020 '；
if(_this.pointsARR.Length=2) {
_this.m
oveDistance = THING.Math.getDistance(_this.pointsArr[_this.pointsArr.length - 1], _this.pointsArr[_this.pointsArr.length - 2]); let countNum = 0; _this.disArr.forEach(v => { countNum += parseFloat(v); }); countNum = 1 * parseFloat(countNum).toFixed(2) + 1 * parseFloat(_this.moveDistance).toFixed(2); _this.rianleyDom.css('display', 'block'); _this.rianleyDom.find('span.value').text(countNum.toFixed(2)); _this.rianleyDom.css('left', e.clientX + 10 + 'px'); _this.rianleyDom.css('top', e.clientY + 'px'); } } }, '移动'); // 结束绘制当前测量线段 _this.opts.app.on('DBLClick', function(ev) { if (_this.coordinatesArr.length < 2) { _this.destroyAll(); _this.rianleyDom.css('display', 'none'); return; }; if (_this.coordinatesArr.length >= 3) { _this.createPolygon(_this.coordinatesArr); } _this.end(); }, '双击'); }2、创建节点、线段和生成测量吗这些基本元素，确定起点、各个节点的坐标。通过节点和线段来创建参数组，统一所有鼠标点击后的坐标点集合，生成不规则图形的测量面积。
1、 createPoint(ePosition) { 2、 var _this = this; 3、 _this.regionPoint = app.create({ 4、 type: 'Sphere', 5、 id: 'points' + _this.opts.modelNum + _this.numIndex, 6、 name: 'points' + _this.opts.modelNum, 7、 radius: 0.2, // 半径 8、 widthSegments: 16, 9、 heightSegments: 16, 10、 position: ePosition, // 球体坐标 11、 style: { 12、 color: '#c10000', 13、 roughness: 50, 14、 opacity: 0.8 15、 } 16、 }); 17、 } 18、 createLine(coordinates) { 19、 if (this.line) { 20、 this.line.destroy(); 21、 } 22、 let id = this.opts.modelNum > 10 ? this.opts.modelNum : '0' + this.opts.modelNum; 23、 this.line = app.create({ 24、 type: 'PolygonLine', 25、 name: 'line', 26、 id: 'line' + id, 27、 width: 0.03, 28、 points: coordinates, 29、 style: { 30、 image: '/guide/examples/images/measure/redLine.png', 31、 opacity: 0.9 32、 } 33、 }); 34、 }3、面积测量的对象是带有地理位置（coordinates）的多边形要素，需要创建一个Constructor ()构造器，设置构造参数。
constructor(option) { this.opts = option; this.pointsArr = [this.opts.currPosition]; // 鼠标移动中坐标点的集合 this.coordinatesArr = [this.opts.currPosition]; // 存储鼠标点击后坐标点的集合 this.ePosition = null; // 存储触发事件后鼠标的位置 this.lineCoor = [this.opts.currPosition]; // 存储当前两个坐标点 this.disArr = []; // 存储所有坐标点与坐标点间的距离 this.numIndex = 0; // 自增变量 this.reSetDistance = 0; // 两点间的距离 this.lastStatus = false; // 判断是否绘制结束值为false为未结束true为结束 this.pointsObjArr = []; // 存储所有节点的id与顶牌id this.rianleyDom = $('#marker'); // 跟随鼠标的提示 this.pointCardDom = $('#pointMarker'); // 鼠标移动至节点的提示 this.init(); this.appClick(); }4、创建完一个测量多边形面积的方法，停止画图的时候就会触发选定部分的面积的大小了，然后我们就需要在测量结束的时候弹出一个顶牌来显示测量的面积。
createTopCard(position) { $('#div3d').append(this.template); this.polygonCard = document.getElementById(this.boardId); this.uiTop = app.create({ type: 'UIAnchor', element: this.polygonCard, position: [position[0], position[1], position[2]] }); }是不是非常简单就可以实现在数字孪生可视化场景中测量多边形面积？完整代码戳官网—https://www.thingjs.com/