feat: 新增绘制标记点工具类。

src/App.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import SceneViewer from './components/map/SceneViewer.vue'
-import BottomBar from "@/components/map/BottomBar.vue";
+import BottomBar from '@/components/map/BottomBar.vue'
 </script>
 
 <style>

src/components/map/BottomBar.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { Angle } from '@/utils/map/angle.ts'
 import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium'
-import {onMounted, ref} from "vue";
+import { onMounted, ref } from 'vue'
 let nowLatStr: string, nowLonStr: string
 let lonlatStr = ref('')
 let isDecimal = ref(true)
@@ -19,24 +19,31 @@ onMounted(()=>{
     //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
     let position: any = _viewer.scene.pickPosition(e.endPosition)
     if (!position) {
-      position = _viewer.scene.camera.pickEllipsoid(e.startPosition, _viewer.scene.globe.ellipsoid)
+      position = _viewer.scene.camera.pickEllipsoid(
+        e.startPosition,
+        _viewer.scene.globe.ellipsoid,
+      )
     }
     if (position) {
       //将笛卡尔三维坐标转为地图坐标（弧度）
-      let cartographic =  _viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
+      let cartographic =
+        _viewer.scene.globe.ellipsoid.cartesianToCartographic(position)
       try {
         // 将地图坐标（弧度）转为十进制的度数
         nowLatStr = Math.toDegrees(cartographic.latitude).toFixed(7) // 纬度
         nowLonStr = Math.toDegrees(cartographic.longitude).toFixed(7) // 经度
-        let camera_alt = (_viewer.camera.positionCartographic.height / 1000) // 视高
+        let camera_alt = _viewer.camera.positionCartographic.height / 1000 // 视高
         // 相机低于250、俯仰角小于-80度时才计算海拔高度（否则误差大）
-        let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80)
+        let needElevation: boolean =
-        let elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)?? '' : '' // 海拔
+          camera_alt < 250 && _viewer.camera.pitch < -(Math.PI / 180) * 80
+        let elevStr = needElevation
+          ? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2) ?? ''
+          : '' // 海拔
 
-        if(isDecimal.value) {   //如果是十进制度
+        if (isDecimal.value) {
+          //如果是十进制度
           lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)：${elevStr}`
-        }
+        } else {
-        else {
           lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)：${elevStr}`
         }
       } catch (e) {}
