feat: 完善三维航线编辑功能。

src/components/map/SceneViewer.vue

@@ -67,9 +67,9 @@ onMounted(() => {
 
   // 挂载在window，供全局组件共享
   window.viewer = viewer
-  inputGeoJson(viewer)
+  // inputGeoJson(viewer)
   //绘制多边形
-  const drawPolyline = new CreatePolyline(viewer,true,true,{})
+  const drawPolyline = new CreatePolyline(viewer)
   drawPolyline.start()
   // const drawPolygon = new DrawPolygon(viewer,true)
   // drawPolygon.start()

src/utils/map/TDTProvider.ts

@@ -3,7 +3,7 @@
  * @Date: 2024-03-07 16:04:55
  * @LastEditors: cbwu
  * @LastEditTime: 2024-04-15 16:06:06
- * @Description:
+ * @Description: 天地图服务
  */
 // 天地图影像服务
 import {

src/utils/map/draw/drawPolyline.ts

@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-27 08:43:44
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-22 16:19:27
+ * @LastEditTime: 2024-04-23 10:56:54
  * @Description: 绘制Polyline类
  */
 import {
@@ -28,7 +28,7 @@ import { getDistance } from '@/utils/map/geocomputation.ts'
 import { Angle } from '@/utils/map/angle.ts'
 import { TextLabel } from '@/utils/map/geometry/textLabel.ts'
 import { EntityOptions } from '@/types/entityoptions.ts'
-import {profileAnalyse} from "@/utils/map/SpatialAnalysis.ts";
+import { profileAnalyse } from '@/utils/map/SpatialAnalysis.ts'
 
 export default class CreatePolyline {
   viewer: Viewer
@@ -53,6 +53,9 @@ export default class CreatePolyline {
   // 存储第一次点击的信息
   firstClickPosition: Cartesian2 | null = null
   firstClickTime: number | null = null
+  //存储辅助对象ID
+  vDashLinesID: string[] = []
+  groundPointsID: string[] = []
   // layer: CustomDataSource
   defaultStyle: EntityOptions = {
     // id: 'Polyline' + String(PolylineEntity.id),
@@ -62,7 +65,12 @@ export default class CreatePolyline {
     color: Color.GREEN,
   }
 
-  constructor(viewer: Viewer, bMeasure: boolean=false,bProfile: boolean=false,options?: EntityOptions) {
+  constructor(
+    viewer: Viewer,
+    bMeasure: boolean = false,
+    bProfile: boolean = false,
+    options?: EntityOptions,
+  ) {
     this.viewer = viewer
     this.bMeasure = bMeasure
     this.bProfile = bProfile
@@ -128,20 +136,36 @@ export default class CreatePolyline {
       const n = this.positions.length - 1
       const ptArr = [oldPosition, cartesian3]
       this.vDashLinePosition[n] = ptArr
-      this.viewer.entities.add(this.createTrackingLine(this.vDashLinePosition[n], Color.WHITE))
+      const vDashLine = this.createTrackingLine(
+        this.vDashLinePosition[n],
+        Color.WHITE,
+      )
+      this.vDashLinesID.push(vDashLine.id)
+      this.viewer.entities.add(vDashLine)
       //添加地表控制点
       const groundControlPoint = new PointEntity(this.vDashLinePosition[n][0])
+      this.groundPointsID.push(groundControlPoint.id)
       this.viewer.entities.add(groundControlPoint)
       this.bMove = true
       this.viewer.scene.requestRender() //刷新
       // 计算2点距离
       if (this.positions.length >= 2 && this.bMeasure) {
-        let distance = getDistance(this.positions[this.positions.length-1],this.positions[this.positions.length-2])
+        let distance = getDistance(
+          this.positions[this.positions.length - 1],
+          this.positions[this.positions.length - 2],
+        )
         this.totalDistance += distance
         // 计算2点方位角
-        let azimuth = Angle.getAzimuth(this.positions[this.positions.length-2],this.positions[this.positions.length-1])
+        let azimuth = Angle.getAzimuth(
+          this.positions[this.positions.length - 2],
+          this.positions[this.positions.length - 1],
+        )
         // 计算2点的中间点
-        let midPoint = Cartesian3.midpoint(this.positions[this.positions.length-1],this.positions[this.positions.length-2],new Cartesian3())
+        let midPoint = Cartesian3.midpoint(
+          this.positions[this.positions.length - 1],
+          this.positions[this.positions.length - 2],
+          new Cartesian3(),
+        )
         // 添加label
         let labelText = `距离: ${distance.toFixed(2)}km, 方位角: ${azimuth}°`
         new TextLabel(this.viewer, midPoint, labelText)
@@ -172,7 +196,9 @@ export default class CreatePolyline {
     }
   }
   // 左双击回调事件
-  private leftDoubleClickCallBack = (event: ScreenSpaceEventHandler.PositionedEvent,) => {
+  private leftDoubleClickCallBack = (
+    event: ScreenSpaceEventHandler.PositionedEvent,
+  ) => {
     if (!this.polyline) return
     this.bMove = false
     const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
@@ -185,8 +211,11 @@ export default class CreatePolyline {
 
     if (this.bMeasure) {
       // 添加总距离label
-      new TextLabel(this.viewer,this.positions[this.positions.length-1],
+      new TextLabel(
-          `总距离: ${this.totalDistance.toFixed(2)}km`)
+        this.viewer,
+        this.positions[this.positions.length - 1],
+        `总距离: ${this.totalDistance.toFixed(2)}km`,
+      )
     }
     if (this.bProfile) {
       // 计算剖面点高度
@@ -198,10 +227,22 @@ export default class CreatePolyline {
     console.log('end:' + this.positions.length.toString())
     console.log(this.positions)
     console.log(this.polyline.controlPointsID.length)
-    //结束绘制进入编辑模式
+    //移除辅助实体
     this.polyline.removeControlPoints()
+    this.groundPointsID.forEach((value) => {
+      this.viewer.entities.removeById(value)
+    })
+    this.groundPointsID = []
+    this.vDashLinesID.forEach((value) => {
+      this.viewer.entities.removeById(value)
+    })
+    this.vDashLinesID = []
+
+    //结束绘制进入编辑模式
     const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
     editTool.start()
+    //刷新
+    this.viewer.scene.requestRender()
   }
   //   右击回调事件
   private rightClickCallBack = () => {

src/utils/map/draw/editGeometry.ts

@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-27 11:06:45
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-22 16:49:15
+ * @LastEditTime: 2024-04-24 16:52:23
  * @Description: 编辑几何体类。操作逻辑
  */
 import {
@@ -20,10 +20,17 @@ import {
   PolylineDashMaterialProperty,
   Color,
   Cartographic,
+  Cartesian2,
+  Ellipsoid,
 } from 'cesium'
 import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
-import { getClosestPoint, isOnLineSegment } from '@/utils/map/geocomputation'
+import {
+  getClosestPoint,
+  isOnLineSegment,
+  getElevation,
+} from '@/utils/map/geocomputation'
 import { PointEntity } from '@/utils/map/geometry/pointEntity'
+import { setMouseStyle, MouseType } from '@/utils/map/mouseStyle'
 export default class EditGeometry {
   viewer: Viewer
   editHandler: ScreenSpaceEventHandler
@@ -34,14 +41,21 @@ export default class EditGeometry {
   groundPointsID: string[] = [] //地表控制点ID数组
   groundDashLineID: string[] = [] //垂直辅助线ID数组
   groundDashLinesPosition: Cartesian3[][] = [] //垂直辅助线坐标数组
-  heightPoint: PointEntity | null = null //高度控制点
+  controlPoint: PointEntity | null = null //控制点
-  groundPoint: PointEntity | null = null //地表控制点
+  // groundPoint: PointEntity | null = null //地表控制点
   clickedGeometry: Entity | null = null
   clickDownPosition: Cartesian3 | null = null
+  clickScreenPosition: Cartesian2 | null = null
+  startHeightPointPosition: Cartesian3 | null = null //记录高度时的初始坐标值
+  firstClickScreenPosition: Cartesian2 | null = null //记录第一次单击的位置
+  heightScale: number = 1 //高度调节比例
   moveSelectedPoint: PointEntity | null = null
   bDrag: boolean = false //拖动标识
   bLongClick: boolean = false //长按标识
+  bDoubleClick: boolean = false //双击标识
+  nClick: number = 0 //单击次数
   clickTimeout: any
+  doubleClickTimeout: any
 
   constructor(viewer: Viewer, editGeometry: Entity) {
     this.viewer = viewer
@@ -55,8 +69,8 @@ export default class EditGeometry {
     this.positions.forEach((value, index) => {
       this.createPoint(value, index)
       //地表点
-      const groundPosition = this.calculateGroundPosition(value)
+      const groundPosition = this.modifyPositionZ(value)
-      this.createGroundPoint(value, index)
+      this.createGroundPoint(groundPosition, index)
       //垂直辅助线
       const ptArr = [value, groundPosition]
       this.groundDashLinesPosition[index] = ptArr
@@ -76,25 +90,12 @@ export default class EditGeometry {
       this.leftUpClickCallBack,
       ScreenSpaceEventType.LEFT_UP,
     )
+    this.editHandler.setInputAction(
+      this.leftDoubleClickCallBack,
+      ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+    )
   }
-  //左键点击回调
+
-  private leftClickCallBack = (
-    event: ScreenSpaceEventHandler.PositionedEvent,
-  ) => {
-    const pickedObject = this.viewer.scene.pick(event.position)
-    // 点中控制点
-    if (
-      defined(pickedObject) &&
-      defined(pickedObject.id) &&
-      pickedObject.id.point instanceof PointGraphics
-    ) {
-      console.log('You clicked a point entity.')
-      this.controlPoint = pickedObject.id
-      console.log(this.controlPoint?.subId)
-      this.bDrag = true
-      this.forbidDrawWorld(true)
-    }
-  }
   //左键按下回调
   private leftDownClickCallBack = (
     event: ScreenSpaceEventHandler.PositionedEvent,
@@ -111,29 +112,25 @@ export default class EditGeometry {
       // 记录点击的几何对象及位置
       this.clickedGeometry = pickedObject.id
       this.clickDownPosition = this.viewer.scene.pickPosition(event.position)
-      // // 判断是否同一实体
+      this.clickScreenPosition = event.position
-      // if (this.geometry != pickedObject.id) {
+
-      //   this.geometry = pickedObject.id
-      //   if (
-      //     pickedObject instanceof PolylineGraphics &&
-      //     pickedObject.positions
-      //   ) {
-      //     this.oldPositions = this.geometry!.polyline!.positions?.getValue(
-      //       this.viewer.clock.currentTime,
-      //     )
-      //   }
-      // }
       // 点中控制点
       if (pickedObject.id.point instanceof PointGraphics) {
-        console.log('You clicked a point entity.')
+        // console.log('You clicked a point entity.')
-        if (pickedObject.id.point.type === 0) {
+        this.controlPoint = pickedObject.id
-          console.log('You clicked a HeightPoint entity.')
+        //记录初始坐标，用于高度调节
-          this.heightPoint = pickedObject.id
+        this.startHeightPointPosition =
-        } else if (pickedObject.id.point.type === 1) {
+          this.positions[pickedObject.id.subId].clone()
-          console.log('You clicked a GroundPoint entity.')
+        //计算高度缩放比例
-          this.groundPoint = pickedObject.id
+        this.heightScale = this.getHeightPerPixel(this.startHeightPointPosition)
-        }
+        // console.log(this.controlPoint)
-        // console.log(this.heightPoint?.subId)
+        // if (pickedObject.id.type === 0) {
+        //   console.log('You clicked a HeightPoint entity.')
+        //   // this.controlPoint = pickedObject.id
+        // } else if (pickedObject.id.type === 1) {
+        //   console.log('You clicked a GroundPoint entity.')
+        //   // this.groundPoint = pickedObject.id
+        // }
         this.bDrag = true
         this.forbidDrawWorld(true)
       }
@@ -142,43 +139,29 @@ export default class EditGeometry {
   //移动回调
   private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
     const pickedObject = this.viewer.scene.pick(event.endPosition)
-    // 悬停控制点放大
+    // 出发不同编辑内容修改鼠标形状
-    if (
+    this.changeSelectedStyle(pickedObject)
-      pickedObject &&
-      pickedObject.id &&
-      pickedObject.id.point instanceof PointGraphics
-    ) {
-      if (pickedObject.id.point instanceof PointGraphics) {
-        if (
-          this.moveSelectedPoint == null ||
-          this.moveSelectedPoint.id !== pickedObject.id.id
-        ) {
-          this.moveSelectedPoint = pickedObject.id
-          this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
-            this.moveSelectedPoint!.options.pixelSize! + 1,
-          )
-          // console.log(this.moveSelectedPoint)
-        }
-        this.viewer.scene.requestRender() //刷新
-      }
-    } else {
-      // 离开控制点恢复原始大小
-      if (this.moveSelectedPoint) {
-        this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
-          this.moveSelectedPoint!.options.pixelSize! - 1,
-        )
-        this.moveSelectedPoint = null
-        this.viewer.scene.requestRender() //刷新
-      }
-    }
 
-    if (!this.heightPoint || !this.bDrag) return
+    if (!this.controlPoint || !this.bDrag) return
-    console.log('************************left down')
+    // console.log('************************left down')
     const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
     if (cartesian3) {
-      // 修改节点坐标
+      //地表点
-      this.modifyPoint(cartesian3, this.heightPoint.subId)
+      if (this.controlPoint.type === 1) {
-      // this.geometry?.modifyPoint(cartesian3, this.controlPoint.subId)
+        // 修改节点xy坐标
+        this.modifyPoint(cartesian3, this.controlPoint.subId)
+      } else if (this.controlPoint.type === 0) {
+        //计算屏幕y坐标偏移量
+        const altValue = this.clickScreenPosition!.y - event.endPosition.y
+        // console.log('************moveYValue:' + altValue.toString())
+        //调节高度
+        this.modifyAltitude(
+          this.startHeightPointPosition!,
+          altValue * this.heightScale,
+          this.controlPoint.subId,
+        )
+      }
+
       this.viewer.scene.requestRender() //刷新
     }
   }
@@ -187,12 +170,26 @@ export default class EditGeometry {
     event: ScreenSpaceEventHandler.PositionedEvent,
   ) => {
     clearTimeout(this.clickTimeout)
+    // 单击控制点结束
+    if (
+      !this.bLongClick &&
+      this.clickedGeometry?.point instanceof PointGraphics
+    ) {
+      if (this.nClick === 0) this.firstClickScreenPosition = event.position
+      //记录单击次数
+      this.nClick++
+      //200ms内没有再次单击，次数清0
+      this.doubleClickTimeout = setTimeout(() => {
+        this.nClick = 0
+      }, 200)
+    }
+
     // 单击添加点
     if (
       !this.bLongClick &&
       this.clickedGeometry?.polyline instanceof PolylineGraphics
     ) {
-      console.log('点中线，加点')
+      // console.log('点中线，加点')
       this.addPoint()
     }
     this.bLongClick = false
@@ -203,7 +200,17 @@ export default class EditGeometry {
   private leftDoubleClickCallBack = (
     event: ScreenSpaceEventHandler.PositionedEvent,
   ) => {
-    // this.geometry.
+    // console.log('***********Double Clicked!')
+    //双击移除点
+    if (
+      this.nClick === 2 &&
+      Cartesian2.distance(this.firstClickScreenPosition!, event.position) <= 3
+    ) {
+      // console.log('***********双击移除点!')
+      //移除点
+      this.removePoint(this.controlPoint!.subId)
+      this.viewer.scene.requestRender() //刷新
+    }
   }
   // Viewer操作控制
   forbidDrawWorld(isForbid: boolean) {
@@ -229,37 +236,120 @@ export default class EditGeometry {
           this.clickDownPosition!,
         )
         this.positions.splice(i + 1, 0, pt)
-        // 新建控制点
+        // 新建节点控制点
         this.createPoint(pt, i + 1)
-        // 修改控制点的subid
+        // 新建地表控制点
+        const groundPos = this.modifyPositionZ(pt) //计算地表点坐标
+        this.createGroundPoint(groundPos, i + 1)
+        // 修改控制点的subid（往后移）
         for (let index = i + 2; index < this.controlPointsID.length; ++index) {
+          //节点控制点
           const point = this.geometry.entityCollection.getById(
             this.controlPointsID[index],
           ) as PointEntity
           point!.subId = point!.subId + 1
+          //地表控制点
+          const groundPoint = this.geometry.entityCollection.getById(
+            this.groundPointsID[index],
+          ) as PointEntity
+          groundPoint!.subId = groundPoint!.subId + 1
         }
+        // 新建垂直辅助线
+        const ptArr = [pt, groundPos]
+        this.groundDashLinesPosition.splice(i + 1, 0, ptArr)
+        this.createGroundDashLine(this.groundDashLinesPosition[i + 1], i + 1)
+
         return
       }
     }
   }
+
+  /**
+   * 删除一个节点
+   * @param index 移除点号
+   */
+  removePoint(index: number) {
+    this.positions.splice(index, 1)
+    //移除辅助实体
+    this.geometry.entityCollection.removeById(this.controlPointsID[index])
+    this.geometry.entityCollection.removeById(this.groundPointsID[index])
+    this.geometry.entityCollection.removeById(this.groundDashLineID[index])
+    //删除实体ID记录
+    this.controlPointsID.splice(index, 1)
+    this.groundPointsID.splice(index, 1)
+    this.groundDashLineID.splice(index, 1)
+    this.groundDashLinesPosition.splice(index, 1)
+    //修改控制点号
+    for (let i = index; i < this.controlPointsID.length; ++i) {
+      //节点控制点
+      const point = this.geometry.entityCollection.getById(
+        this.controlPointsID[i],
+      ) as PointEntity
+      point!.subId = point!.subId - 1
+      //地表控制点
+      const groundPoint = this.geometry.entityCollection.getById(
+        this.groundPointsID[i],
+      ) as PointEntity
+      groundPoint!.subId = groundPoint!.subId - 1
+    }
+  }
+
   /**
    * 修改某点的坐标
    * @param pos 修改点的坐标
    * @param index 修改点的位置
    */
   modifyPoint(pos: Cartesian3, index: number) {
+    //计算新坐标
+    const newHeightPos = this.calculateHeightPosition(
+      this.positions[index],
+      pos,
+    )
     // 修改线坐标
-    this.positions.splice(index, 1, pos)
+    this.positions.splice(index, 1, newHeightPos)
-    // 修改控制点坐标
+    // 修改高度控制点坐标
-    this.heightPoint!.position = new ConstantPositionProperty(pos)
+    const heightPt = this.geometry.entityCollection.getById(
+      this.controlPointsID[index],
+    )
+    heightPt!.position = new ConstantPositionProperty(newHeightPos)
+    // 修改地表控制点坐标
+    const groundPt = this.geometry.entityCollection.getById(
+      this.groundPointsID[index],
+    )
+    groundPt!.position = new ConstantPositionProperty(pos)
+    //修改垂直辅助线坐标
+    this.groundDashLinesPosition[index][0] = newHeightPos
+    this.groundDashLinesPosition[index][1] = pos
   }
+
   /**
-   * 新加一个节点
+   * 调节航点高度
+   * @param oldPosition 修改前的笛卡尔坐标
+   * @param increaseAltitude 高度增量
+   * @param index 要修改的点号
+   */
+  modifyAltitude(
+    oldPosition: Cartesian3,
+    increaseAltitude: number,
+    index: number,
+  ) {
+    const heightPos = this.modifyPositionZ(oldPosition, increaseAltitude)
+    this.positions.splice(index, 1, heightPos)
+    this.groundDashLinesPosition[index][0] = heightPos
+    const heightPt = this.geometry.entityCollection.getById(
+      this.controlPointsID[index],
+    )
+    heightPt!.position = new ConstantPositionProperty(heightPos)
+  }
+
+  /**
+   * 创建一个节点
    * @param pos 点的坐标
    * @param index 插入的位置,0起步
    */
   createPoint(pos: Cartesian3, index: number) {
     // if (this.geometry) {
+    // 高度控制点
     const point = new PointEntity(pos)
     point.parent = this.geometry
     point.subId = index
@@ -267,8 +357,9 @@ export default class EditGeometry {
     this.controlPointsID.splice(index, 0, point.id)
     // }
   }
+
   /**
-   * 新加一个地表控制点
+   * 创建一个地表控制点
    * @param pos 点的坐标
    * @param index 插入的位置,0起步
    */
@@ -301,14 +392,99 @@ export default class EditGeometry {
     this.groundDashLineID.splice(index, 0, vDashLine.id)
     this.geometry.entityCollection.add(vDashLine)
   }
-  //获取地表坐标
+  /**
-  calculateGroundPosition(pos: Cartesian3) {
+   * 获取更改高度值的坐标
+   * @param pos 要修改高度的笛卡尔坐标
+   * @param increaseAltitude 可选高度增量值，未选择则默认地表
+   * @returns 修改后的坐标
+   */
+  modifyPositionZ(pos: Cartesian3, increaseAltitude?: number) {
     // 输入的当前点的笛卡尔坐标
     const cartographic = Cartographic.fromCartesian(pos)
-    // 经度、纬度不变，将地面高度加上需要上升的距离, 假设垂直升高1000米
+    // 经度、纬度不变，将地面高度加上需要上升的距离
-    cartographic.height -= cartographic.height
+    if (increaseAltitude != undefined) {
+      cartographic.height += increaseAltitude
+    } else {
+      const height = getElevation(this.viewer, pos)
+      cartographic.height = height
+    }
 
     // 最后使用Cesium.Cartographic.toCartesian将刚才得到的Cartographic对象转换为笛卡尔坐标
     return Cartographic.toCartesian(cartographic)
   }
+  /**
+   * 获取移动后的高度坐标
+   * @param heightPos 要修改xy的笛卡尔坐标
+   * @param groundPos 目标位置的笛卡尔坐标
+   * @returns 修改xy位置的新坐标
+   */
+  calculateHeightPosition(heightPos: Cartesian3, groundPos: Cartesian3) {
+    const groundCartographic = Cartographic.fromCartesian(groundPos)
+    const heightCartographic = Cartographic.fromCartesian(heightPos)
+    return Cartesian3.fromRadians(
+      groundCartographic.longitude,
+      groundCartographic.latitude,
+      heightCartographic.height,
+    )
+  }
+  /**
+   * 修改高度
+   * @param heightPos 要修改高度的坐标
+   * @param addAltValue 高度增量值
+   * @returns 返回修改高度后的坐标
+   */
+  calculateHeightPositionZ(heightPos: Cartesian3, addAltValue: number) {
+    const heightCartographic = Cartographic.fromCartesian(heightPos)
+    heightCartographic.height += addAltValue
+    return Cartographic.toCartesian(heightCartographic)
+  }
+  // 计算一像素对应的高度（有待优化）
+  getHeightPerPixel(pos: Cartesian3) {
+    const screenPos0 = this.viewer.scene.cartesianToCanvasCoordinates(pos)
+    const screenPos1 = this.viewer.scene.cartesianToCanvasCoordinates(
+      this.modifyPositionZ(pos, 1),
+    )
+    const heightDifference = 1 / Math.abs(screenPos0.y - screenPos1.y)
+    // console.log('*****像素高度：' + heightDifference.toString())
+    return heightDifference
+  }
+
+  //设置移动靠近编辑实体对象的样式变化
+  changeSelectedStyle(pickedObject: any) {
+    // console.log(pickedObject)
+    if (pickedObject && pickedObject.id) {
+      if (pickedObject.id.point instanceof PointGraphics) {
+        if (
+          this.moveSelectedPoint == null ||
+          this.moveSelectedPoint.id !== pickedObject.id.id
+        ) {
+          this.moveSelectedPoint = pickedObject.id as PointEntity
+          this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
+            this.moveSelectedPoint!.options.pixelSize! + 1,
+          )
+          // console.log('**************Selected Point')
+          //设置鼠标形状
+          if (this.moveSelectedPoint.type === 0) {
+            setMouseStyle(this.viewer, MouseType.NSMove)
+          } else if (this.moveSelectedPoint.type === 1) {
+            setMouseStyle(this.viewer, MouseType.Move)
+          }
+        }
+      } else if (pickedObject.id.polyline instanceof PolylineGraphics) {
+        setMouseStyle(this.viewer, MouseType.AddPoint)
+      }
+      this.viewer.scene.requestRender() //刷新
+    } else {
+      // 离开控制点恢复原始大小
+      if (this.moveSelectedPoint) {
+        this.moveSelectedPoint.point!.pixelSize = new ConstantProperty(
+          this.moveSelectedPoint!.options.pixelSize! - 1,
+        )
+        //设置鼠标形状
+        setMouseStyle(this.viewer, MouseType.Default)
+        this.moveSelectedPoint = null
+        this.viewer.scene.requestRender() //刷新
+      }
+    }
+  }
 }

src/utils/map/geocomputation.ts

@@ -5,8 +5,16 @@
  * @LastEditTime: 2024-04-01 14:05:43
  * @Description: 地理计算
  */
-import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms, Viewer} from 'cesium'
+import {
-import {Angle} from "@/utils/map/angle.ts";
+  Cartesian3,
+  Cartographic,
+  EllipsoidGeodesic,
+  Math as Cesium_Math,
+  Matrix4,
+  Transforms,
+  Viewer,
+} from 'cesium'
+import { Angle } from '@/utils/map/angle.ts'
 
 /**
  * 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
@@ -86,16 +94,14 @@ function isOnLineSegment(
   */
 }
 
-
 /**
  * 计算距离，单位千米
  * @param p1 起点
  * @param p2 终点
  */
-function getDistance(p1:Cartesian3, p2: Cartesian3): number
+function getDistance(p1: Cartesian3, p2: Cartesian3): number {
-{
+  let point1cartographic = Cartographic.fromCartesian(p1)
-  let point1cartographic = Cartographic.fromCartesian(p1);
+  let point2cartographic = Cartographic.fromCartesian(p2)
-  let point2cartographic = Cartographic.fromCartesian(p2);
   /**根据经纬度计算出距离**/
   let geodesic = new EllipsoidGeodesic()
   geodesic.setEndPoints(point1cartographic, point2cartographic)
@@ -108,20 +114,30 @@ function getDistance(p1:Cartesian3, p2: Cartesian3): number
  * @param p2 终点
  * @param digits 保留小数位数，默认保留1位小数
  */
-function getAzimuth(p1:Cartesian3, p2: Cartesian3, digits=1): string
+function getAzimuth(p1: Cartesian3, p2: Cartesian3, digits = 1): string {
-{
   // 建立局部坐标系：北为y，东为x，p1为原点
   const localMatrix = Transforms.eastNorthUpToFixedFrame(p1)
   //求世界坐标到局部坐标的变换矩阵
   const worldToLocalMatrix = Matrix4.inverse(localMatrix, new Matrix4())
   //p1在局部坐标系的位置，即局部坐标原点
-  const localPosition1 = Matrix4.multiplyByPoint(worldToLocalMatrix, p1, new Cartesian3())
+  const localPosition1 = Matrix4.multiplyByPoint(
+    worldToLocalMatrix,
+    p1,
+    new Cartesian3(),
+  )
   //p2在局部坐标系的位置
-  const localPosition2 = Matrix4.multiplyByPoint(worldToLocalMatrix, p2, new Cartesian3())
+  const localPosition2 = Matrix4.multiplyByPoint(
+    worldToLocalMatrix,
+    p2,
+    new Cartesian3(),
+  )
   //弧度
-  const angle = Math.atan2(localPosition2.x - localPosition1.x, localPosition2.y - localPosition1.y)
+  const angle = Math.atan2(
+    localPosition2.x - localPosition1.x,
+    localPosition2.y - localPosition1.y,
+  )
   //转为角度
-  let theta = angle * (180 / Math.PI);
+  let theta = angle * (180 / Math.PI)
   theta = theta < 0 ? theta + 360 : theta
   return theta.toFixed(digits)
 }
@@ -146,20 +162,29 @@ function getPolygonArea(vertexs: Cartesian3[]) {
  * @param viewer 地图Viewer
  * @param pos 坐标点 Cartographic|Cartesian3|[lon,lat]
  */
-export function getElevation(viewer: Viewer, pos: Cartographic|Cartesian3|number[]){
+export function getElevation(
+  viewer: Viewer,
+  pos: Cartographic | Cartesian3 | number[],
+) {
   let cartographic = undefined
   if (pos instanceof Array) {
-     cartographic = Cartographic.fromDegrees(Angle.degree2rad(pos[0]), Angle.degree2rad(pos[1]))
+    cartographic = Cartographic.fromDegrees(
-    return viewer.scene.globe.getHeight(cartographic)??-99.2024
+      Angle.degree2rad(pos[0]),
-  }
+      Angle.degree2rad(pos[1]),
-  else if(pos instanceof Cartesian3){
+    )
+    return viewer.scene.globe.getHeight(cartographic) ?? -999
+  } else if (pos instanceof Cartesian3) {
     cartographic = Cartographic.fromCartesian(pos)
-    return viewer.scene.globe.getHeight(cartographic)??-99.2024
+    return viewer.scene.globe.getHeight(cartographic) ?? -999
-  }
+  } else {
-  else{
+    return viewer.scene.globe.getHeight(pos) ?? -999
-    return viewer.scene.globe.getHeight(pos)??-99.2024
   }
 }
 
-
+export {
-export { getClosestPoint, isOnLineSegment, getDistance, getAzimuth, getPolygonArea }
+  getClosestPoint,
+  isOnLineSegment,
+  getDistance,
+  getAzimuth,
+  getPolygonArea,
+}

src/utils/map/mouseStyle.ts

@@ -0,0 +1,23 @@
+/*
+ * @Author: cbwu 504-wuchengbo@htsdfp.com
+ * @Date: 2024-04-24 15:06:54
+ * @LastEditors: cbwu
+ * @LastEditTime: 2024-04-24 15:06:58
+ * @Description: 鼠标形状
+ */
+import { Viewer } from 'cesium'
+enum MouseType {
+  Default = 'Default', //默认箭头
+  Move = 'move', //移动
+  NSMove = 'n-resize', //上下移动
+  Pointer = 'Pointer', //手指
+  AddPoint = 'copy',
+  Grab = 'grab',
+  Drag = 'grabbing', //
+}
+function setMouseStyle(viewer: Viewer, type: string = 'Default') {
+  const canvas = viewer.canvas
+  canvas.style.cursor = type
+}
+
+export { setMouseStyle, MouseType }