huweili-cesium 1.2.98 → 1.3.0

package/js/basis.js

@@ -22,6 +22,7 @@ import { createZoomController } from './toolbar/zoomController.js'
 import { useEventBus } from './utils/useEventBus.js'
 import { applyOrthographicZoomFactor } from './utils/orthographicCameraZoom.js'
 import { measureDistance } from './measureDistance.js'
+import { measureBearing } from './measureBearing.js'
 
 export function basicConfig() {
 
@@ -746,6 +747,7 @@ export function basicConfig() {
     const { zoomIn: zoomInDefault, zoomOut: zoomOutDefault } = createZoomController()
     const { toggleBasemapPickerPanel } = createBasemapSwitcher()
     const { startMeasure } = measureDistance()
+    const { startBearingMeasure } = measureBearing()
     const { emit } = useEventBus()
 
     const zoomIn = (factor = 0.8) => {
@@ -865,6 +867,18 @@ export function basicConfig() {
       },
       {
         index: 2,
+        title: '测向',
+        iconSrc: `${baseUrl}/images/new/cx.svg`,
+        onClick: () => {
+          startBearingMeasure({
+            id: `home_bearing_${Date.now()}`,
+            mapId,
+            color: '#ffd400',
+          })
+        },
+      },
+      {
+        index: 3,
         title: '返回初始点位',
         iconSrc: `${baseUrl}/images/new/home.svg`,
         onClick: (v) => {

package/js/glbInfoBadge.js

@@ -1,5 +1,5 @@
 /**
- * GLB 模型头顶信息牌（在线/离线状态）
+ * GLB 模型头顶信息牌（车辆信息 + 在线/离线状态）
  *
  * @author huweili
  * @version 1.0.0
@@ -7,7 +7,7 @@
 import * as Cesium from 'cesium'
 import { getDroneLabelBatchManager } from './cardPool'
 
-const STYLE_ID = 'glb-info-badge-style'
+const STYLE_ID = 'glb-info-badge-style-v3'
 const DEFAULT_LABEL_OFFSET = 1
 const DEFAULT_PIXEL_GAP = 0
 const DEFAULT_HEIGHT_SCALE = 0.72
@@ -20,6 +20,36 @@ const scratchUp = new Cesium.Cartesian3()
 const scratchOffset = new Cesium.Cartesian3()
 const scratchTop = new Cesium.Cartesian3()
 
+/**
+ * @typedef {Object} GlbInfoBadgeData
+ * @property {string} [vehicleName] 车辆名称
+ * @property {number|string} [lng] 经度
+ * @property {number|string} [lat] 纬度
+ * @property {string} [address] 位置描述
+ * @property {boolean} [isOffline] 是否离线
+ */
+
+/**
+ * @param {unknown} value
+ * @returns {string}
+ */
+const formatCoord = (value) => {
+  const num = Number(value)
+  return Number.isFinite(num) ? num.toFixed(4) : '--'
+}
+
+/**
+ * @param {GlbInfoBadgeData} info
+ * @returns {GlbInfoBadgeData}
+ */
+const normalizeInfo = (info = {}) => ({
+  vehicleName: info.vehicleName ?? '--',
+  lng: formatCoord(info.lng),
+  lat: formatCoord(info.lat),
+  address: info.address || '--',
+  isOffline: Boolean(info.isOffline),
+})
+
 const ensureGlbInfoBadgeStyle = () => {
   if (document.getElementById(STYLE_ID)) return
 
@@ -36,19 +66,64 @@ const ensureGlbInfoBadgeStyle = () => {
     }
     .glb-info-badge-inner {
       position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 12px 4px 10px;
-      border-radius: 999px;
-      background: linear-gradient(135deg, rgba(8, 20, 40, 0.92) 0%, rgba(12, 32, 58, 0.88) 100%);
+      min-width: 128px;
+      max-width: 168px;
+      padding: 5px 8px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, rgba(8, 20, 40, 0.94) 0%, rgba(12, 32, 58, 0.9) 100%);
       border: 1px solid rgba(0, 229, 255, 0.45);
       box-shadow:
-        inset 0 0 12px rgba(0, 229, 255, 0.08),
-        0 0 16px rgba(0, 229, 255, 0.15);
+        inset 0 0 8px rgba(0, 229, 255, 0.08),
+        0 0 10px rgba(0, 229, 255, 0.15);
       overflow: hidden;
-      backdrop-filter: blur(6px);
+      backdrop-filter: blur(4px);
+    }
+    .glb-info-badge-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 6px;
+      margin-bottom: 4px;
+      padding-bottom: 4px;
+      border-bottom: 1px solid rgba(0, 229, 255, 0.18);
+    }
+    .glb-info-badge-name {
+      flex: 1;
+      min-width: 0;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 1.2;
+      color: #e8f7ff;
       white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .glb-info-badge-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      flex-shrink: 0;
+    }
+    .glb-info-badge-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 2px;
+      font-size: 9px;
+      line-height: 1.35;
+      color: #b8d4e8;
+    }
+    .glb-info-badge-row + .glb-info-badge-row {
+      margin-top: 2px;
+    }
+    .glb-info-badge-label {
+      flex-shrink: 0;
+      color: rgba(184, 212, 232, 0.82);
+    }
+    .glb-info-badge-value {
+      flex: 1;
+      min-width: 0;
+      color: #e8f7ff;
+      word-break: break-all;
     }
     .glb-info-badge-scan {
       position: absolute;
@@ -56,38 +131,42 @@ const ensureGlbInfoBadgeStyle = () => {
       left: -100%;
       width: 60%;
       height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.18), transparent);
+      background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.14), transparent);
       animation: glb-info-badge-scan 2.8s ease-in-out infinite;
       pointer-events: none;
     }
     .glb-info-badge-dot {
-      width: 8px;
-      height: 8px;
+      width: 5px;
+      height: 5px;
       border-radius: 50%;
       flex-shrink: 0;
-      box-shadow: 0 0 8px currentColor;
+      box-shadow: 0 0 5px currentColor;
     }
     .glb-info-badge-text {
-      font-size: 12px;
+      font-size: 9px;
       font-weight: 600;
-      letter-spacing: 0.08em;
+      line-height: 1;
+      letter-spacing: 0.04em;
       color: #e8f7ff;
-      text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
+      text-shadow: 0 0 4px rgba(0, 229, 255, 0.5);
     }
     .glb-info-badge-pointer {
       width: 0;
       height: 0;
-      margin: 2px auto 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 6px solid rgba(0, 229, 255, 0.55);
-      filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4));
+      margin: 1px auto 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 5px solid rgba(0, 229, 255, 0.55);
+      filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.4));
     }
     .glb-info-badge.is-online .glb-info-badge-inner {
       border-color: rgba(0, 255, 170, 0.55);
       box-shadow:
-        inset 0 0 12px rgba(0, 255, 170, 0.1),
-        0 0 16px rgba(0, 255, 170, 0.2);
+        inset 0 0 8px rgba(0, 255, 170, 0.1),
+        0 0 12px rgba(0, 255, 170, 0.2);
+    }
+    .glb-info-badge.is-online .glb-info-badge-header {
+      border-bottom-color: rgba(0, 255, 170, 0.22);
     }
     .glb-info-badge.is-online .glb-info-badge-dot {
       background: #00ffaa;
@@ -96,7 +175,7 @@ const ensureGlbInfoBadgeStyle = () => {
     }
     .glb-info-badge.is-online .glb-info-badge-text {
       color: #d6fff0;
-      text-shadow: 0 0 6px rgba(0, 255, 170, 0.45);
+      text-shadow: 0 0 4px rgba(0, 255, 170, 0.45);
     }
     .glb-info-badge.is-online .glb-info-badge-pointer {
       border-top-color: rgba(0, 255, 170, 0.6);
@@ -104,9 +183,11 @@ const ensureGlbInfoBadgeStyle = () => {
     .glb-info-badge.is-offline .glb-info-badge-inner {
       border-color: rgba(255, 92, 92, 0.55);
       box-shadow:
-        inset 0 0 12px rgba(255, 92, 92, 0.12),
-        0 0 18px rgba(255, 92, 92, 0.25);
-      animation: glb-info-badge-shake 4s ease-in-out infinite;
+        inset 0 0 8px rgba(255, 92, 92, 0.12),
+        0 0 14px rgba(255, 92, 92, 0.22);
+    }
+    .glb-info-badge.is-offline .glb-info-badge-header {
+      border-bottom-color: rgba(255, 92, 92, 0.22);
     }
     .glb-info-badge.is-offline .glb-info-badge-dot {
       background: #ff5c5c;
@@ -115,7 +196,7 @@ const ensureGlbInfoBadgeStyle = () => {
     }
     .glb-info-badge.is-offline .glb-info-badge-text {
       color: #ffe8e8;
-      text-shadow: 0 0 8px rgba(255, 92, 92, 0.55);
+      text-shadow: 0 0 6px rgba(255, 92, 92, 0.55);
     }
     .glb-info-badge.is-offline .glb-info-badge-pointer {
       border-top-color: rgba(255, 92, 92, 0.65);
@@ -132,17 +213,65 @@ const ensureGlbInfoBadgeStyle = () => {
       0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #ff5c5c; }
       50% { opacity: 0.45; transform: scale(1.25); box-shadow: 0 0 14px #ff5c5c, 0 0 22px rgba(255, 92, 92, 0.6); }
     }
-    @keyframes glb-info-badge-shake {
-      0%, 92%, 100% { transform: translateX(0); }
-      93% { transform: translateX(-1px); }
-      94% { transform: translateX(1px); }
-      95% { transform: translateX(-1px); }
-      96% { transform: translateX(0); }
-    }
   `
   document.head.appendChild(style)
 }
 
+/**
+ * @param {GlbInfoBadgeData} info
+ * @returns {string}
+ */
+const buildBadgeHtml = (info) => {
+  const data = normalizeInfo(info)
+  return `
+    <div class="glb-info-badge-inner">
+      <div class="glb-info-badge-header">
+        <span class="glb-info-badge-name">${data.vehicleName}</span>
+        <span class="glb-info-badge-status">
+          <span class="glb-info-badge-dot"></span>
+          <span class="glb-info-badge-text">${data.isOffline ? '离线' : '在线'}</span>
+        </span>
+      </div>
+      <div class="glb-info-badge-row">
+        <span class="glb-info-badge-label">经度：</span>
+        <span class="glb-info-badge-value glb-info-badge-lng">${data.lng}</span>
+      </div>
+      <div class="glb-info-badge-row">
+        <span class="glb-info-badge-label">纬度：</span>
+        <span class="glb-info-badge-value glb-info-badge-lat">${data.lat}</span>
+      </div>
+      <div class="glb-info-badge-row">
+        <span class="glb-info-badge-label">位置：</span>
+        <span class="glb-info-badge-value glb-info-badge-address">${data.address}</span>
+      </div>
+      <span class="glb-info-badge-scan"></span>
+    </div>
+    <div class="glb-info-badge-pointer"></div>
+  `
+}
+
+/**
+ * @param {HTMLElement} badgeEl
+ * @param {GlbInfoBadgeData} info
+ */
+const renderBadgeContent = (badgeEl, info) => {
+  const data = normalizeInfo(info)
+  badgeEl.classList.toggle('is-offline', data.isOffline)
+  badgeEl.classList.toggle('is-online', !data.isOffline)
+
+  const nameEl = badgeEl.querySelector('.glb-info-badge-name')
+  const textEl = badgeEl.querySelector('.glb-info-badge-text')
+  const lngEl = badgeEl.querySelector('.glb-info-badge-lng')
+  const latEl = badgeEl.querySelector('.glb-info-badge-lat')
+  const addressEl = badgeEl.querySelector('.glb-info-badge-address')
+
+  if (nameEl) nameEl.textContent = data.vehicleName
+  if (textEl) textEl.textContent = data.isOffline ? '离线' : '在线'
+  if (lngEl) lngEl.textContent = data.lng
+  if (latEl) latEl.textContent = data.lat
+  if (addressEl) addressEl.textContent = data.address
+}
+
 /**
  * 读取 Entity 模型 minimumPixelSize（远景会被放大显示，需同步到屏幕偏移）
  * @param {Cesium.Entity} entity
@@ -162,11 +291,6 @@ const getEntityMinimumPixelSize = (entity, time) => {
 
 /**
  * 根据模型包围球估算车顶世界坐标
- * @param {Cesium.Viewer} map
- * @param {Cesium.Entity} entity
- * @param {Cesium.Cartesian3} basePos
- * @param {number} fallbackOffset
- * @returns {Cesium.Cartesian3|null}
  */
 const resolveModelTopWorldPosition = (map, entity, basePos, fallbackOffset) => {
   Cesium.Transforms.eastNorthUpToFixedFrame(basePos, undefined, scratchEnu)
@@ -191,13 +315,6 @@ const resolveModelTopWorldPosition = (map, entity, basePos, fallbackOffset) => {
 
 /**
  * 将车顶世界坐标转为屏幕坐标，并兼顾 minimumPixelSize 的可视高度
- * @param {Cesium.Scene} scene
- * @param {Cesium.Cartesian3} basePos
- * @param {Cesium.Cartesian3} topWorldPos
- * @param {number} minPixelSize
- * @param {number} pixelGap
- * @param {number} heightScale
- * @returns {{ x: number, y: number }|null}
  */
 const resolveBadgeScreenPosition = (scene, basePos, topWorldPos, minPixelSize, pixelGap, heightScale) => {
   const anchorWin = scene.cartesianToCanvasCoordinates(basePos)
@@ -212,7 +329,6 @@ const resolveBadgeScreenPosition = (scene, basePos, topWorldPos, minPixelSize, p
     offsetY = (anchorWin.y - topWin.y) * heightScale
   }
 
-  // 包围球常大于实际 mesh，对过大偏移做软压缩
   if (offsetY > 0 && minPixelSize > 0 && offsetY > minPixelSize * 0.5) {
     const base = minPixelSize * 0.3
     offsetY = base + (offsetY - base) * 0.35
@@ -236,17 +352,18 @@ const resolveBadgeScreenPosition = (scene, basePos, topWorldPos, minPixelSize, p
 }
 
 /**
- * 在模型头顶创建在线/离线信息牌
+ * 在模型头顶创建车辆信息牌
  * @param {Object} options
  * @param {Cesium.Viewer} options.map
- * @param {Cesium.Entity} [options.entity] GLB 实体（用于读取包围球与 minimumPixelSize）
+ * @param {Cesium.Entity} [options.entity]
  * @param {string|number} [options.mapId]
- * @param {Function} options.getPosition 获取模型世界坐标
- * @param {Function} [options.getVisible] 是否显示信息牌
- * @param {boolean} [options.isOffline=false] true=离线，false=在线
- * @param {number} [options.labelOffset=1] 模型未加载完成时的兜底高度（米）
- * @param {number} [options.pixelGap=0] 信息牌与车顶之间的像素间距
- * @param {number} [options.heightScale=0.72] 屏幕偏移收紧系数（越小越贴近车顶）
+ * @param {Function} options.getPosition
+ * @param {Function} [options.getInfo] 获取车辆信息
+ * @param {Function} [options.getVisible]
+ * @param {GlbInfoBadgeData} [options.info] 初始信息
+ * @param {number} [options.labelOffset=1]
+ * @param {number} [options.pixelGap=0]
+ * @param {number} [options.heightScale=0.72]
  */
 export function createGlbInfoBadge(options = {}) {
   const {
@@ -254,8 +371,9 @@ export function createGlbInfoBadge(options = {}) {
     entity,
     mapId,
     getPosition,
+    getInfo,
     getVisible,
-    isOffline = false,
+    info: initialInfo = {},
     labelOffset = DEFAULT_LABEL_OFFSET,
     pixelGap = DEFAULT_PIXEL_GAP,
     heightScale = DEFAULT_HEIGHT_SCALE,
@@ -269,17 +387,9 @@ export function createGlbInfoBadge(options = {}) {
 
   const batchManager = getDroneLabelBatchManager(map, mapId)
   const badgeEl = document.createElement('div')
-  badgeEl.className = `glb-info-badge ${isOffline ? 'is-offline' : 'is-online'}`
-  badgeEl.innerHTML = `
-    <div class="glb-info-badge-inner">
-      <span class="glb-info-badge-dot"></span>
-      <span class="glb-info-badge-text">${isOffline ? '离线' : '在线'}</span>
-      <span class="glb-info-badge-scan"></span>
-    </div>
-    <div class="glb-info-badge-pointer"></div>
-  `
-
-  const textEl = badgeEl.querySelector('.glb-info-badge-text')
+  badgeEl.className = 'glb-info-badge'
+  badgeEl.innerHTML = buildBadgeHtml(initialInfo)
+  renderBadgeContent(badgeEl, initialInfo)
 
   const batchEntry = {
     updatePosition(hideByHeight) {
@@ -337,14 +447,14 @@ export function createGlbInfoBadge(options = {}) {
   batchManager.container.appendChild(badgeEl)
   batchManager.add(batchEntry)
 
+  const updateInfo = (info = {}) => {
+    renderBadgeContent(badgeEl, info)
+    return normalizeInfo(info)
+  }
+
   const setOfflineStatus = (offline) => {
-    const nextOffline = Boolean(offline)
-    badgeEl.classList.toggle('is-offline', nextOffline)
-    badgeEl.classList.toggle('is-online', !nextOffline)
-    if (textEl) {
-      textEl.textContent = nextOffline ? '离线' : '在线'
-    }
-    return nextOffline
+    const currentInfo = typeof getInfo === 'function' ? getInfo() : initialInfo
+    return updateInfo({ ...currentInfo, isOffline: Boolean(offline) })
   }
 
   const destroy = () => {
@@ -353,6 +463,7 @@ export function createGlbInfoBadge(options = {}) {
   }
 
   return {
+    updateInfo,
     setOfflineStatus,
     destroy,
   }

package/js/index.js

@@ -9,6 +9,7 @@ export { createCustomToolbarButtons } from './customToolbarButtons.js'
 export { drawFence } from './drawFence.js'
 export { drawFenceNew } from './drawFenceNew.js'
 export { measureDistance } from './measureDistance.js'
+export { measureBearing } from './measureBearing.js'
 export { createDroneRippleDom } from './droneRipple.js'
 export { createGlbInfoBadge } from './glbInfoBadge.js'
 export { geometryConfig } from './geometry.js'

package/js/measureBearing.js

@@ -0,0 +1,379 @@
+/**
+ * 地图测向：点击起点与终点，测量第二点相对于第一点的北向角（北向 0°，顺时针）
+ *
+ * @author huweili
+ * @email czxyhuweili@163.com
+ * @version 1.0.0
+ */
+import * as Cesium from 'cesium'
+import { useMapStore } from './stores/mapStore.js'
+
+function formatBearingDegrees(deg) {
+  if (!Number.isFinite(deg)) return '--'
+  return `${(((deg % 360) + 360) % 360).toFixed(1)}°`
+}
+
+function getGroundCartesianFromScreen(map, screenPosition) {
+  if (!screenPosition) return null
+
+  const scene = map.scene
+  let cartesian = null
+
+  if (scene.pickPositionSupported) {
+    cartesian = scene.pickPosition(screenPosition)
+  }
+
+  if (!Cesium.defined(cartesian)) {
+    const ray = map.camera.getPickRay(screenPosition)
+    if (!ray) return null
+    cartesian = scene.globe.pick(ray, scene)
+  }
+
+  if (!Cesium.defined(cartesian)) return null
+
+  const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+  return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0)
+}
+
+function cartesianToLngLat(cartesian) {
+  const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+  return {
+    lng: Cesium.Math.toDegrees(cartographic.longitude),
+    lat: Cesium.Math.toDegrees(cartographic.latitude),
+  }
+}
+
+function computeGeodesicBearing(lng1, lat1, lng2, lat2) {
+  const φ1 = Cesium.Math.toRadians(lat1)
+  const φ2 = Cesium.Math.toRadians(lat2)
+  const Δλ = Cesium.Math.toRadians(lng2 - lng1)
+  const y = Math.sin(Δλ) * Math.cos(φ2)
+  const x = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ)
+  return (Cesium.Math.toDegrees(Math.atan2(y, x)) + 360) % 360
+}
+
+function computeBearingResult(start, end) {
+  const azimuth = computeGeodesicBearing(start.lng, start.lat, end.lng, end.lat)
+  const dist = Cesium.Cartesian3.distance(
+    Cesium.Cartesian3.fromDegrees(start.lng, start.lat, 0),
+    Cesium.Cartesian3.fromDegrees(end.lng, end.lat, 0),
+  )
+  return {
+    azimuth,
+    azimuthText: formatBearingDegrees(azimuth),
+    distance: dist,
+  }
+}
+
+export function measureBearing() {
+  const mapStore = useMapStore()
+
+  const createMouseTipEntity = (map, options) => {
+    return map.entities.add({
+      id: options.id,
+      position: new Cesium.CallbackProperty(() => options.getPosition(), false),
+      label: {
+        text: new Cesium.CallbackProperty(() => options.getText(), false),
+        font: options.font || 'bold 10px Microsoft YaHei',
+        fillColor: options.fillColor || Cesium.Color.WHITE,
+        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+        outlineColor: Cesium.Color.BLACK,
+        outlineWidth: 2,
+        showBackground: true,
+        backgroundColor: Cesium.Color.fromCssColorString(options.backgroundColor || 'rgba(0, 0, 0, 0.7)'),
+        backgroundPadding: options.backgroundPadding || new Cesium.Cartesian2(4, 4),
+        verticalOrigin: options.verticalOrigin || Cesium.VerticalOrigin.BOTTOM,
+        horizontalOrigin: options.horizontalOrigin || Cesium.HorizontalOrigin.LEFT,
+        pixelOffset: options.pixelOffset || new Cesium.Cartesian2(18, -18),
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, options.maxDistance || 2000000),
+      },
+    })
+  }
+
+  /**
+   * @param {Object} options
+   * @param {string} options.id
+   * @param {string} [options.mapId]
+   * @param {string} [options.color='#ffd400']
+   * @param {(result: Object) => void} [options.onFinish]
+   * @returns {Object|null}
+   */
+  const startBearingMeasure = (options = {}) => {
+    const map = mapStore.getMap(options.mapId)
+    if (!map) {
+      console.error('[测向] 地图实例不存在')
+      return null
+    }
+    if (!options.id) {
+      console.error('[测向] 必须提供 id')
+      return null
+    }
+    if (mapStore.hasGraphicMap(options.id, options.mapId)) {
+      console.warn(`[测向] id ${options.id} 已存在`)
+      return null
+    }
+
+    const color = Cesium.Color.fromCssColorString(options.color || '#ffd400')
+
+    let startPosition = null
+    let endPosition = null
+    let floatingPosition = null
+    let cursorPosition = null
+    let startPointEntity = null
+    let endPointEntity = null
+    let lineEntity = null
+    let labelEntity = null
+    let tipEntity = null
+    let deleteButtonEntity = null
+    let handler = null
+    let deleteHandler = null
+    let isFinished = false
+
+    const tempIds = {
+      startPoint: `${options.id}_bearing_start`,
+      endPoint: `${options.id}_bearing_end`,
+      line: `${options.id}_bearing_line`,
+      label: `${options.id}_bearing_label`,
+      tip: `${options.id}_bearing_tip`,
+      deleteButton: `${options.id}_bearing_delete`,
+    }
+
+    const getLinePositions = () => {
+      if (!startPosition) return []
+      const target = endPosition || floatingPosition
+      if (!target) return [startPosition]
+      return [startPosition, target]
+    }
+
+    const getMidPosition = () => {
+      const target = endPosition || floatingPosition
+      if (!startPosition || !target) return startPosition || target || cursorPosition || null
+      const s = Cesium.Cartographic.fromCartesian(startPosition)
+      const e = Cesium.Cartographic.fromCartesian(target)
+      return Cesium.Cartesian3.fromRadians(
+        (s.longitude + e.longitude) / 2,
+        (s.latitude + e.latitude) / 2,
+        0,
+      )
+    }
+
+    const getCurrentBearingText = () => {
+      const target = endPosition || floatingPosition
+      if (!startPosition || !target) return '--'
+      const start = cartesianToLngLat(startPosition)
+      const end = cartesianToLngLat(target)
+      return computeBearingResult(start, end).azimuthText
+    }
+
+    const getTipText = () => {
+      if (!startPosition) return '点击确定起点'
+      if (!endPosition) return `点击确定终点，当前北向角：${getCurrentBearingText()}`
+      return `测向完成，北向角：${getCurrentBearingText()}`
+    }
+
+    const ensurePreviewEntities = () => {
+      if (!startPointEntity) {
+        startPointEntity = map.entities.add({
+          id: tempIds.startPoint,
+          position: startPosition,
+          point: {
+            pixelSize: 6,
+            color,
+            outlineColor: Cesium.Color.WHITE,
+            outlineWidth: 1.5,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.5, 5000000, 0.5),
+          },
+        })
+      }
+
+      if (!lineEntity) {
+        lineEntity = map.entities.add({
+          id: tempIds.line,
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => getLinePositions(), false),
+            width: 3,
+            material: new Cesium.PolylineGlowMaterialProperty({ color, glowPower: 0.25 }),
+            clampToGround: true,
+          },
+        })
+      }
+
+      if (!labelEntity) {
+        labelEntity = map.entities.add({
+          id: tempIds.label,
+          position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+          label: {
+            text: new Cesium.CallbackProperty(() => `北向角 ${getCurrentBearingText()}`, false),
+            font: 'bold 10px Microsoft YaHei',
+            fillColor: Cesium.Color.WHITE,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            showBackground: true,
+            backgroundColor: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 0.75)'),
+            backgroundPadding: new Cesium.Cartesian2(4, 4),
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            pixelOffset: new Cesium.Cartesian2(0, -16),
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+          },
+        })
+      }
+    }
+
+    const createEndPointEntity = () => {
+      if (endPointEntity || !endPosition) return
+      endPointEntity = map.entities.add({
+        id: tempIds.endPoint,
+        position: endPosition,
+        point: {
+          pixelSize: 6,
+          color,
+          outlineColor: Cesium.Color.WHITE,
+          outlineWidth: 1.5,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.5, 5000000, 0.5),
+        },
+      })
+    }
+
+    const removeEntities = () => {
+      [startPointEntity, endPointEntity, lineEntity, labelEntity, deleteButtonEntity, tipEntity].forEach((entity) => {
+        if (entity) map.entities.remove(entity)
+      })
+      startPointEntity = null
+      endPointEntity = null
+      lineEntity = null
+      labelEntity = null
+      deleteButtonEntity = null
+      tipEntity = null
+    }
+
+    const destroyGraphic = () => {
+      if (handler) {
+        handler.destroy()
+        handler = null
+      }
+      if (deleteHandler) {
+        deleteHandler.destroy()
+        deleteHandler = null
+      }
+      removeEntities()
+      mapStore.removeGraphicMap(options.id, options.mapId)
+    }
+
+    const cancel = () => {
+      if (isFinished) return
+      if (handler) {
+        handler.destroy()
+        handler = null
+      }
+      removeEntities()
+    }
+
+    const finalize = () => {
+      if (isFinished || !startPosition || !endPosition) return null
+      isFinished = true
+      if (handler) {
+        handler.destroy()
+        handler = null
+      }
+      if (tipEntity) {
+        map.entities.remove(tipEntity)
+        tipEntity = null
+      }
+
+      createEndPointEntity()
+
+      deleteButtonEntity = map.entities.add({
+        id: tempIds.deleteButton,
+        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+        label: {
+          text: '✕',
+          font: 'bold 12px Arial',
+          fillColor: color,
+          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+          outlineColor: Cesium.Color.BLACK,
+          outlineWidth: 2,
+          verticalOrigin: Cesium.VerticalOrigin.CENTER,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      })
+
+      deleteHandler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
+      deleteHandler.setInputAction((movement) => {
+        const picked = map.scene.pick(movement.position)
+        if (!Cesium.defined(picked?.id)) return
+        if (picked.id === deleteButtonEntity || picked.id === tempIds.deleteButton) {
+          destroyGraphic()
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+      const start = cartesianToLngLat(startPosition)
+      const end = cartesianToLngLat(endPosition)
+      const result = { id: options.id, start, end, ...computeBearingResult(start, end) }
+
+      mapStore.setGraphicMap(options.id, {
+        id: options.id,
+        type: 'measureBearing',
+        result,
+        destroy: destroyGraphic,
+      }, options.mapId)
+
+      if (typeof options.onFinish === 'function') options.onFinish(result)
+      return result
+    }
+
+    tipEntity = createMouseTipEntity(map, {
+      id: tempIds.tip,
+      getPosition: () => cursorPosition || endPosition || floatingPosition || startPosition,
+      getText: getTipText,
+    })
+
+    handler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
+
+    handler.setInputAction((movement) => {
+      if (isFinished) return
+      cursorPosition = getGroundCartesianFromScreen(map, movement.endPosition)
+      if (startPosition && cursorPosition) {
+        floatingPosition = cursorPosition
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+
+    handler.setInputAction((click) => {
+      if (isFinished) return
+      const cartesian = getGroundCartesianFromScreen(map, click.position)
+      if (!cartesian) return
+
+      if (!startPosition) {
+        startPosition = cartesian
+        floatingPosition = cartesian
+        cursorPosition = cartesian
+        ensurePreviewEntities()
+        return
+      }
+
+      endPosition = cartesian
+      floatingPosition = null
+      createEndPointEntity()
+      finalize()
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    handler.setInputAction(() => {
+      cancel()
+    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+
+    return { id: options.id, finish: finalize, cancel, destroy: destroyGraphic }
+  }
+
+  return {
+    startBearingMeasure,
+    formatBearingDegrees,
+  }
+}

package/js/movePoint.js

@@ -84,7 +84,7 @@ export function movePointConfig(baseUrl) {
   }
 
   /**
-   * 移动 GLB 信息牌点位到新的坐标位置，并可选更新在线/离线状态
+   * 移动 GLB 信息牌点位到新的坐标位置，并更新车辆信息
    * @param options 配置选项
    * @param options.pointId 点位唯一标识
    * @param options.lng 新的经度
@@ -92,6 +92,8 @@ export function movePointConfig(baseUrl) {
    * @param options.height 高度（可选，默认0）
    * @param options.heading 朝向（可选，默认0）
    * @param options.pitch 俯仰（可选，默认0）
+   * @param options.vehicleName 车辆名称（可选）
+   * @param options.address 位置描述（可选）
    * @param options.isOffline 是否离线（true=离线，false=在线；不传则保持原状态）
    * @param options.mapId 地图ID
    */
@@ -137,7 +139,13 @@ export function movePointConfig(baseUrl) {
       )
     }
 
-    if (options.isOffline !== undefined && typeof point.setOfflineStatus === 'function') {
+    if (typeof point.updateInfo === 'function') {
+      const infoPatch = { lng, lat }
+      if (options.vehicleName !== undefined) infoPatch.vehicleName = options.vehicleName
+      if (options.address !== undefined) infoPatch.address = options.address
+      if (options.isOffline !== undefined) infoPatch.isOffline = options.isOffline
+      point.updateInfo(infoPatch)
+    } else if (options.isOffline !== undefined && typeof point.setOfflineStatus === 'function') {
       point.setOfflineStatus(options.isOffline)
     }
 

package/js/setPoint.js

@@ -221,7 +221,7 @@ export function setPoint(baseUrl) {
   }
 
   /**
-   * 设置点位（GLB 模型 + 头顶在线/离线信息牌）
+   * 设置点位（GLB 模型 + 头顶车辆信息牌）
    * @param options 配置选项
    * @param options.url GLB模型路径（本地/网络）
    * @param options.id 点位唯一标识
@@ -229,8 +229,9 @@ export function setPoint(baseUrl) {
    * @param options.lat 纬度
    * @param options.height 高度（可选，默认0）
    * @param options.heading 朝向（可选，默认0）
+   * @param options.vehicleName 车辆名称
+   * @param options.address 位置描述
    * @param options.isOffline 是否离线（true=离线，false=在线，默认 false）
-   * @param options.modelHeight 模型高度兜底值（米，可选，默认 1；未加载包围球时使用）
    * @param options.mapId 地图ID
    * @returns 创建的点位包装对象
    */
@@ -275,6 +276,13 @@ export function setPoint(baseUrl) {
     const glbPoint = {
       entity: modelEntity,
       isOffline,
+      info: {
+        vehicleName: options.vehicleName || '--',
+        lng,
+        lat,
+        address: options.address || '--',
+        isOffline,
+      },
       infoBadge: null,
       get position() {
         return this.entity.position
@@ -288,10 +296,20 @@ export function setPoint(baseUrl) {
       set orientation(value) {
         this.entity.orientation = value
       },
+      updateInfo(partial = {}) {
+        if (partial.lng !== undefined) this.info.lng = Number(partial.lng)
+        if (partial.lat !== undefined) this.info.lat = Number(partial.lat)
+        if (partial.vehicleName !== undefined) this.info.vehicleName = partial.vehicleName
+        if (partial.address !== undefined) this.info.address = partial.address
+        if (partial.isOffline !== undefined) {
+          this.isOffline = Boolean(partial.isOffline)
+          this.info.isOffline = this.isOffline
+        }
+        this.infoBadge?.updateInfo?.(this.info)
+        return this.info
+      },
       setOfflineStatus(offline) {
-        this.isOffline = Boolean(offline)
-        this.infoBadge?.setOfflineStatus?.(this.isOffline)
-        return this.isOffline
+        return this.updateInfo({ isOffline: offline })
       },
       destroy() {
         this.infoBadge?.destroy?.()
@@ -305,8 +323,8 @@ export function setPoint(baseUrl) {
       map,
       mapId,
       entity: modelEntity,
-      isOffline,
-      labelOffset: Number(options.modelHeight) > 0 ? Number(options.modelHeight) : undefined,
+      info: glbPoint.info,
+      getInfo: () => glbPoint.info,
       getPosition: () => {
         const posProp = modelEntity.position
         if (posProp instanceof Cesium.Cartesian3) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.2.98",
+  "version": "1.3.0",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",
@@ -41,6 +41,8 @@
     "./drawFenceNew.js": "./js/drawFenceNew.js",
     "./measureDistance": "./js/measureDistance.js",
     "./measureDistance.js": "./js/measureDistance.js",
+    "./measureBearing": "./js/measureBearing.js",
+    "./measureBearing.js": "./js/measureBearing.js",
     "./dronePlannedRoute": "./js/dronePlannedRoute.js",
     "./dronePlannedRoute.js": "./js/dronePlannedRoute.js",
     "./droneRipple": "./js/droneRipple.js",