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

@@ -5,38 +5,45 @@
 -->
 <script setup lang="ts">
 import { Angle } from '@/utils/map/angle.ts'
-import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType} from 'cesium'
-import {onMounted, ref} from "vue";
+import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium'
+import { onMounted, ref } from 'vue'
 let nowLatStr: string, nowLonStr: string
 let lonlatStr = ref('')
 let isDecimal = ref(true)
 
-onMounted(()=>{
+onMounted(() => {
   let _viewer = window.viewer
-  let canvas =  _viewer.scene.canvas
+  let canvas = _viewer.scene.canvas
   let handler = new ScreenSpaceEventHandler(canvas)
-  handler.setInputAction((e:any)=> {
+  handler.setInputAction((e: any) => {
     //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
     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);
-      try{
+      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 elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)?? '' : '' // 海拔
+        let needElevation: boolean =
+          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) {}
@@ -46,11 +53,13 @@ onMounted(()=>{
 
 function lonlatClick() {
   let elevStr = lonlatStr.value.split('海拔')[1]
-  if(isDecimal.value){
-    lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` + elevStr
-  }
-  else {
-    lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
+  if (isDecimal.value) {
+    lonlatStr.value =
+      `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` +
+      elevStr
+  } else {
+    lonlatStr.value =
+      `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
   }
   isDecimal.value = !isDecimal.value
 }
@@ -80,14 +89,14 @@ function lonlatClick() {
   display: flex;
   align-items: center;
 }
-#lonlatText{
+#lonlatText {
   margin-left: 2rem;
   background: none;
   border: none;
-  color: #FFFFFF;
-  font-size: .8rem;
+  color: #ffffff;
+  font-size: 0.8rem;
 }
-#lonlatText:hover{
+#lonlatText:hover {
   cursor: pointer;
 }
 </style>

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 {
@@ -108,7 +108,7 @@ export function Geocoder(word: string) {
  * @param lon 经度
  * @param lat 纬度
  */
-export function reverseGeocoder(lon:number, lat: number ) {
+export function reverseGeocoder(lon: number, lat: number) {
   let url = `http://api.tianditu.gov.cn/geocoder?postStr={'lon':${lon},'lat':${lat},'ver':1}&type=geocode&tk=`
   return axios.get(url + TDT_tk)
 }

src/utils/map/angle.ts

@@ -1,30 +1,39 @@
 class Angle {
-    constructor() {}
+  constructor() {}
 
-    /**
-     * 十进制经纬度转度分秒，精确至毫秒
-     * @param decimal_var 十进制经纬度
-     * @constructor
-     */
-    static DecimalDegree2DMS(decimal_var: number|string){
-        if(!decimal_var.toString().includes('.'))
-            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
-            if(!minutes.toString().includes('.'))
-                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
-                return degreeStr + '°'+ minuteSecondsStr[0] +'\'' + secondStr.toFixed(3) + '\'\''
-            }
-        }
-        return ''
+  /**
+   * 十进制经纬度转度分秒，精确至毫秒
+   * @param decimal_var 十进制经纬度
+   * @constructor
+   */
+  static DecimalDegree2DMS(decimal_var: number | string) {
+    if (!decimal_var.toString().includes('.'))
+      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
+      if (!minutes.toString().includes('.'))
+        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
+        return (
+          degreeStr +
+          '°' +
+          minuteSecondsStr[0] +
+          "'" +
+          secondStr.toFixed(3) +
+          "''"
+        )
+      }
     }
+    return ''
+  }
 }
 
-
-
 export { Angle }

src/utils/map/coordinate.ts

@@ -47,4 +47,4 @@ function cartesian3ToWGS84(pos: Cartesian3) {
   return []
 }
 
-export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84  }
+export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84 }

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, // 可能会提高在不同角度下的清晰度
       },
     })
   }