cesium1.63.1api版本貼地貼模型量算工具效果(附源碼下載)

前言

cesium 官網的api文檔介紹地址cesium官網api，裏面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。
很多訂閱者向我反饋以前的那篇（https://xiaozhuanlan.com/topic/8210364597 ） 量算工具的cesiumAPI版本過低，不能適用新版本。因此，推出新版本的量算工具效果，對應版本是cesium1.63.1API的。

內容概覽

1.cesium1.63.1API版本貼地量算工具效果
2.源代碼demo下載

效果圖以下：

實現思路：測距以及測面都是利用到cesium鼠標操做監聽事件：鼠標左鍵Cesium.ScreenSpaceEventType.LEFT_CLICK、鼠標移動Cesium.ScreenSpaceEventType.MOUSE_MOVE、鼠標右鍵Cesium.ScreenSpaceEventType.RIGHT_CLICK。鼠標左鍵事件，獲取點擊地圖的每一個座標點；鼠標移動事件，動態撲捉鼠標移動狀態，下一個座標點位置；鼠標右鍵意味着地圖量算結束狀態。另外，量算面積的計算，結合turf.js來計算。

• 距離量算的監聽事件函數,裏面涉及到細節函數，自行看對應的源碼demo：

this.handler.setInputAction(function (evt) { //單機開始繪製
var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]);
if (!cartesian) return;
if (that.positions.length == 0) {
var label = that.createLabel(cartesian, "起點");
that.labels.push(label);
that.floatLable = that.createLabel(cartesian, "");
that.floatLable.show = false;
that.positions.push(cartesian);
that.positions.push(cartesian.clone());
that.lastCartesian = cartesian;
} else {
that.floatLable.show = false;
that.positions.push(cartesian);
if (!that.lastCartesian) return;
var distance = that.getLength(cartesian, that.lastCartesian);
that.allDistance += distance;
var text = that.formatLength(distance);
var label = that.createLabel(cartesian, text);
that.labels.push(label);
}
that.lastCartesian = cartesian;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function (evt) {
if (that.positions.length < 1) return;
that.floatLable.show = true;
var cartesian = that.getCatesian3FromPX(evt.endPosition, that.viewer, [that.polyline, that.floatLable]);
if (!cartesian) return;
if (that.positions.length == 2) {
if (!Cesium.defined(that.polyline)) {
that.polyline = that.createLine();
}
}
if (that.polyline) {
that.positions.pop();
that.positions.push(cartesian);
if (!that.lastCartesian) return;
var distance = that.getLength(cartesian, that.lastCartesian);
that.floatLable.show = true;
that.floatLable.label.text = that.formatLength(distance);
that.floatLable.position.setValue(cartesian);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function (evt) {
if (!that.polyline) return;
that.floatLable.show = false;
that.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
that.viewer.trackedEntity = undefined;
 
var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]);
var distanceLast = that.getLength(cartesian, that.lastCartesian);
that.allDistance += distanceLast;
var allDistance = that.formatLength(that.allDistance);
 
 
var label = that.createLabel(cartesian, "");
if (!cartesian) return;
that.labels.push(label);
that.labels[that.labels.length - 1].label.text = "總長：" + allDistance;
if (that.handler) {
that.handler.destroy();
that.handler = null;
}
if (that.tsLabel) {
that.viewer.entities.remove(that.tsLabel);
}
if (that.ts_handler) {
that.ts_handler.destroy();
that.ts_handler = null;
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

• 面積量算的監聽事件函數,裏面涉及到細節函數，自行看對應的源碼demo：

更多詳情見下面連接文章：

小專欄此文章

文章提供源碼，對本專欄感興趣的話，能夠關注一波