feat: 新增Marker图层存储所有Marker对象

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

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'
 

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()
     }
   }

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),
+      // },
     })
   }
 }