cesium画矩形区域并显示长宽

1.viewer.value.scene.screenSpaceCameraController.enableRotate = false; //禁止地图拖拽

2.存储矩形各点坐标 westSouthEastNorth

3.监听鼠标事件

4.计算两点的距离

5.计算两点的中点坐标

6.westSouthEastNorth坐标数组包括五组坐标（第一个和最后一个坐标相同，方向分别是左上、左下、右下、右上）

代码如下

  const drawRectangleInfo = () => {

    viewer.value.scene.screenSpaceCameraController.enableRotate = false; //禁止地图拖拽

    /**

     * 矩形四点坐标

     */

    let westSouthEastNorth: any = [];

    /**实体的唯一标注 */

    let id: any = null;

    /**地图点击对象 */

    handler.value = new Cesium.ScreenSpaceEventHandler(

      viewer.value.scene.canvas

    );

    handler.value.setInputAction((click: any) => {

      /**点击位置笛卡尔坐标 */

      let cartesian = viewer.value.camera.pickEllipsoid(

        click.position,

        viewer.value.scene.globe.ellipsoid

      );

      /**笛卡尔转弧度坐标 */

      let cartographic = Cesium.Cartographic.fromCartesian(

        cartesian,

        viewer.value.scene.globe.ellipsoid,

        new Cesium.Cartographic()

      );

      /**点击位置经度 */

      let lng1: any = Cesium.Math.toDegrees(cartographic.longitude);

      /**点击位置维度 */

      let lat1: any = Cesium.Math.toDegrees(cartographic.latitude);

      /**边框坐标 */

      westSouthEastNorth = [lng1, lat1];

      id = new Date().getTime();

      if (westSouthEastNorth) {

        handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);

      }

      /**面实例对象 */

      rectangleId.value = viewer.value.entities.add({

        name: "rectangle",

        id: "rectangle",

        polygon: {

          hierarchy: new Cesium.CallbackProperty(function () {

            return {

              positions: Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth),

            };

          }, false),

          height: 0,

          // 填充的颜色，withAlpha透明度

          material: Cesium.Color.GREEN.withAlpha(0.0),

          // 是否被提供的材质填充

          fill: true,

          // 是否显示

          show: true,

        },

        polyline: {

          positions: new Cesium.CallbackProperty(function () {

            return Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth);

          }, false),

          material: config.borderColor,

          width: config.borderWidth,

          zIndex: 1,

        },

      });

      handler.value.setInputAction((move: any) => {

        let cartesian = viewer.value.camera.pickEllipsoid(

          move.endPosition,

          viewer.value.scene.globe.ellipsoid

        );

        let cartographic = Cesium.Cartographic.fromCartesian(

          cartesian,

          viewer.value.scene.globe.ellipsoid,

          new Cesium.Cartographic()

        );

        let lng: any = Cesium.Math.toDegrees(cartographic.longitude);

        let lat: any = Cesium.Math.toDegrees(cartographic.latitude);

        if (width.value) {

          width.value.label.show = false;

        }

        if (height.value) {

          height.value.label.show = false;

        }

        width.value = viewer.value.entities.add({

          position: measureCenterByCartesian(

            Cesium.Cartesian3.fromDegrees(lng1, lat1),

            Cesium.Cartesian3.fromDegrees(lng1, lat)

          ),

          name: "text",

          label: {

            show: true,

            text: getTwoPointDistance([lng1, lat1], [lng1, lat]),

            font: "18px sans-serif",

            fillColor: Cesium.Color.GOLD,

            style: Cesium.LabelStyle.FILL_AND_OUTLINE,

            outlineWidth: 2,

            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

          },

        });

        height.value = viewer.value.entities.add({

          position: measureCenterByCartesian(

            Cesium.Cartesian3.fromDegrees(lng1, lat1),

            Cesium.Cartesian3.fromDegrees(lng, lat1)

          ),

          name: "text",

          label: {

            show: true,

            text: getTwoPointDistance([lng1, lat1], [lng, lat1]),

            font: "18px sans-serif",

            fillColor: Cesium.Color.GOLD,

            style: Cesium.LabelStyle.FILL_AND_OUTLINE,

            outlineWidth: 2,

            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

          },

        });

        westSouthEastNorth = [

          lng1,

          lat1,

          lng1,

          lat,

          lng,

          lat,

          lng,

          lat1,

          lng1,

          lat1,

        ];

      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

    handler.value.setInputAction(() => {

      infoDetail.value.rectangle.push({ id: id, position: westSouthEastNorth });

      // handler.value.destroy()

      handler.value.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      viewer.value.scene.screenSpaceCameraController.enableRotate = true; //允许地图拖拽

    }, Cesium.ScreenSpaceEventType.LEFT_UP);

  }

  /**计算出两点的中点 */

  const measureCenterByCartesian = (from: any, to: any) => {

    // 转换为Cartographic

    let carto1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(from);

    let carto2 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(to);

    // 计算中心点的经纬度

    let lon = (carto1.longitude + carto2.longitude) / 2;

    let lat = (carto1.latitude + carto2.latitude) / 2;

    let center = Cesium.Cartographic.fromRadians(lon, lat);

    // 将中心点的经纬度转换回Cartesian3

    let centerPoint = Cesium.Ellipsoid.WGS84.cartographicToCartesian(center);

    return centerPoint;

  };

  /**计算两点距离 */

  const getTwoPointDistance = (position: any, position2: any) => {

    let textDisance: any = "";

    //叠加测量点

    let distance = Cesium.Cartesian3.distance(

      Cesium.Cartesian3.fromDegrees(position[0], position[1]),

      Cesium.Cartesian3.fromDegrees(position2[0], position2[1])

    );

    if (distance > 10000) {

      textDisance = (distance / 1000).toFixed(2) + "km";

    } else {

      textDisance = distance.toFixed(2) + "m";

    }

    return textDisance;

  };

欢迎补充，一起进步。