feat: 绘制航线新增垂直辅助线。

src/components/map/SceneViewer.vue

@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-07 14:15:35
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-15 16:00:27
+ * @LastEditTime: 2024-04-16 10:01:28
  * @Description:
 -->
 <template>
@@ -67,12 +67,12 @@ onMounted(() => {
 
   // 挂载在window，供全局组件共享
   window.viewer = viewer
-  inputGeoJson(viewer)
+  // inputGeoJson(viewer)
   //绘制多边形
-  // const drawPolyline = new CreatePolyline(viewer)
+  const drawPolyline = new CreatePolyline(viewer)
-  // drawPolyline.start()
+  drawPolyline.start()
-  const drawPolygon = new DrawPolygon(viewer)
+  // const drawPolygon = new DrawPolygon(viewer)
-  drawPolygon.start()
+  // drawPolygon.start()
 })
 </script>
 

src/types/entityoptions.ts

@@ -2,10 +2,10 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-04-13 10:36:06
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 11:14:53
+ * @LastEditTime: 2024-04-16 13:47:55
  * @Description:
  */
-import { Color, Cartesian2 } from 'cesium'
+import { Color, Cartesian2, HeightReference } from 'cesium'
 export interface EntityOptions {
   id?: string
   name?: string
@@ -23,4 +23,5 @@ export interface EntityOptions {
   image?: string //图片url
   imageWidth?: number //图片宽
   imageHeight?: number //图片高
+  heightReference?: HeightReference
 }

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-13 10:46:58
+ * @LastEditTime: 2024-04-16 14:25:43
  * @Description: 绘制Polyline类
  */
 import {
@@ -14,8 +14,12 @@ import {
   Entity,
   CallbackProperty,
   PolylineDashMaterialProperty,
+  HeightReference,
 } from 'cesium'
-import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
+import {
+  cartesian2ToCartesian3,
+  cartesian3ToWGS84,
+} from '@/utils/map/coordinate'
 // import { PointEntity, PolylineEntity } from '@/utils/map/geometry'
 import { PolylineEntity } from '../geometry/polylineEntity'
 import { PointEntity } from '@/utils/map/geometry/pointEntity'
@@ -46,6 +50,8 @@ export default class CreatePolyline {
   bMove: boolean = false
   bLongClick: boolean = false
   clickTimeout: any
+  altitudeOffset: number = 20 //相对高度
+  vDashLinePosition: Cartesian3[][] = [] //垂直辅助线坐标数组
   // layer: CustomDataSource
   defaultStyle: EntityOptions = {
     // id: 'Polyline' + String(PolylineEntity.id),
@@ -102,11 +108,11 @@ export default class CreatePolyline {
         pickedObject.id.id ===
         this.polyline?.controlPointsID[this.positions.length - 1]
       ) {
+        console.log('********click the same point')
         return
-        // console.log('********click the same point')
       }
     }
-    const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
+    let cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
     if (cartesian3 != undefined) {
       if (!this.polyline) {
         this.polyline = new PolylineEntity(this.positions)
@@ -114,8 +120,24 @@ export default class CreatePolyline {
         this.viewer.entities.add(this.dashLine)
         this.viewer.dataSources.add(this.polyline)
       }
+      const oldPosition = cartesian3
+      //计算高度偏移后的新坐标
+      cartesian3 = this.calculateAltitudeOffsetPosition(
+        cartesian3,
+        this.altitudeOffset,
+      )
       this.polyline.addPoint(cartesian3)
       this.trackingLinePositions[0] = cartesian3
+      //垂直辅助线
+      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 groundControlPoint = new PointEntity(this.vDashLinePosition[n][0])
+      this.viewer.entities.add(groundControlPoint)
       this.bMove = true
 
       this.viewer.scene.requestRender() //刷新
@@ -124,8 +146,13 @@ export default class CreatePolyline {
   // 移动回调事件
   private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
     if (this.bMove) {
-      const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
+      let cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
       if (cartesian3 != undefined) {
+        //计算高度偏移后的新坐标
+        cartesian3 = this.calculateAltitudeOffsetPosition(
+          cartesian3,
+          this.altitudeOffset,
+        )
         //更新追踪线坐标
         this.trackingLinePositions[1] = cartesian3
         if (!this.trackingLine) {
@@ -159,6 +186,7 @@ export default class CreatePolyline {
     this.clearEvent()
     console.log('end:' + this.positions.length.toString())
     console.log(this.positions)
+    console.log(this.polyline.controlPointsID.length)
     //结束绘制进入编辑模式
     this.polyline.removeControlPoints()
     const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
@@ -178,8 +206,21 @@ export default class CreatePolyline {
     this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
     this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
   }
+  //计算高度偏移后的坐标
+  calculateAltitudeOffsetPosition(
+    oldPosition: Cartesian3,
+    altitudeOffset: number,
+  ): Cartesian3 {
+    const newGeoPosition = cartesian3ToWGS84(oldPosition)
+    newGeoPosition[2] = newGeoPosition[2] + altitudeOffset
+    return Cartesian3.fromDegrees(
+      newGeoPosition[0],
+      newGeoPosition[1],
+      newGeoPosition[2],
+    )
+  }
   //创建追踪线
-  createTrackingLine(positions: Cartesian3[]) {
+  createTrackingLine(positions: Cartesian3[], color: Color = Color.GREEN) {
     return new Entity({
       polyline: {
         positions: new CallbackProperty(() => {
@@ -187,10 +228,10 @@ export default class CreatePolyline {
         }, false),
         width: 2,
         material: new PolylineDashMaterialProperty({
-          color: Color.GREEN,
+          color: color,
-          dashLength: 15, //短划线长度
+          dashLength: 12, //短划线长度
         }),
-        clampToGround: true,
+        // clampToGround: true,
       },
     })
   }

src/utils/map/geometry/pointEntity.ts

@@ -2,10 +2,17 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-28 16:35:33
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 11:15:48
+ * @LastEditTime: 2024-04-16 13:57:15
  * @Description: 封装的点几何类
  */
-import { Entity, Cartesian3, Color, PointGraphics, LabelGraphics } from 'cesium'
+import {
+  Entity,
+  Cartesian3,
+  Color,
+  PointGraphics,
+  LabelGraphics,
+  HeightReference,
+} from 'cesium'
 import { EntityOptions } from '@/types/entityoptions'
 // 点
 class PointEntity extends Entity {
@@ -19,6 +26,7 @@ class PointEntity extends Entity {
     color: Color.WHITE,
     outlineColor: Color.GREEN,
     outlineWidth: 0,
+    // heightReference: HeightReference.NONE,
   }
   constructor(position: Cartesian3, options?: EntityOptions) {
     super({
@@ -31,6 +39,8 @@ class PointEntity extends Entity {
       color: this.options.color,
       outlineColor: this.options.outlineColor,
       outlineWidth: this.options.outlineWidth,
+      disableDepthTestDistance: 50000,
+      // heightReference: this.options.heightReference,
     })
     // 标注对象
     this.label = new LabelGraphics({

src/utils/map/geometry/polylineEntity.ts

@@ -2,10 +2,16 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-28 16:49:02
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 10:45:17
+ * @LastEditTime: 2024-04-16 11:12:08
  * @Description: 封装的Polyline类
  */
-import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
+import {
+  Entity,
+  Cartesian3,
+  Color,
+  CallbackProperty,
+  PolylineDashMaterialProperty,
+} from 'cesium'
 import { BaseGeometry } from './baseGeometry'
 import { EntityOptions } from '@/types/entityoptions'
 export class PolylineEntity extends BaseGeometry {
@@ -35,6 +41,10 @@ export class PolylineEntity extends BaseGeometry {
         show: this.options.show,
         width: this.options.width,
         material: this.options.color,
+        // depthFailMaterial: new PolylineDashMaterialProperty({
+        //   color: Color.GREEN,
+        //   dashLength: 15, //短划线长度
+        // }),
       },
     })
     this.entities.add(this.geometry)

src/utils/map/sceneViewer.ts

@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-13 09:32:21
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 10:49:06
+ * @LastEditTime: 2024-04-16 10:58:25
  * @Description:
  */
 // Viewer初始化
@@ -53,7 +53,7 @@ function initViewer(container: string | Element): Viewer {
   const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
   creditContainer.style.display = 'none'
   // 开启深度检测
-  viewer.scene.globe.depthTestAgainstTerrain = false
+  viewer.scene.globe.depthTestAgainstTerrain = true
   // 水雾特效
   viewer.scene.globe.showGroundAtmosphere = true
   // 设置更高的缩放惯性以使缩放操作更平滑