效果可跳转 http://123.57.53.47/cesiumWeb/#/cesiumTools/measure 前往
效果图如下
因为要绘制点线面，分别要与cesium的左点击事件和鼠标移动事件左绑定。代码如下
handler.setInputAction(function (movement) {cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);let ray = viewer.camera.getPickRay(movement.position);if (positions.length == 0) {positions.push(cartesian.clone());}positions.push(cartesian);//在三维场景中添加Labelvar textDisance = distance + "米";floatingPoint = viewer.entities.add({name: "空间直线距离",position: positions[positions.length - 1],point: {pixelSize: 5,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,outlineWidth: 2,},label: {text: textDisance,font: "18px sans-serif",fillColor: Cesium.Color.GOLD,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,pixelOffset: new Cesium.Cartesian2(20, -20),},});}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
鼠标移动事件为
handler.setInputAction(function (movement) {cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);if (positions.length >= 2) {if (!Cesium.defined(poly)) {poly = new PolyLinePrimitive(positions);} else {positions.pop();positions.push(cartesian);}distance = getSpaceDistance(positions);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
那么基本的线和面就完成了，那么接下来如果是测量的话，这里提供两个函数，可以计算出线的距离和面的面积。
//空间两点距离计算函数function getSpaceDistance(positions) {var distance = 0;for (var i = 0; i < positions.length - 1; i++) {var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);var point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);/**根据经纬度计算出距离**/var geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(point1cartographic, point2cartographic);var s = geodesic.surfaceDistance;//console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));//返回两点之间的距离// s = Math.sqrt(// Math.pow(s, 2) +//Math.pow(point2cartographic.height - point1cartographic.height, 2)// );distance = distance + s;}return distance.toFixed(2);}
function distance(point1, point2) {var point1cartographic = Cesium.Cartographic.fromCartesian(point1);var point2cartographic = Cesium.Cartographic.fromCartesian(point2);/**根据经纬度计算出距离**/var geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(point1cartographic, point2cartographic);var s = geodesic.surfaceDistance;//console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));//返回两点之间的距离s = Math.sqrt(Math.pow(s, 2) +Math.pow(point2cartographic.height - point1cartographic.height, 2));return s;}
详细的代码与实现效果可点击顶部链接查看。
如果觉得《cesium点线面 测量详细代码》对你有帮助，请点赞、收藏，并留下你的观点哦！
