From 09f3e998cb200323fc9ac12aca0f4198a5083244 Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Wed, 10 Apr 2024 16:31:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EMarker=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=82=E5=AD=98=E5=82=A8=E6=89=80=E6=9C=89Marker=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/SceneViewer.vue  | 10 +++++++---
 src/global.d.ts                     |  7 +++++++
 src/utils/map/draw/drawPoint.ts     |  9 +++++----
 src/utils/map/geometry/billboard.ts | 10 ++++++++--
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index 34baaba..31d3364 100644
--- a/src/components/map/SceneViewer.vue
+++ b/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 13:59:42
+ * @LastEditTime: 2024-04-10 16:30:23
  * @Description:
 -->
 <template>
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { Viewer, Ion, Cartesian3 } from 'cesium'
+import { Viewer, Ion, Cartesian3, CustomDataSource, Color } from 'cesium'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
 import {
   TDTLayerType,
@@ -22,6 +22,7 @@ import {
 import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
 import { flyToChina } from '@/utils/map/camera'
 import CreatePolyline from '@/utils/map/draw/drawPolyline'
+import DrawPoint from '@/utils/map/draw/drawPoint'
 const viewerDivRef = ref<HTMLDivElement>()
 let viewer: Viewer
 window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
@@ -38,7 +39,7 @@ Ion.defaultAccessToken =
 //     60.0, // 北纬
 //   )
 
-onMounted(() => {
+onMounted(async () => {
   //初始化
   viewer = initViewer(viewerDivRef.value as HTMLElement)
   // 性能优化
@@ -58,6 +59,9 @@ onMounted(() => {
   )
   // 添加三维地形服务
   viewer.terrainProvider = getTDTTerrainProvider()
+  // 标记点图层，存储所有地标点
+  const markerLayer = new CustomDataSource('Marker')
+  await viewer.dataSources.add(markerLayer)
 
   // 挂载在window，供全局组件共享
   window.viewer = viewer
diff --git a/src/global.d.ts b/src/global.d.ts
index 6e464e5..e004482 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,3 +1,10 @@
+/*
+ * @Author: cbwu 504-wuchengbo@htsdfp.com
+ * @Date: 2024-03-07 13:57:05
+ * @LastEditors: cbwu
+ * @LastEditTime: 2024-04-10 15:47:36
+ * @Description:
+ */
 // import * as Cesium from 'cesium'
 import type { Cesium, Viewer } from 'cesium'
 
diff --git a/src/utils/map/draw/drawPoint.ts b/src/utils/map/draw/drawPoint.ts
index b5b3164..37ad10d 100644
--- a/src/utils/map/draw/drawPoint.ts
+++ b/src/utils/map/draw/drawPoint.ts
@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-27 09:51:04
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-10 13:53:42
+ * @LastEditTime: 2024-04-10 15:54:02
  * @Description: 绘制点类
  */
 import {
@@ -12,17 +12,18 @@ import {
   Color,
   ScreenSpaceEventType,
   Entity,
-  CallbackProperty,
-  PolylineDashMaterialProperty,
+  DataSource,
 } from 'cesium'
 import { BillBoard } from '../geometry/billboard'
 import { cartesian2ToCartesian3 } from '../coordinate'
 export default class DrawPoint {
   viewer: Viewer
   handler: ScreenSpaceEventHandler
+  markerLayer: DataSource
   constructor(viewer: Viewer) {
     this.viewer = viewer
     this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
+    this.markerLayer = viewer.dataSources.getByName('Marker')[0]
   }
   //开始绘制
   public start() {
@@ -42,7 +43,7 @@ export default class DrawPoint {
   ) => {
     const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
     if (cartesian3) {
-      this.viewer.entities.add(new BillBoard(cartesian3))
+      this.markerLayer.entities.add(new BillBoard(cartesian3))
       this.viewer.scene.requestRender()
     }
   }
diff --git a/src/utils/map/geometry/billboard.ts b/src/utils/map/geometry/billboard.ts
index a6a1465..4e16f69 100644
--- a/src/utils/map/geometry/billboard.ts
+++ b/src/utils/map/geometry/billboard.ts
@@ -2,10 +2,10 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-04-10 08:53:12
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-10 13:55:27
+ * @LastEditTime: 2024-04-10 16:29:56
  * @Description: 广告牌对象
  */
-import { Entity, Cartesian3, Color, HeightReference } from 'cesium'
+import { Entity, Cartesian3, Cartesian2, Color, HeightReference } from 'cesium'
 import { getMapAssetsFile } from '@/utils/getAssets'
 export class BillBoard extends Entity {
   static ID: number = 0
@@ -23,6 +23,12 @@ export class BillBoard extends Entity {
         heightReference: HeightReference.CLAMP_TO_GROUND,
         // disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
       },
+      // label: {
+      //   text: 'Maker1',
+      //   font: '16px sans-serif',
+      //   scale: 1,
+      //   pixelOffset: new Cartesian2(5, 0),
+      // },
     })
   }
 }