huweili-cesium 1.2.30 → 1.2.32

package/js/basis.js

@@ -126,8 +126,17 @@ export function basicConfig() {
       e.preventDefault();
     });
 
+    // 获取现有的事件处理器（如果有）
+    const existingLeftClickHandler = map.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    const existingRightClickHandler = map.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
     // 添加右键点击事件监听
     map.screenSpaceEventHandler.setInputAction((click) => {
+      // 先调用已有的处理器（如果有）
+      if (existingRightClickHandler) {
+        existingRightClickHandler(click);
+      }
+      
       // 获取点击位置的笛卡尔坐标
       const cartesian = map.camera.pickEllipsoid(click.position, map.scene.globe.ellipsoid);
       if (cartesian) {
@@ -145,7 +154,7 @@ export function basicConfig() {
           cartesian,
         };
 
-        console.log('右键点击事件触发，点击位置:', position);
+        console.log('右键点击位置:', position);
         callbacks.onRightClick?.(position);
       } else {
         callbacks.onRightClick?.({
@@ -157,6 +166,11 @@ export function basicConfig() {
 
     // 添加左键点击事件，用于隐藏弹窗
     map.screenSpaceEventHandler.setInputAction((click) => {
+      // 先调用已有的处理器（如果有）
+      if (existingLeftClickHandler) {
+        existingLeftClickHandler(click);
+      }
+  
       // 获取点击位置的笛卡尔坐标
       const cartesian = map.camera.pickEllipsoid(click.position, map.scene.globe.ellipsoid);
       if (cartesian) {
@@ -166,7 +180,7 @@ export function basicConfig() {
         const lat = Cesium.Math.toDegrees(cartographic.latitude);
         const height = cartographic.height;
 
-        console.log('左键点击事件触发，点击位置:', {
+        console.log('左键点击位置:', {
           lng: Number(lng),
           lat: Number(lat),
           height: Number(height)

package/js/clickHandler.js

@@ -218,17 +218,40 @@ export class ClickHandler {
    */
   ensureMapHandler(map, mapId) {
     if (!this.handlers.has(mapId) && map) {
-      const handler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
-
-      handler.setInputAction((click) => {
-        this.handleClick(map, mapId, click, 'left')
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-
-      handler.setInputAction((click) => {
-        this.handleClick(map, mapId, click, 'right')
-      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-
-      this.handlers.set(mapId, handler)
+      // 使用地图自带的 screenSpaceEventHandler 而不是创建新的
+      // 这样可以避免与 basis.js 中的 mouseController 冲突
+      const handler = map.screenSpaceEventHandler
+      
+      // 获取已有的事件处理器（如果有）
+      const existingLeftClickHandler = handler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      const existingRightClickHandler = handler.getInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      
+      // 存储需要清理的事件回调引用
+      const cleanupCallbacks = {
+        leftClick: null,
+        rightClick: null
+      }
+      
+      cleanupCallbacks.leftClick = (click) => {
+        // 先调用已有的处理器（如果有）
+        if (existingLeftClickHandler) {
+          existingLeftClickHandler(click);
+        }
+        this.handleClick(map, mapId, click, 'left');
+      }
+      
+      cleanupCallbacks.rightClick = (click) => {
+        // 先调用已有的处理器（如果有）
+        if (existingRightClickHandler) {
+          existingRightClickHandler(click);
+        }
+        this.handleClick(map, mapId, click, 'right');
+      }
+      
+      handler.setInputAction(cleanupCallbacks.leftClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      handler.setInputAction(cleanupCallbacks.rightClick, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      
+      this.handlers.set(mapId, { handler, cleanupCallbacks });
     }
   }
 
@@ -280,9 +303,16 @@ export class ClickHandler {
       }
     })
 
-    const handler = this.handlers.get(mapId)
-    if (handler) {
-      handler.destroy()
+    const handlerData = this.handlers.get(mapId)
+    if (handlerData) {
+      // 只移除我们添加的事件监听器，不要销毁 map.screenSpaceEventHandler
+      const { handler, cleanupCallbacks } = handlerData
+      if (cleanupCallbacks.leftClick) {
+        handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+      }
+      if (cleanupCallbacks.rightClick) {
+        handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+      }
       this.handlers.delete(mapId)
     }
   }

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.30",
+  "version": "1.2.32",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",