huweili-cesium 1.3.5 → 1.3.7

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

@@ -9,6 +9,8 @@ import { useMapStore } from './stores/mapStore.js'
 const SVG_NS = 'http://www.w3.org/2000/svg';
 // 详情面板文字刷新最小间隔（毫秒），避免每帧跑逻辑
 const DRONE_INFO_UPDATE_MIN_MS = 1000;
+// 接收时间单独快更新（与界面列表对齐，不拖累其它字段的节流）
+const DRONE_RECEIVE_TIME_UPDATE_MIN_MS = 100;
 
 /** @typedef {{ lng: string, lat: string, alt: string, speed: string, flyingHandName: string, flyingHandPhone: string, flyingHandPosition: string, frequencyBand: string, distance: string, receiveTime: string }} DroneInfoDisplay */
 
@@ -78,7 +80,16 @@ function formatDroneInfoDisplay(info) {
  * @returns {string}
  */
 function buildInfoFingerprint(display) {
-  return `${display.lng}|${display.lat}|${display.alt}|${display.speed}|${display.flyingHandName}|${display.flyingHandPhone}|${display.frequencyBand}|${display.distance}|${display.receiveTime}`;
+  return `${buildInfoFingerprintWithoutTime(display)}|${display.receiveTime}`;
+}
+
+/**
+ * 详情面板指纹（不含接收时间，供慢更新通道比对）
+ * @param {DroneInfoDisplay} display
+ * @returns {string}
+ */
+function buildInfoFingerprintWithoutTime(display) {
+  return `${display.lng}|${display.lat}|${display.alt}|${display.speed}|${display.flyingHandName}|${display.flyingHandPhone}|${display.frequencyBand}|${display.distance}|${display.flyingHandPosition}`;
 }
 
 /**
@@ -105,6 +116,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合集
  */
@@ -152,7 +180,9 @@ export function labelDiv() {
     let dragRafId = 0;
     let rafId = 0; // 是用来存储 requestAnimationFrame 的返回ID，用于管理无人机信息的实时刷新
     let lastInfoText = '';
+    let lastReceiveTimeText = '';
     let lastInfoTick = 0;
+    let lastReceiveTimeTick = 0;
     /** @type {DroneInfoDisplay|null} */
     let cachedInfoDisplay = null;
     let infoDiv = null;
@@ -214,37 +244,54 @@ export function labelDiv() {
       document.removeEventListener('pointerup', onPointerEnd);
     };
 
-    // 实时刷新无人机经纬度、高度、速度（节流，避免 60fps 空转）
-    function updateDroneInfo(ts) {
-      if (!infoDiv) return;
-      const now = ts ?? performance.now();
-      if (now - lastInfoTick < DRONE_INFO_UPDATE_MIN_MS) {
-        rafId = requestAnimationFrame(updateDroneInfo);
-        return;
+    // 接收时间快通道：100ms 轮询，与界面列表更接近
+    const updateReceiveTime = (display, now) => {
+      if (!infoFieldEls?.receiveTimeEl) return;
+      if (now - lastReceiveTimeTick < DRONE_RECEIVE_TIME_UPDATE_MIN_MS) return;
+
+      lastReceiveTimeTick = now;
+      const nextReceiveTime = display.receiveTime;
+      if (nextReceiveTime === lastReceiveTimeText) return;
+
+      infoFieldEls.receiveTimeEl.textContent = nextReceiveTime;
+      lastReceiveTimeText = nextReceiveTime;
+      if (cachedInfoDisplay) {
+        cachedInfoDisplay.receiveTime = nextReceiveTime;
       }
+    };
+
+    // 其它字段慢通道：1s 节流，避免每帧跑逻辑
+    const updateOtherDroneInfo = (display, now) => {
+      if (!infoFieldEls || now - lastInfoTick < DRONE_INFO_UPDATE_MIN_MS) return;
 
       lastInfoTick = now;
+      const nextInfoText = buildInfoFingerprintWithoutTime(display);
+      if (nextInfoText === lastInfoText) return;
+
+      const {
+        lngEl, latEl, altEl, speedEl, flyingHandNameEl, flyingHandPhoneEl, flyingHandPositionEl, distanceEl
+      } = infoFieldEls;
+      if (lngEl) lngEl.textContent = display.lng;
+      if (latEl) latEl.textContent = display.lat;
+      if (altEl) altEl.textContent = display.alt;
+      if (speedEl) speedEl.textContent = display.speed;
+      if (flyingHandNameEl) flyingHandNameEl.textContent = display.flyingHandName;
+      if (flyingHandPhoneEl) flyingHandPhoneEl.textContent = display.flyingHandPhone;
+      if (distanceEl) distanceEl.textContent = display.distance;
+      if (flyingHandPositionEl) flyingHandPositionEl.textContent = display.flyingHandPosition;
+      lastInfoText = nextInfoText;
+      cachedInfoDisplay = display;
+      lastReceiveTimeText = display.receiveTime;
+    };
 
+    function updateDroneInfo(ts) {
+      if (!infoDiv) return;
+      const now = ts ?? performance.now();
       const info = labelItem.getInfo ? labelItem.getInfo() : null;
       const display = resolveInfoDisplay(info, cachedInfoDisplay);
-      const nextInfoText = buildInfoFingerprint(display);
-
-      if (nextInfoText !== lastInfoText && infoFieldEls) {
-        const {
-          lngEl, latEl, altEl, speedEl, flyingHandNameEl, flyingHandPhoneEl, flyingHandPositionEl, distanceEl, receiveTimeEl
-        } = infoFieldEls;
-        if (lngEl) lngEl.textContent = display.lng;
-        if (latEl) latEl.textContent = display.lat;
-        if (altEl) altEl.textContent = display.alt;
-        if (receiveTimeEl) receiveTimeEl.textContent = display.receiveTime;
-        if (speedEl) speedEl.textContent = display.speed;
-        if (flyingHandNameEl) flyingHandNameEl.textContent = display.flyingHandName;
-        if (flyingHandPhoneEl) flyingHandPhoneEl.textContent = display.flyingHandPhone;
-        if (distanceEl) distanceEl.textContent = display.distance;
-        if (flyingHandPositionEl) flyingHandPositionEl.textContent = display.flyingHandPosition;
-        lastInfoText = nextInfoText;
-        cachedInfoDisplay = display;
-      }
+
+      updateReceiveTime(display, now);
+      updateOtherDroneInfo(display, now);
 
       rafId = requestAnimationFrame(updateDroneInfo);
     }
@@ -375,9 +422,11 @@ export function labelDiv() {
         };
       }
 
-      lastInfoText = buildInfoFingerprint(initialDisplay);
+      lastInfoText = buildInfoFingerprintWithoutTime(initialDisplay);
+      lastReceiveTimeText = initialDisplay.receiveTime;
       cachedInfoDisplay = initialDisplay;
       lastInfoTick = 0;
+      lastReceiveTimeTick = 0;
       updateDroneInfo();
 
       // 关闭时移除动画帧
@@ -435,7 +484,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 +591,7 @@ export function labelDiv() {
 
     batchManager.add(batchEntry);
 
-    // 返回销毁函数
-    return () => {
+    const destroy = () => {
       cancelAnimationFrame(rafId);
       rafId = 0;
       if (dragRafId) {
@@ -509,6 +613,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.5",
+  "version": "1.3.7",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",