cesium-测量距离

左键测量，右键结束

直接上代码，调用即可用。需要安装插件

"@turf/turf": "^6.5.0",

import * as Cesium from 'cesium'
import * as turf from "@turf/turf";
class cesiumdemo {
    container;
    viewer;
    /**
     * 
     * @param container id 容器
     */
    constructor(container:string){
        //授权
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNmI0MDRkZi04NzhjLTQyYmMtYjQxOC1iNzc2MDA1MmM4ZjIiLCJpZCI6OTAwMTAsImlhdCI6MTY1MDA3NTM0MX0.mGMDeDFon6i_AOEfTs3pEq30wRCipCWL3O-bzLHswtw';
       this.container = container;
    }
    
    /**
     * 
     * @param propJson 配置对象
     */
    init(propJson:object) {
      this.viewer = new Cesium.Viewer(this.container, propJson);
       this.viewer._cesiumWidget._creditContainer.style.display = 'none'

    }
//测量面积
 measureAreaSpace(viewer, cesiumID, callback?)  {
  var points = [];
  var measureAreaSpaceEntitys = [];
  var gatherPolygon = null;

  let measureAreaSpaceHandler = new Cesium.ScreenSpaceEventHandler(
    viewer.scene.canvas
  );

  //鼠标变成加号
  document.getElementById(cesiumID).style.cursor = "crosshair";
  //   let the = this;
  // 对鼠标按下事件的监听
  measureAreaSpaceHandler.setInputAction((event) => {
    //获取加载地形后对应的经纬度和高程：地标坐标
    var ray = viewer.camera.getPickRay(event.position);
    var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    console.log(cartesian);
    if (!Cesium.defined(cartesian)) {
      return;
    }
    var point = viewer.entities.add({
      position: cartesian,
      point: {
        color: Cesium.Color.WHITE,
        pixelSize: 5,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 1,
      },
    });
    measureAreaSpaceEntitys.push(point);
    points.push(cartesian);
    if (points.length >= 3) {
      if (gatherPolygon == null) {
        gatherPolygon = viewer.entities.add({
          polygon: {
            hierarchy: new Cesium.CallbackProperty(function (time, result) {
              var hierarchyTemp = new Cesium.PolygonHierarchy(points, null);
              return hierarchyTemp;
            }, false),
            material: Cesium.Color.GREENYELLOW.withAlpha(0.5),
          },
        });
        measureAreaSpaceEntitys.push(gatherPolygon);
      } else {
        gatherPolygon.polygon.hierarchy = new Cesium.CallbackProperty(function (
          time,
          result
        ) {
          var hierarchyTemp = new Cesium.PolygonHierarchy(points, null);
          return hierarchyTemp;
        },
        false);
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  measureAreaSpaceHandler.setInputAction(function (rightClick) {
    var dke = gatherPolygon.polygon.hierarchy.getValue().positions;

    if (dke.length >= 3) {
      var objArr = [];
      for (var i = 0; i < dke.length; i++) {
        var ellipsoid = viewer.scene.globe.ellipsoid;
        var cartesian3 = new Cesium.Cartesian3(dke[i].x, dke[i].y, dke[i].z);
        var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
        //console.log("cartographic",cartographic);
        var obj = {};
        obj.lat = Cesium.Math.toDegrees(cartographic.latitude);
        obj.lng = Cesium.Math.toDegrees(cartographic.longitude);
        objArr.push(obj);
      }
      console.log("采集的面坐标(经纬度)", objArr);

      let featuresArr = [];
      let areaXYArr = [];
      objArr.forEach((obj, index) => {
        featuresArr.push(turf.point([obj.lng, obj.lat]));
        areaXYArr.push([obj.lng, obj.lat]);
      });

      var features = turf.featureCollection(featuresArr);
      var center = turf.center(features);
      console.log("center232", center);

      let lngTemp = center.geometry.coordinates[0];
      let latTemp = center.geometry.coordinates[1];

      areaXYArr.push(areaXYArr[0]);
      console.log("areaXYArr", areaXYArr);
      var polygon = turf.polygon([areaXYArr]);
      var area = turf.area(polygon);
      console.log("area", area);
      let textDisance = "";
      if (area > 10000) {
        textDisance = (area / 1000000).toFixed(2) + "k㎡";
      } else {
        textDisance = area.toFixed(2) + "㎡";
      }

      let labelTemp = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lngTemp, latTemp),
        label: {
          text: textDisance,
          font: "18px sans-serif",
          fillColor: Cesium.Color.GOLD,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          outlineWidth: 2,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
      });

      measureAreaSpaceEntitys.push(labelTemp);
      //鼠标变成加号
      document.getElementById(cesiumID).style.cursor = "default";
      //移除地图点击事件
      measureAreaSpaceHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      ); //移除事件
      measureAreaSpaceHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.RIGHT_CLICK
      ); //移除事件
      callback(area);
    } else {
      clearMeasureAreaSpaceEntitys();
    }
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};
//计算出两点距离（内部接口）
measureCenterByCartesian(from, to) {
    // 转换为Cartographic
    var carto1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(from);
    var carto2 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(to);
    // 计算中心点的经纬度
    var lon = (carto1.longitude + carto2.longitude) / 2;
    var lat = (carto1.latitude + carto2.latitude) / 2;
    var center = Cesium.Cartographic.fromRadians(lon, lat);
    // 将中心点的经纬度转换回Cartesian3
    let centerPoint = Cesium.Ellipsoid.WGS84.cartographicToCartesian(center);
    return centerPoint;
  }
//测量距离
measureLineLength(viewer,cesiumID,callback?) {
    let distanceCount = 0;
    let points = [];
    let measureLineLengthEntitys = [];
    let gatherPolyline = null;
    let measureLineLengthHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.canvas
    );
    //鼠标变成加号
    document.getElementById(cesiumID).style.cursor = "crosshair";
    let the = this;
    // 对鼠标按下事件的监听
    measureLineLengthHandler.setInputAction(function (event) {
      //获取加载地形后对应的经纬度和高程：地标坐标
      let ray = viewer.camera.getPickRay(event.position);
      let cartesian = viewer.scene.globe.pick(ray, viewer.scene);

      if (!Cesium.defined(cartesian)) {
        return;
      }
      let point = viewer.entities.add({
        name: "polyline_point",
        position: cartesian,
        point: {
          color: Cesium.Color.WHITE,
          pixelSize: 5,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 1,
        },
      });
      measureLineLengthEntitys.push(point);
      points.push(cartesian);
      if (points.length >= 2) {
        //叠加线
        if (gatherPolyline == null) {
          gatherPolyline = viewer.entities.add({
            polyline: {
              positions: new Cesium.CallbackProperty(function (time, result) {
                return points;
              }, false),
              width: 10.0,
              clampToGround: true,
              material: new Cesium.PolylineGlowMaterialProperty({
                color: Cesium.Color.CHARTREUSE.withAlpha(0.5),
              }),
            },
          });
          measureLineLengthEntitys.push(gatherPolyline);
        } else {
          //CallbackProperty监听point变化值会自动set
        }
        //叠加测量点
        var distance = Cesium.Cartesian3.distance(
          points[points.length - 2],
          points[points.length - 1]
        );
        distanceCount = distanceCount + distance;
        let textDisance = "";
        if (distance > 10000) {
          textDisance = (distance / 1000).toFixed(2) + "km";
        } else {
          textDisance = distance.toFixed(2) + "m";
        }
        let centerPoint = the.measureCenterByCartesian(
          points[points.length - 2],
          points[points.length - 1]
        );
        let labelTemp = viewer.entities.add({
          position: centerPoint,
          label: {
            text: textDisance,
            font: "18px sans-serif",
            fillColor: Cesium.Color.GOLD,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          },
        });
        measureLineLengthEntitys.push(labelTemp);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    measureLineLengthHandler.setInputAction(function (rightClick) {
      //鼠标变成加号
      document.getElementById(cesiumID).style.cursor = "default";
      measureLineLengthHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      );
      measureLineLengthHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.RIGHT_CLICK
      );
      callback(distanceCount);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  };
 


}
export default cesiumdemo

在vue组件使用

<template>
  <div id="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, onBeforeUpdate } from "vue";
import cesiumdemo from "cesiumdemo";
onMounted(() => {
let cesium = new cesiumdemo("cesiumContainer");
  cesium.init({
    homeButton: false,
    baseLayerPicker: false, //地图图层组件
    fullscreenButton: false, //全屏组件
    geocoder: false, //地理编码搜索组件
    infoBox: false, //信息框
    sceneModePicker: false, //场景模式
    selectionIndicator: false, //选取指示器组件
    timeline: false, //时间轴
    navigationHelpButton: false, //帮助按钮
    navigationInstructionsInitiallyVisible: false,
    animation: false,
    vrButton: false,
  });
const callback1 = (value) => {
    console.log("采集到的", value);
  };
  cesium.measureLineLength(cesium.viewer, "cesiumContainer", callback1);
});
</script>