feat: 地表辅助线(待完善)

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 11:23:47
+ * @LastEditTime: 2024-04-22 16:19:27
  * @Description: 绘制Polyline类
  */
 import {

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-13 10:47:09
+ * @LastEditTime: 2024-04-22 16:49:15
  * @Description: 编辑几何体类。操作逻辑
  */
 import {
@@ -16,6 +16,10 @@ import {
   Entity,
   ConstantPositionProperty,
   defined,
+  CallbackProperty,
+  PolylineDashMaterialProperty,
+  Color,
+  Cartographic,
 } from 'cesium'
 import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
 import { getClosestPoint, isOnLineSegment } from '@/utils/map/geocomputation'
@@ -26,8 +30,12 @@ export default class EditGeometry {
   geometry: Entity //要编辑的几何对象
   oldPositions: Cartesian3[] = [] //存储未修改前的坐标
   positions: Cartesian3[] = [] //要编辑的几个对象坐标
-  controlPointsID: string[] = []
+  controlPointsID: string[] = [] //节点控制点ID数组
-  controlPoint: PointEntity | null = null
+  groundPointsID: string[] = [] //地表控制点ID数组
+  groundDashLineID: string[] = [] //垂直辅助线ID数组
+  groundDashLinesPosition: Cartesian3[][] = [] //垂直辅助线坐标数组
+  heightPoint: PointEntity | null = null //高度控制点
+  groundPoint: PointEntity | null = null //地表控制点
   clickedGeometry: Entity | null = null
   clickDownPosition: Cartesian3 | null = null
   moveSelectedPoint: PointEntity | null = null
@@ -46,6 +54,13 @@ export default class EditGeometry {
     // 创建控制点
     this.positions.forEach((value, index) => {
       this.createPoint(value, index)
+      //地表点
+      const groundPosition = this.calculateGroundPosition(value)
+      this.createGroundPoint(value, index)
+      //垂直辅助线
+      const ptArr = [value, groundPosition]
+      this.groundDashLinesPosition[index] = ptArr
+      this.createGroundDashLine(this.groundDashLinesPosition[index], index)
     })
   }
   public start() {
@@ -86,7 +101,7 @@ export default class EditGeometry {
   ) => {
     // 清除可能已经设置的单击定时器
     clearTimeout(this.clickTimeout)
-    // 判断是不是长按
+    // 判断是不是长按(100ms)
     this.clickTimeout = setTimeout(() => {
       this.bLongClick = true
     }, 100)
@@ -111,8 +126,14 @@ export default class EditGeometry {
       // 点中控制点
       if (pickedObject.id.point instanceof PointGraphics) {
         console.log('You clicked a point entity.')
-        this.controlPoint = pickedObject.id
+        if (pickedObject.id.point.type === 0) {
-        console.log(this.controlPoint?.subId)
+          console.log('You clicked a HeightPoint entity.')
+          this.heightPoint = pickedObject.id
+        } else if (pickedObject.id.point.type === 1) {
+          console.log('You clicked a GroundPoint entity.')
+          this.groundPoint = pickedObject.id
+        }
+        // console.log(this.heightPoint?.subId)
         this.bDrag = true
         this.forbidDrawWorld(true)
       }
@@ -134,7 +155,7 @@ export default class EditGeometry {
         ) {
           this.moveSelectedPoint = pickedObject.id
           this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
-            this.moveSelectedPoint!.options.pixelSize! + 2,
+            this.moveSelectedPoint!.options.pixelSize! + 1,
           )
           // console.log(this.moveSelectedPoint)
         }
@@ -144,19 +165,19 @@ export default class EditGeometry {
       // 离开控制点恢复原始大小
       if (this.moveSelectedPoint) {
         this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
-          this.moveSelectedPoint!.options.pixelSize! - 2,
+          this.moveSelectedPoint!.options.pixelSize! - 1,
         )
         this.moveSelectedPoint = null
         this.viewer.scene.requestRender() //刷新
       }
     }
 
-    if (!this.controlPoint || !this.bDrag) return
+    if (!this.heightPoint || !this.bDrag) return
     console.log('************************left down')
     const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
     if (cartesian3) {
       // 修改节点坐标
-      this.modifyPoint(cartesian3, this.controlPoint.subId)
+      this.modifyPoint(cartesian3, this.heightPoint.subId)
       // this.geometry?.modifyPoint(cartesian3, this.controlPoint.subId)
       this.viewer.scene.requestRender() //刷新
     }
@@ -230,10 +251,10 @@ export default class EditGeometry {
     // 修改线坐标
     this.positions.splice(index, 1, pos)
     // 修改控制点坐标
-    this.controlPoint!.position = new ConstantPositionProperty(pos)
+    this.heightPoint!.position = new ConstantPositionProperty(pos)
   }
   /**
-   * 新加一个点
+   * 新加一个节点
    * @param pos 点的坐标
    * @param index 插入的位置,0起步
    */
@@ -246,4 +267,48 @@ export default class EditGeometry {
     this.controlPointsID.splice(index, 0, point.id)
     // }
   }
+  /**
+   * 新加一个地表控制点
+   * @param pos 点的坐标
+   * @param index 插入的位置,0起步
+   */
+  createGroundPoint(pos: Cartesian3, index: number) {
+    const point = new PointEntity(pos)
+    point.parent = this.geometry
+    point.subId = index
+    point.type = 1
+    this.geometry.entityCollection.add(point)
+    this.groundPointsID.splice(index, 0, point.id)
+  }
+  /**
+   * 新加一个垂直地表的辅助线
+   * @param pos 直线的坐标
+   * @param index 插入的位置,0起步
+   */
+  createGroundDashLine(positions: Cartesian3[], index: number) {
+    const vDashLine = new Entity({
+      polyline: {
+        positions: new CallbackProperty(() => {
+          return positions
+        }, false),
+        width: 2,
+        material: new PolylineDashMaterialProperty({
+          color: Color.WHITE,
+          dashLength: 12, //短划线长度
+        }),
+      },
+    })
+    this.groundDashLineID.splice(index, 0, vDashLine.id)
+    this.geometry.entityCollection.add(vDashLine)
+  }
+  //获取地表坐标
+  calculateGroundPosition(pos: Cartesian3) {
+    // 输入的当前点的笛卡尔坐标
+    const cartographic = Cartographic.fromCartesian(pos)
+    // 经度、纬度不变，将地面高度加上需要上升的距离, 假设垂直升高1000米
+    cartographic.height -= cartographic.height
+
+    // 最后使用Cesium.Cartographic.toCartesian将刚才得到的Cartographic对象转换为笛卡尔坐标
+    return Cartographic.toCartesian(cartographic)
+  }
 }

src/utils/map/geometry/pointEntity.ts

@@ -18,6 +18,7 @@ import { EntityOptions } from '@/types/entityoptions'
 class PointEntity extends Entity {
   static ID: number = 0
   public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
+  public type: number = 0 //用于判断是线上节点(0)还是地表控制点(1)
   options: EntityOptions = {
     id: 'Point' + String(PointEntity.ID),
     name: 'Point' + String(PointEntity.ID + 1),