@@ -47,10 +54,12 @@ onMounted(()=>{
 function lonlatClick() {
   let elevStr = lonlatStr.value.split('海拔')[1]
   if (isDecimal.value) {
-    lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` + elevStr
+    lonlatStr.value =
-  }
+      `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` +
-  else {
+      elevStr
-    lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
+  } else {
+    lonlatStr.value =
+      `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
   }
   isDecimal.value = !isDecimal.value
 }
@@ -84,8 +93,8 @@ function lonlatClick() {
   margin-left: 2rem;
   background: none;
   border: none;
-  color: #FFFFFF;
+  color: #ffffff;
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 #lonlatText:hover {
   cursor: pointer;

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-10 11:29:48
+ * @LastEditTime: 2024-04-10 13:59:42
  * @Description:
 -->
 <template>

src/utils/map/TDTProvider.ts

@@ -11,7 +11,7 @@ import {
   GeographicTilingScheme,
   WebMercatorTilingScheme,
 } from 'cesium'
-import axios from "axios"
+import axios from 'axios'
 
 //地图服务枚举类型：_c为墨卡托投影，_w为经纬度投影
 enum TDTLayerType {

src/utils/map/angle.ts

@@ -8,23 +8,32 @@ class Angle {
    */
   static DecimalDegree2DMS(decimal_var: number | string) {
     if (!decimal_var.toString().includes('.'))
-            return decimal_var.toString() + '°0\'0\'\''
+      return decimal_var.toString() + "°0'0''"
     let decimalStr = decimal_var.toString().split('.')
     let degreeStr = decimalStr[0]
     if (decimalStr[1]) {
-            let minutes = Number(decimalStr[1]) / Math.pow(10,decimalStr[1].length) * 60
+      let minutes =
+        (Number(decimalStr[1]) / Math.pow(10, decimalStr[1].length)) * 60
       if (!minutes.toString().includes('.'))
-                return degreeStr + '°'+ minutes.toString() +'\'0\'\''
+        return degreeStr + '°' + minutes.toString() + "'0''"
       let minuteSecondsStr = minutes.toString().split('.')
       if (minuteSecondsStr[1]) {
-                let secondStr = Number(minuteSecondsStr[1]) / Math.pow(10,minuteSecondsStr[1].length) * 60
+        let secondStr =
-                return degreeStr + '°'+ minuteSecondsStr[0] +'\'' + secondStr.toFixed(3) + '\'\''
+          (Number(minuteSecondsStr[1]) /
+            Math.pow(10, minuteSecondsStr[1].length)) *
+          60
+        return (
+          degreeStr +
+          '°' +
+          minuteSecondsStr[0] +
+          "'" +
+          secondStr.toFixed(3) +
+          "''"
+        )
       }
     }
     return ''
   }
 }
 
-
-
 export { Angle }

src/utils/map/draw/drawPoint.ts

@@ -2,6 +2,48 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-27 09:51:04
  * @LastEditors: cbwu
- * @LastEditTime: 2024-03-27 09:51:07
+ * @LastEditTime: 2024-04-10 13:53:42
  * @Description: 绘制点类
  */
+import {
+  Viewer,
+  ScreenSpaceEventHandler,
+  Cartesian3,
+  Color,
+  ScreenSpaceEventType,
+  Entity,
+  CallbackProperty,
+  PolylineDashMaterialProperty,
+} from 'cesium'
+import { BillBoard } from '../geometry/billboard'
+import { cartesian2ToCartesian3 } from '../coordinate'
+export default class DrawPoint {
+  viewer: Viewer
+  handler: ScreenSpaceEventHandler
+  constructor(viewer: Viewer) {
+    this.viewer = viewer
+    this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
+  }
+  //开始绘制
+  public start() {
+    this.handler.setInputAction(
+      this.leftClickCallBack,
+      ScreenSpaceEventType.LEFT_CLICK,
+    )
+  }
+  //结束绘制
+  public end() {
+    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
+    this.handler.destroy()
+  }
+  //左键Click事件
+  private leftClickCallBack = (
+    event: ScreenSpaceEventHandler.PositionedEvent,
+  ) => {
+    const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
+    if (cartesian3) {
+      this.viewer.entities.add(new BillBoard(cartesian3))
+      this.viewer.scene.requestRender()
+    }
+  }
+}

src/utils/map/geocomputation.ts

@@ -84,5 +84,4 @@ function isOnLineSegment(
   */
 }
 
-
 export { getClosestPoint, isOnLineSegment }

src/utils/map/geometry/billboard.ts

@@ -2,19 +2,26 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-04-10 08:53:12
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-10 09:20:34
+ * @LastEditTime: 2024-04-10 13:55:27
  * @Description: 广告牌对象
  */
-import { Entity, Cartesian3, Color } from 'cesium'
+import { Entity, Cartesian3, Color, HeightReference } from 'cesium'
+import { getMapAssetsFile } from '@/utils/getAssets'
 export class BillBoard extends Entity {
+  static ID: number = 0
+  public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
   constructor(position: Cartesian3) {
     super({
       position: position,
       billboard: {
         show: true,
-        image: '@/assets/map/marker.svg',
+        image: getMapAssetsFile('marker.svg'),
         width: 32,
         height: 32,
+        scale: 1,
+        // 设置实体贴地
+        heightReference: HeightReference.CLAMP_TO_GROUND,
+        // disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
       },
     })
   }