隐患点

src/utils/cesium/CesiumUtils.ts

@@ -3,7 +3,7 @@ import type { EntityOptions } from '@/types/cesium/EntityOptions'
 import type { PrimitiveOptions } from '@/types/cesium/PrimitiveOptions'
 import type { LayerConfig } from '@/types/cesium/LayerConfig'
 import type { CustomizeGeoJsonDataSource, GeoJsonOptions } from '@/types/cesium/GeoJsonOptions'
-import { Viewer, Entity, DataSource, ImageryLayer, Primitive, BillboardCollection, Cartesian3 } from 'cesium'
+import { Viewer, Entity, DataSource, ImageryLayer, Primitive, BillboardCollection, Cartesian3, ScreenSpaceEventHandler, ScreenSpaceEventType, Cartesian2, SceneTransforms } from 'cesium'
 import { CesiumViewerManager } from './CesiumViewerManager'
 import { EntityManager } from './EntityManager'
 import { PrimitiveManager } from './PrimitiveManager'
@@ -38,7 +38,7 @@ export class CesiumUtils {
    */
   initCesiumViewer(options: CesiumInitOptions, tdMapToken?: string[], type: number = 0): void {
     this.#viewerManager.initCesiumViewer(options, tdMapToken, type)
-    
+
     const viewer = this.#viewerManager.getViewer()
     if (viewer) {
       this.#entityManager = new EntityManager(viewer)
@@ -401,6 +401,20 @@ export class CesiumUtils {
     return this.#geoJsonManager!.getGeoJsonLayerIds(clearType)
   }
 
+  // ===================== 图层操作 =====================
+  /**
+   * 监听点击事件
+   */
+  clickLayer(callback: (pickedObject: object) => void) {
+    const handler = new ScreenSpaceEventHandler(this.getViewer()?.scene.canvas);
+    handler.setInputAction((clickEvent: {position: Cartesian2}) => {
+      // 在点击位置进行拾取
+      const pickedObject = CesiumUtilsSingleton.getViewer()?.scene.pick(clickEvent.position);
+
+      callback(pickedObject);
+    }, ScreenSpaceEventType.LEFT_CLICK);
+  }
+
   // ===================== 视角控制 =====================
 
   /**
@@ -465,6 +479,16 @@ export class CesiumUtils {
     return positions.map((pos) => this.convertPosition(pos))
   }
 
+  /**
+   * 将Cartesian3坐标转换为屏幕坐标
+   * @param pos 坐标
+   * @returns 偏移量
+   */
+  convertScreenPosition(pos: Cartesian3): {x: number, y: number} {
+    const windowCoord = SceneTransforms.wgs84ToWindowCoordinates(this.getViewer()!.scene, pos);
+    return {x: windowCoord.x, y: windowCoord.y}
+  }
+
   // ===================== 私有方法 =====================
 
   /**

src/utils/cesium/PrimitiveManager.ts

@@ -14,6 +14,7 @@ import {
   BillboardGraphics,
   VerticalOrigin,
   HorizontalOrigin,
+  NearFarScalar,
 } from 'cesium'
 import type { PrimitiveOptions } from '@/types/cesium/PrimitiveOptions'
 import type { Viewer } from 'cesium'
@@ -259,13 +260,24 @@ export class PrimitiveManager {
 
     options.forEach((option) => {
       const position = this.#convertPosition(option.positions[0]!)
-      collection.add({
+      
+      const billboardConfig: any = {
         id: option.id,
         position,
         image: option.image,
         scale: option.scale || 1,
         color: option.color || Color.WHITE,
-      })
+      }
+
+      if (option.scaleByDistance) {
+        billboardConfig.scaleByDistance = option.scaleByDistance
+      }
+
+      if (option.customProperties) {
+        Object.assign(billboardConfig, option.customProperties)
+      }
+
+      collection.add(billboardConfig)
     })
 
     this.#viewer.scene.primitives.add(collection)

src/utils/utils.ts

@@ -80,6 +80,7 @@ export const Utils = {
       return result.replace(regex, String(value ?? ''))
     }, format)
   },
+
   /**
    * 深拷贝函数
    * 支持类型：原始类型、数组、对象、Date、RegExp、Map、Set、ArrayBuffer等
@@ -200,4 +201,28 @@ export const Utils = {
     // 对于其他无法处理的情况，返回原值
     return source
   },
+
+  /**
+   * 调整元素位置，确保其不超出屏幕可视区域边界
+   * @param {number} offsetX - 元素左上角原 X 坐标（相对于视口）
+   * @param {number} offsetY - 元素左上角原 Y 坐标（相对于视口）
+   * @param {number} width - 元素的宽度
+   * @param {number} height - 元素的高度
+   * @returns {[number, number]} 调整后的 [newX, newY]
+ */
+  keepWithinScreen: (offsetX: number, offsetY: number, width: number, height: number) => {
+    const viewportW = window.innerWidth;
+    const viewportH = window.innerHeight;
+
+    // 计算允许的 X 范围：最小 0，最大 (视口宽度 - 元素宽度)
+    // 如果元素宽度大于视口宽度，允许范围为 [0, 0]（即只能左对齐）
+    const maxX = Math.max(0, viewportW - width);
+    const newX = Math.min(Math.max(offsetX, 0), maxX);
+
+    // 计算允许的 Y 范围
+    const maxY = Math.max(0, viewportH - height);
+    const newY = Math.min(Math.max(offsetY, 0), maxY);
+
+    return [newX, newY];
+  }
 }