huweili-cesium 1.2.31 → 1.2.33

package/index.vue

@@ -18,7 +18,7 @@ import { processMapConfigColors } from './js/tileProviders.js'
 import { applyImageryLayers, resolveOnlineBasemap } from './js/utils/mapImagery.js'
 import { createCustomToolbarButtons } from './js/customToolbarButtons.js'
 const { merge } = objectUtils()
-const { mouseController, setInitialCameraView, syncCameraInteractionMode } = basicConfig()
+const { mouseController, setInitialCameraView, syncCameraInteractionMode, waitForMapReady } = basicConfig()
 const {
   addToolbarButton,
   addToolbarButtons,
@@ -239,10 +239,13 @@ const initCesium = async () => {
       })
     }
 
-    mouseController(map, props.mapId, {
-      onRightClick: (position) => emit('rightClick', position),
-      onLeftClick: (event) => emit('leftClick', event),
-    }) // 初始化鼠标控制器
+    const readyMap = await waitForMapReady(props.mapId)
+    if (readyMap) {
+      mouseController(readyMap, props.mapId, {
+        onRightClick: (position) => emit('rightClick', position),
+        onLeftClick: (event) => emit('leftClick', event),
+      }) // 初始化鼠标控制器
+    }
 
     mapStore.setMapInfo(
       'center',

package/js/basis.js

@@ -21,6 +21,24 @@ export function basicConfig() {
   // 获取地图store实例
   const mapStore = useMapStore()
 
+  /**
+   * 等待地图实例初始化完成
+   * @param {string} mapInstanceId 地图实例ID
+   * @param {number} maxRetry 最大重试次数
+   * @param {number} interval 每次重试间隔，单位毫秒
+   * @returns {Promise<Cesium.Viewer|null>} 地图实例或 null
+   */
+  const waitForMapReady = async (mapInstanceId, maxRetry = 20, interval = 50) => {
+    for (let i = 0; i < maxRetry; i += 1) {
+      const map = mapStore.getMap(mapInstanceId)
+      if (map?.scene && map?.camera) {
+        return map
+      }
+      await new Promise((resolve) => setTimeout(resolve, interval))
+    }
+    return null
+  }
+
   /**
    * 检查坐标是否在中国境内
    * @param {*} longitude - 经度
@@ -741,6 +759,7 @@ export function basicConfig() {
   }
 
   return {
+    waitForMapReady,
     isInChina,
     mouseController,
     setCesiumCenter,

package/js/setPoint.js

@@ -352,9 +352,183 @@ export function setPoint(baseUrl) {
     return modelEntity
   }
 
+  /**
+   * 拾取地图经纬度并放置图片点位
+   *
+   * @param {Object} options 配置选项
+   * @param {string} options.id 点位唯一标识
+   * @param {string} options.image 点位图片地址，支持本地 public 路径或网络地址
+   * @param {string} [options.mapId] 地图ID
+   * @param {number} [options.width=32] 图片宽度
+   * @param {number} [options.height=32] 图片高度
+   * @param {number} [options.pointHeight=0] 点位高度
+   * @param {Function} [options.onPick] 拾取成功回调
+   * @returns {Function|null} 取消拾取监听的函数
+   */
+  const pickMapPointByClick = (options = {}) => {
+    const { id, image, mapId, width = 32, height = 32, pointHeight = 0, onPick } = options
+    const map = mapStore.getMap(mapId)
+
+    if (!map) {
+      console.error('地图实例不存在')
+      return null
+    }
+
+    if (!id) {
+      console.error('点位id不能为空')
+      return null
+    }
+
+    if (!image) {
+      console.error('点位图片不能为空')
+      return null
+    }
+
+    const handler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
+
+    handler.setInputAction((click) => {
+      const cartesian = map.camera.pickEllipsoid(click.position, map.scene.globe.ellipsoid)
+      if (!cartesian) return
+
+      const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+      const lng = Cesium.Math.toDegrees(cartographic.longitude)
+      const lat = Cesium.Math.toDegrees(cartographic.latitude)
+
+      const point = createPickedImagePoint({
+        id,
+        image,
+        lng,
+        lat,
+        height: pointHeight,
+        width,
+        heightPixel: height,
+        mapId
+      })
+
+      if (typeof onPick === 'function') {
+        onPick({
+          id,
+          lng,
+          lat,
+          height: pointHeight,
+          cartesian,
+          point,
+          mapId
+        })
+      }
+
+      handler.destroy()
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    return () => {
+      if (!handler.isDestroyed()) {
+        handler.destroy()
+      }
+    }
+  }
+
+  /**
+   * 根据经纬度创建图片点位
+   * @param {Object} options 配置选项
+   * @param {string} options.id 点位唯一标识
+   * @param {string} options.image 点位图片地址
+   * @param {number} options.lng 经度
+   * @param {number} options.lat 纬度
+   * @param {number} [options.height=0] 点位高度
+   * @param {number} [options.width=32] 图片宽度
+   * @param {number} [options.heightPixel=32] 图片高度
+   * @param {string} [options.mapId] 地图ID
+   * @returns {Cesium.Entity|null} 创建的点位实体
+   */
+  const createPickedImagePoint = (options = {}) => {
+    const { id, image, lng, lat, height = 0, width = 32, heightPixel = 32, mapId } = options
+    const map = mapStore.getMap(mapId)
+
+    if (!map) {
+      console.error('地图实例不存在')
+      return null
+    }
+
+    if (!id) {
+      console.error('点位id不能为空')
+      return null
+    }
+
+    if (!image) {
+      console.error('点位图片不能为空')
+      return null
+    }
+
+    if (mapStore.hasGraphicMap(id, mapId)) {
+      console.warn(`图片点位已存在，ID: ${id}`)
+      return mapStore.getGraphicMap(id, mapId)
+    }
+
+    const entity = map.entities.add({
+      id,
+      position: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(height)),
+      billboard: {
+        image,
+        width,
+        height: heightPixel,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY
+      }
+    })
+
+    entity.destroy = () => {
+      map.entities.remove(entity)
+      mapStore.removeGraphicMap(id, mapId)
+    }
+
+    mapStore.setGraphicMap(id, entity, mapId)
+    return entity
+  }
+
+  /**
+   * 删除/销毁拾取创建的图片点位
+   * @param {string|Object} pointId 点位id，或包含 id/mapId 的对象
+   * @param {string} [mapId] 地图ID
+   * @returns {boolean} 是否删除成功
+   */
+  const destroyPickedImagePoint = (pointId, mapId) => {
+    const id = typeof pointId === 'object' ? pointId?.id : pointId
+    const targetMapId = typeof pointId === 'object' ? pointId?.mapId : mapId
+    const map = mapStore.getMap(targetMapId)
+
+    if (!map) {
+      console.error('地图实例不存在')
+      return false
+    }
+
+    if (!id) {
+      console.error('点位id不能为空')
+      return false
+    }
+
+    const point = mapStore.getGraphicMap(id, targetMapId)
+    if (!point) {
+      console.warn(`图片点位不存在，ID: ${id}`)
+      return false
+    }
+
+    if (typeof point.destroy === 'function') {
+      point.destroy()
+    } else {
+      map.entities.remove(point)
+      mapStore.removeGraphicMap(id, targetMapId)
+    }
+
+    return true
+  }
+
   return {
     setPointByDiv,
     setPointByGlb,
-    setDronePointByGlb
+    setDronePointByGlb,
+    pickMapPointByClick,
+    createPickedImagePoint,
+    destroyPickedImagePoint
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.2.31",
+  "version": "1.2.33",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",