前言
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：
更多详情见下面链接文章：
文章提供源码，对本专栏感兴趣的话，可以关注一波