huweili-cesium 1.3.4 → 1.3.6

package/components/wsIndicator/wsIndicator.vue

@@ -46,8 +46,22 @@ const wsIndicatorClass = computed(() => {
   return 'connected'
 })
 
+/** 兼容 template 传入的 HTMLElement 与 ref 对象两种形态 */
+const getContainerRoot = () => {
+  const container = props.container
+  if (!container) return null
+  if (typeof HTMLElement !== 'undefined' && container instanceof HTMLElement) {
+    return container
+  }
+  const refValue = container.value
+  if (typeof HTMLElement !== 'undefined' && refValue instanceof HTMLElement) {
+    return refValue
+  }
+  return null
+}
+
 const resolveViewerElement = () => {
-  const root = props.container?.value
+  const root = getContainerRoot()
   if (!root) return null
   return root.querySelector('.cesium-viewer')
 }
@@ -72,7 +86,7 @@ const startResolveViewerElement = () => {
   stopResolveViewerElement()
   if (bindViewerElement()) return
 
-  const root = props.container?.value
+  const root = getContainerRoot()
   if (!root) return
 
   viewerObserver = new MutationObserver(() => {
@@ -106,7 +120,7 @@ const handleWsDisconnected = () => {
 }
 
 watch(
-  () => props.container?.value,
+  () => getContainerRoot(),
   () => {
     cesiumViewerEl.value = null
     startResolveViewerElement()

package/js/groundLink.js

@@ -60,12 +60,16 @@ export function groundLinkConfig() {
 
     // 检查是否已存在连接线
     if (mapStore.hasGroundLink(pointId, mapId)) {
-      // 连接线已存在，只更新地面点位经纬度（确保位置同步）
+      // 连接线已存在，同步地面点位经纬度与状态颜色
       modelEntity.groundLinkPosition = {
         lng: options.GROUND_LINK_LNG,
         lat: options.GROUND_LINK_LAT
       }
-      console.warn(`无人机${pointId}的地面连接线已存在，仅更新位置，mapId: ${mapId || 'default'}`)
+      updateGroundLinkStatus({
+        pointId,
+        status: options.status ?? DroneStatus.WHITELIST,
+        mapId,
+      })
       return
     }
 
@@ -184,9 +188,36 @@ export function groundLinkConfig() {
     }
   }
 
+  /**
+   * 增量更新无人机与地面固定点连线颜色
+   * @param {Object} options
+   * @param {string} options.pointId 连接线 ID（如 drone-fly-line-${uavId}）
+   * @param {number} options.status 无人机状态
+   * @param {string} [options.mapId] 地图 ID
+   */
+  const updateGroundLinkStatus = (options = {}) => {
+    const { pointId, status, mapId } = options
+    if (!pointId) return false
+
+    const groundLinkEntity = mapStore.getGroundLink(pointId, mapId)
+    if (!groundLinkEntity?.polyline) return false
+
+    const statusConfig = DroneStatusMap[status] || DroneStatusMap[DroneStatus.WHITELIST]
+    const groundLinkColor = Cesium.Color.fromCssColorString(statusConfig.groundLinkColor)
+
+    groundLinkEntity.polyline.material = new Cesium.PolylineDashMaterialProperty({
+      color: groundLinkColor,
+      dashLength: 12,
+      gapColor: groundLinkColor.withAlpha(0.01),
+    })
+
+    return true
+  }
+
   return {
     createAndMoveGroundLink,
     clearGroundLink,
-    toggleGroundLinkVisibility
+    toggleGroundLinkVisibility,
+    updateGroundLinkStatus
   }
 }

package/js/labelDiv.js

@@ -105,6 +105,23 @@ function resolveInfoDisplay(info, cached) {
   return merged;
 }
 
+/**
+ * 根据状态生成无人机头顶标牌文案
+ * @param {number} status
+ * @param {string} uavName
+ * @returns {string}
+ */
+export function buildDroneLabelText(status, uavName) {
+  const statusConfig = DroneStatusMap[status] || DroneStatusMap[DroneStatus.WHITELIST]
+  if (status === DroneStatus.UNKNOWN) {
+    return statusConfig.description
+  }
+  if (status === DroneStatus.MACHINE_NEST) {
+    return '机巢无人机'
+  }
+  return `${statusConfig.description}: ${uavName || ''}`
+}
+
 /**
  * 各种标签div合集
  */
@@ -435,7 +452,63 @@ export function labelDiv() {
 
     batchManager.container.appendChild(labelDiv);
 
+    const applyDetailStatusTheme = (nextStatus) => {
+      if (!detailDiv) return
+
+      const statusConfig = DroneStatusMap[nextStatus]
+      if (!statusConfig) return
+
+      detailDiv.style.setProperty('--drone-bg-color', statusConfig.backgroundColor)
+      detailDiv.style.setProperty('--drone-border-color', statusConfig.borderColor)
+      detailDiv.style.setProperty('--drone-text-color', statusConfig.textColor)
+      detailDiv.style.setProperty('--drone-detail-divider-color', statusConfig.detailDividerColor)
+
+      const badgeSpan = detailDiv.querySelector('.drone-badge')
+      if (badgeSpan) {
+        badgeSpan.style.backgroundImage = `url(${process.env.BASE_URL}${statusConfig.badgeImage})`
+      }
+
+      if (dragLineSvg) {
+        dragLineSvg.style.setProperty('--drone-drag-line-color', statusConfig.dragLineColor)
+      }
+    }
+
+    const updateStatus = (nextStatus, nextUavName) => {
+      const resolvedStatus = nextStatus ?? DroneStatus.WHITELIST
+      const resolvedName = nextUavName ?? labelItem.uavName ?? ''
+      labelItem.status = resolvedStatus
+      labelItem.uavName = resolvedName
+
+      const statusConfig = DroneStatusMap[resolvedStatus]
+      if (!statusConfig) return
+
+      const newText = buildDroneLabelText(resolvedStatus, resolvedName)
+      labelDiv.style.setProperty('--drone-label-bg-color', statusConfig.labelBgColor)
+
+      const childrenToKeep = []
+      if (detailDiv?.parentElement === labelDiv) childrenToKeep.push(detailDiv)
+      if (dragLineSvg?.parentElement === labelDiv) childrenToKeep.push(dragLineSvg)
+
+      while (labelDiv.firstChild) {
+        labelDiv.removeChild(labelDiv.firstChild)
+      }
+      labelDiv.appendChild(document.createTextNode(newText))
+      for (const el of childrenToKeep) {
+        labelDiv.appendChild(el)
+      }
+
+      applyDetailStatusTheme(resolvedStatus)
+
+      if (detailDiv) {
+        const titleEl = detailDiv.querySelector('.drone-detail-title')
+        if (titleEl) {
+          titleEl.textContent = resolvedName
+        }
+      }
+    }
+
     const batchEntry = {
+      updateStatus,
       updatePosition(hideByHeight) {
         if (!labelItem.map || !labelItem.map.scene) {
           labelDiv.style.display = 'none';
@@ -486,8 +559,7 @@ export function labelDiv() {
 
     batchManager.add(batchEntry);
 
-    // 返回销毁函数
-    return () => {
+    const destroy = () => {
       cancelAnimationFrame(rafId);
       rafId = 0;
       if (dragRafId) {
@@ -509,6 +581,8 @@ export function labelDiv() {
       batchManager.remove(batchEntry);
       labelDiv.remove();
     };
+
+    return { destroy, updateStatus };
   };
 
   return {

package/js/movePoint.js

@@ -10,11 +10,11 @@
 import * as Cesium from 'cesium'
 import { useMapStore } from './stores/mapStore.js'
 import { useEventBus } from './utils/useEventBus.js'
-import { DroneStatus } from './config/index.js'
+import { DroneStatus, DroneStatusMap } from './config/index.js'
 import { setPoint } from './setPoint'
+import { setPath } from './setPath'
 import { getClickHandler } from './clickHandler'
 import { movePathConfig } from './movePath'
-import { setPath } from './setPath'
 import { pointGetPool } from './cardPool'
 import { scheduleRefreshFlyHandQRCode } from './qrCodeGenerator'
 import { groundLinkConfig } from './groundLink'
@@ -26,22 +26,25 @@ export function movePointConfig(baseUrl) {
   const mapStore = useMapStore()
   const {
     setDronePointByGlb,
+    updateFlyPointStatus,
   } = setPoint(baseUrl)
 
   const {
-    moveDroneTrail,
-  } = movePathConfig()
-
-  const {
+    updateDroneTrailStatus,
     toggleDroneTrail,
-    clearDroneTrail
+    clearDroneTrail,
   } = setPath()
 
   const {
     clearGroundLink,
-    toggleGroundLinkVisibility
+    toggleGroundLinkVisibility,
+    updateGroundLinkStatus,
   } = groundLinkConfig()
 
+  const {
+    moveDroneTrail,
+  } = movePathConfig()
+
   const clickHandler = getClickHandler() // 获取点击处理器实例
 
   const { on } = useEventBus()
@@ -291,6 +294,61 @@ export function movePointConfig(baseUrl) {
     modelEntity.entity.position = positionProperty
   }
 
+  /**
+   * 增量更新无人机地图视觉状态（白名单/非白名单/未知切换）
+   * @param {Object} options
+   * @param {string} options.pointId 无人机 ID
+   * @param {string} [options.mapId] 地图 ID
+   * @param {number} options.status 无人机状态
+   * @param {string} [options.uavName] 无人机名称
+   * @param {string} [options.flyingHandName] 飞手姓名
+   * @param {string} [options.flyingHandPhone] 飞手电话
+   */
+  const updateDronePointStatus = (options = {}) => {
+    const {
+      pointId,
+      mapId,
+      status = DroneStatus.WHITELIST,
+      uavName,
+      flyingHandName,
+      flyingHandPhone,
+    } = options
+
+    if (!pointId) return false
+
+    const modelEntity = mapStore.getGraphicMap(pointId, mapId)
+    if (!modelEntity) return false
+
+    const statusConfig = DroneStatusMap[status] || DroneStatusMap[DroneStatus.WHITELIST]
+    const resolvedUavName = uavName ?? modelEntity.uavName ?? modelEntity.info?.uavName ?? ''
+
+    if (modelEntity.entity?.billboard) {
+      modelEntity.entity.billboard.image = baseUrl + (statusConfig.droneImagePath || '/images/new/drone.png')
+    }
+
+    if (typeof modelEntity.updateLabelStatus === 'function') {
+      modelEntity.updateLabelStatus(status, resolvedUavName)
+    }
+
+    updateDroneTrailStatus({ pointId, status, mapId })
+    updateGroundLinkStatus({
+      pointId: `drone-fly-line-${pointId}`,
+      status,
+      mapId,
+    })
+    updateFlyPointStatus({
+      id: `fly-${pointId}`,
+      status,
+      mapId,
+      name: flyingHandName ?? modelEntity.info?.flyingHandName,
+      phone: flyingHandPhone ?? modelEntity.info?.flyingHandPhone,
+    })
+
+    modelEntity.status = status
+    modelEntity.uavName = resolvedUavName
+    return true
+  }
+
   const moveDronePoint = (options) => {
     const { pointId, mapId, uavName } = options
     const map = mapStore.getMap(mapId)
@@ -352,6 +410,21 @@ export function movePointConfig(baseUrl) {
     info.distance = options.distance || ''
     info.receiveTime = options.receiveTime || ''
 
+    const prevStatus = modelEntity.status
+    if (prevStatus !== undefined && prevStatus !== status) {
+      updateDronePointStatus({
+        pointId,
+        mapId,
+        status,
+        uavName,
+        flyingHandName: options.flyingHandName,
+        flyingHandPhone: options.flyingHandPhone,
+      })
+    } else if (prevStatus === undefined) {
+      modelEntity.status = status
+      modelEntity.uavName = uavName
+    }
+
     const targetPosition = Cesium.Cartesian3.fromDegrees(lng, lat, height)
     snapDronePosition(modelEntity, map, targetPosition, currentTime)
 
@@ -506,6 +579,7 @@ export function movePointConfig(baseUrl) {
     movePointByGlb,
     movePointByGlbInfo,
     moveDronePoint,
+    updateDronePointStatus,
     toggleDroneAndTrailVisibility,
     destroyDroneTrail
   }

package/js/setPath.js

@@ -118,9 +118,30 @@ export function setPath() {
     }
   }
 
+  /**
+   * 增量更新无人机轨迹颜色
+   * @param {Object} options
+   * @param {string} options.pointId 无人机 ID
+   * @param {number} options.status 无人机状态
+   * @param {string} [options.mapId] 地图 ID
+   */
+  const updateDroneTrailStatus = (options = {}) => {
+    const { pointId, status, mapId } = options
+    if (!pointId) return false
+
+    const trailData = mapStore.getDroneTrail(pointId, mapId)
+    if (!trailData?.entity?.polyline) return false
+
+    const statusConfig = DroneStatusMap[status] || DroneStatusMap[DroneStatus.WHITELIST]
+    trailData.entity.polyline.material = Cesium.Color.fromCssColorString(statusConfig.trailColor)
+    trailData.status = status
+    return true
+  }
+
   return {
     setDroneTrail,
     clearDroneTrail,
-    toggleDroneTrail
+    toggleDroneTrail,
+    updateDroneTrailStatus
   }
 }

package/js/setPoint.js

@@ -10,7 +10,7 @@
 import * as Cesium from 'cesium'
 import { useMapStore } from './stores/mapStore.js'
 import { setPath } from './setPath'
-import { labelDiv } from './labelDiv'
+import { labelDiv, buildDroneLabelText } from './labelDiv'
 import { getClickHandler } from './clickHandler'
 import { DroneStatus, DroneStatusMap, MapInstanceIds } from './config/index.js'
 import { pointGetPool, PonitInfoCardPool } from './cardPool'
@@ -142,6 +142,9 @@ export function setPoint(baseUrl) {
 
     const result = {
       id,
+      status,
+      flyName: options.name || '--',
+      flyPhone: options.phone || '--',
       billboardCollection,
       billboard,
       show: showCard,
@@ -160,6 +163,57 @@ export function setPoint(baseUrl) {
     return result
   }
 
+  /**
+   * 增量更新飞手点位图标与信息牌主题色（白名单/非白名单切换）
+   * @param {Object} options
+   * @param {string} options.id 飞手点位 ID（如 fly-${uavId}）
+   * @param {number} options.status 无人机状态
+   * @param {string} [options.mapId] 地图 ID
+   * @param {string} [options.name] 飞手姓名
+   * @param {string} [options.phone] 飞手电话
+   */
+  const updateFlyPointStatus = (options = {}) => {
+    const { id, status, mapId, name, phone } = options
+    if (!id) return false
+
+    const point = mapStore.getGraphicMap(id, mapId)
+    if (!point?.billboard) return false
+
+    const resolvedStatus = status ?? DroneStatus.WHITELIST
+    const statusConfig = DroneStatusMap[resolvedStatus] || DroneStatusMap[DroneStatus.WHITELIST]
+
+    point.status = resolvedStatus
+    if (name !== undefined) point.flyName = name
+    if (phone !== undefined) point.flyPhone = phone
+
+    point.billboard.image = new URL(
+      `${process.env.BASE_URL}${statusConfig.flyingHandImagePath}`,
+      import.meta.url
+    ).href
+
+    const map = mapStore.getMap(mapId)
+    if (!map) return true
+
+    const pool = pointGetPool(map, mapId)
+    const card = pool.getActiveCard(id)
+    if (card) {
+      const infoCard = card.querySelector('.info-card')
+      if (infoCard) {
+        infoCard.style.setProperty('--flying-hand-bg-color', statusConfig.flyingHandInfoBoardColor)
+      }
+      const nameEl = card.querySelector('.fly-name')
+      const phoneEl = card.querySelector('.fly-phone')
+      if (nameEl && name !== undefined) {
+        nameEl.textContent = `姓名：${name || '--'}`
+      }
+      if (phoneEl && phone !== undefined) {
+        phoneEl.textContent = `电话：${phone || '--'}`
+      }
+    }
+
+    return true
+  }
+
   /**
    * 设置点位 （通过提供的glb模型设置点位）
    * @param options 配置选项
@@ -439,16 +493,16 @@ export function setPoint(baseUrl) {
       getPosition: () => modelEntity.positionProperty.getValue(map.clock.currentTime),
       getInfo: () => modelEntity.info, // 后续移动时，真正把业务字段写进去, 在 @js/movePoint.js 里，移动无人机时会执行：
       getVisible: () => modelEntity.entity.show,
-      text: status === DroneStatus.UNKNOWN
-        ? statusConfig.description
-        : status === DroneStatus.MACHINE_NEST
-          ? '机巢无人机'
-          : `${statusConfig.description}: ${uavName}`,
+      text: buildDroneLabelText(status, uavName),
       status,
       map,
       mapId
     })
 
+    modelEntity.status = status
+    modelEntity.uavName = uavName
+    modelEntity.updateLabelStatus = destroyDroneLabelDiv?.updateStatus
+
     if (type === 'png') {
       modelEntity.rippleEffect = createDroneRippleDom({
         map,
@@ -459,7 +513,7 @@ export function setPoint(baseUrl) {
     }
 
     modelEntity.destroy = () => {
-      destroyDroneLabelDiv?.()
+      destroyDroneLabelDiv?.destroy?.()
       modelEntity.rippleEffect?.destroy?.()
       map.entities.remove(modelEntity.entity)
     }
@@ -652,6 +706,7 @@ export function setPoint(baseUrl) {
     setPointByGlb,
     setPointByGlbInfo,
     setDronePointByGlb,
+    updateFlyPointStatus,
     pickMapPointByClick,
     createPickedImagePoint,
     destroyPickedImagePoint

package/package.json

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