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