0


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;

};

欢迎补充,一起进步。

标签: 前端 java typescript

本文转载自: https://blog.csdn.net/m0_69112199/article/details/140758353
版权归原作者 爱编程的小透明 所有, 如有侵权,请联系我们删除。

“cesium画矩形区域并显示长宽”的评论:

还没有评论