#前端# #CAD# #物聯網可視化開發#
- 創建參數構造器
- 繪製測量線生命週期
- 座標點距離計算
簡介：CAD圖紙上測量線段是常見功能，3D場景中如何測量線段呢？不需要選取、合併等手動操作，3D界面的測量自帶量角功能，實現起來更加流暢。
demo鏈接：http://www.thingjs.com/guide/?m=sample
創建參數構造器
js是基於對象的編程語言，創建對象的方式多樣，常見的有JSON格式創建、構造函數創建。ThingJS使用 Constructor () 作爲對象構造器函數，用來構造一種“對象類型”，即創建相同類型的對象框架。
在對象中使用this，指的就是新對象， 當一個新對象被創建時，this 的值會成爲這個新對象。但是this本身不是變量，而是作爲關鍵詞。對象中一切都是屬性， Constructor () 構造器爲對象的屬性賦初始值，JS中可以任意擴展構造參數option，實現動態綁定。例如繪製測量線的構造參數創建如下：
/**
* 繪製測量線
*/
class DrawLine {
/**
* 構造器
* @param {JSON} option - 構造參數
*/
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; // 存儲兩點間的距離
this.lastStatus = false; // 判斷是否繪製結束值爲false爲未結束true爲結束
this.pointsObjArr = [];
this.rianleyDom = $('#marker'); // 跟隨鼠標的提示
this.pointCardDom = $('#pointMarker'); // 鼠標移動至節點的提示
this.init(); // 初始化
this.appClick(); // 調用方法
}繪製測量線生命週期
在BIM系統中，繪製測量線是常見的操作，在線實現自由拖拽，並能夠實現可視化數據的動態顯示。ThingJS平臺輕量化這一測量操作，基於邏輯簡單的繪製生命週期，包括創建對象、測量可視化、展示動態信息。
首先創建節點、線段和節點頂牌這些基本元素，確定起點、各個節點的座標。其中線段屬於所有鼠標點擊後的座標點集合，即測量的總距離。
其次添加註冊事件，就可以進行實際的測量操作步驟。點擊左鍵添加節點，鼠標右鍵結束繪製。如果是多線段測量，移動鼠標可以持續繪製。點擊左鍵創建一個節點，點擊刪除圖標消除此節點。
座標點距離計算
網頁開發如何做到座標點的距離計算？JS邏輯參考ThingJS官方示例，座標點的距離計算使用函數getdistance來調用構造器參數，不僅可以測量單個線段和多線段，連續測量的方法也能輕鬆實現。
/**
* 計算兩個座標點間的距離
*/
getDistance() {
if (this.lineCoor.length < 2) return;
if (this.coordinatesArr.length > 2) {
this.lineCoor.shift();
}
this.lineDistance = THING.Math.getDistance(this.lineCoor[0], this.lineCoor[1]);
this.lineDistance = this.lineDistance.toFixed(2);
this.disArr.push(this.lineDistance);
let countNum = 0;
this.disArr.forEach(v => {
countNum += parseFloat(v);
});
this.lineDistanceAll = countNum.toFixed(2);
}若要公開測量詳情信息，一般在2D面板實時展現，鼠標測量的同時，決策分析需求也能通過面板信息滿足。
結尾
3D模型的線測量沿用了2D圖紙的測量方式，不光直線測量，還可以加入弧線測量方式哦！快速測量連續線段是必備的物聯網3D開發技能，快來試試看吧！
關於ThingJS
ThingJS平臺提供物聯網3D可視化組件，讓3D開發更輕鬆！直接Javascript調用3D腳本，基於200個3D開發源碼示例，讓你全面瞭解物聯網可視化開發邏輯。場景搭建-3D腳本開發-數據對接-項目部署的一站式服務讓開發更高效，同20萬個開發者一起成爲數字孿生技術創新者！