huweili-cesium 1.2.95 → 1.2.97

package/js/glbInfoBadge.js

@@ -8,7 +8,14 @@ import * as Cesium from 'cesium'
 import { getDroneLabelBatchManager } from './cardPool'
 
 const STYLE_ID = 'glb-info-badge-style'
-const DEFAULT_LABEL_OFFSET = 4
+const DEFAULT_LABEL_OFFSET = 1
+const DEFAULT_PIXEL_GAP = 2
+
+const scratchBoundingSphere = new Cesium.BoundingSphere()
+const scratchEnu = new Cesium.Matrix4()
+const scratchUp = new Cesium.Cartesian3()
+const scratchOffset = new Cesium.Cartesian3()
+const scratchTop = new Cesium.Cartesian3()
 
 const ensureGlbInfoBadgeStyle = () => {
   if (document.getElementById(STYLE_ID)) return
@@ -19,9 +26,10 @@ const ensureGlbInfoBadgeStyle = () => {
     .glb-info-badge {
       position: absolute;
       pointer-events: none;
-      transform: translateX(-50%);
+      transform: translate(-50%, -100%);
       z-index: 10000;
       filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.35));
+      will-change: left, top;
     }
     .glb-info-badge-inner {
       position: relative;
@@ -132,24 +140,108 @@ const ensureGlbInfoBadgeStyle = () => {
   document.head.appendChild(style)
 }
 
+/**
+ * 读取 Entity 模型 minimumPixelSize（远景会被放大显示，需同步到屏幕偏移）
+ * @param {Cesium.Entity} entity
+ * @param {Cesium.JulianDate} time
+ * @returns {number}
+ */
+const getEntityMinimumPixelSize = (entity, time) => {
+  const model = entity?.model
+  if (!model) return 0
+
+  const value = typeof model.minimumPixelSize?.getValue === 'function'
+    ? model.minimumPixelSize.getValue(time)
+    : model.minimumPixelSize
+
+  return Number.isFinite(value) ? value : 0
+}
+
+/**
+ * 根据模型包围球估算车顶世界坐标
+ * @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)
+  Cesium.Matrix4.getColumn(scratchEnu, 2, scratchUp)
+  Cesium.Cartesian3.normalize(scratchUp, scratchUp)
+
+  const dataSourceDisplay = map._dataSourceDisplay || map.dataSourceDisplay
+  if (entity && dataSourceDisplay?.getBoundingSphere) {
+    const ok = dataSourceDisplay.getBoundingSphere(entity, true, scratchBoundingSphere)
+    if (ok && scratchBoundingSphere.radius > 0) {
+      Cesium.Cartesian3.multiplyByScalar(scratchUp, scratchBoundingSphere.radius, scratchOffset)
+      return Cesium.Cartesian3.add(scratchBoundingSphere.center, scratchOffset, scratchTop)
+    }
+  }
+
+  Cesium.Cartesian3.multiplyByScalar(scratchUp, fallbackOffset, scratchOffset)
+  return Cesium.Cartesian3.add(basePos, scratchOffset, scratchTop)
+}
+
+/**
+ * 将车顶世界坐标转为屏幕坐标，并兼顾 minimumPixelSize 的可视高度
+ * @param {Cesium.Scene} scene
+ * @param {Cesium.Cartesian3} basePos
+ * @param {Cesium.Cartesian3} topWorldPos
+ * @param {number} minPixelSize
+ * @param {number} pixelGap
+ * @returns {{ x: number, y: number }|null}
+ */
+const resolveBadgeScreenPosition = (scene, basePos, topWorldPos, minPixelSize, pixelGap) => {
+  const anchorWin = scene.cartesianToCanvasCoordinates(basePos)
+  if (!anchorWin || Number.isNaN(anchorWin.x) || Number.isNaN(anchorWin.y)) {
+    return null
+  }
+
+  const topWin = scene.cartesianToCanvasCoordinates(topWorldPos)
+  let offsetY = 0
+
+  if (topWin && !Number.isNaN(topWin.y)) {
+    offsetY = anchorWin.y - topWin.y
+  }
+
+  // minimumPixelSize 会让远景模型在屏幕上被抬高，仅用世界高度会产生“飘”感
+  if (minPixelSize > 0) {
+    offsetY = Math.max(offsetY, minPixelSize * 0.55)
+  }
+
+  if (offsetY <= 0) {
+    offsetY = minPixelSize > 0 ? minPixelSize * 0.55 : 28
+  }
+
+  return {
+    x: anchorWin.x,
+    y: anchorWin.y - offsetY - pixelGap,
+  }
+}
+
 /**
  * 在模型头顶创建在线/离线信息牌
  * @param {Object} options
  * @param {Cesium.Viewer} options.map
+ * @param {Cesium.Entity} [options.entity] GLB 实体（用于读取包围球与 minimumPixelSize）
  * @param {string|number} [options.mapId]
  * @param {Function} options.getPosition 获取模型世界坐标
  * @param {Function} [options.getVisible] 是否显示信息牌
  * @param {boolean} [options.isOffline=false] true=离线，false=在线
- * @param {number} [options.labelOffset=4] 信息牌相对模型的高度偏移（米）
+ * @param {number} [options.labelOffset=1] 模型未加载完成时的兜底高度（米）
+ * @param {number} [options.pixelGap=2] 信息牌与车顶之间的像素间距
  */
 export function createGlbInfoBadge(options = {}) {
   const {
     map,
+    entity,
     mapId,
     getPosition,
     getVisible,
     isOffline = false,
     labelOffset = DEFAULT_LABEL_OFFSET,
+    pixelGap = DEFAULT_PIXEL_GAP,
   } = options
 
   if (!map || typeof getPosition !== 'function') {
@@ -172,27 +264,6 @@ export function createGlbInfoBadge(options = {}) {
 
   const textEl = badgeEl.querySelector('.glb-info-badge-text')
 
-  const getBadgePosition = () => {
-    const basePos = getPosition()
-    if (!basePos) return null
-
-    if (!(basePos instanceof Cesium.Cartesian3)) {
-      return null
-    }
-
-    const cartographic = Cesium.Cartographic.fromCartesian(basePos)
-    if (!Number.isFinite(cartographic.longitude) || !Number.isFinite(cartographic.latitude)) {
-      return null
-    }
-
-    const height = Number.isFinite(cartographic.height) ? cartographic.height : 0
-    return Cesium.Cartesian3.fromRadians(
-      cartographic.longitude,
-      cartographic.latitude,
-      height + labelOffset
-    )
-  }
-
   const batchEntry = {
     updatePosition(hideByHeight) {
       if (!map?.scene) {
@@ -210,34 +281,38 @@ export function createGlbInfoBadge(options = {}) {
         return
       }
 
-      let badgePosition
+      let basePos
       try {
-        badgePosition = getBadgePosition()
+        basePos = getPosition()
       } catch (err) {
         badgeEl.style.display = 'none'
         return
       }
 
-      if (!badgePosition) {
+      if (!basePos || !(basePos instanceof Cesium.Cartesian3)) {
         badgeEl.style.display = 'none'
         return
       }
 
-      let canvasPos
-      try {
-        canvasPos = map.scene.cartesianToCanvasCoordinates(badgePosition)
-      } catch (err) {
+      const time = map.clock.currentTime
+      const minPixelSize = getEntityMinimumPixelSize(entity, time)
+      const topWorldPos = resolveModelTopWorldPosition(map, entity, basePos, labelOffset)
+      const screenPos = resolveBadgeScreenPosition(
+        map.scene,
+        basePos,
+        topWorldPos,
+        minPixelSize,
+        pixelGap
+      )
+
+      if (!screenPos) {
         badgeEl.style.display = 'none'
         return
       }
 
-      if (canvasPos && !Number.isNaN(canvasPos.x) && !Number.isNaN(canvasPos.y)) {
-        badgeEl.style.left = `${canvasPos.x}px`
-        badgeEl.style.top = `${canvasPos.y - 8}px`
-        badgeEl.style.display = 'block'
-      } else {
-        badgeEl.style.display = 'none'
-      }
+      badgeEl.style.left = `${screenPos.x}px`
+      badgeEl.style.top = `${screenPos.y}px`
+      badgeEl.style.display = 'block'
     }
   }
 

package/js/setPoint.js

@@ -230,6 +230,7 @@ export function setPoint(baseUrl) {
    * @param options.height 高度（可选，默认0）
    * @param options.heading 朝向（可选，默认0）
    * @param options.isOffline 是否离线（true=离线，false=在线，默认 false）
+   * @param options.modelHeight 模型高度兜底值（米，可选，默认 1；未加载包围球时使用）
    * @param options.mapId 地图ID
    * @returns 创建的点位包装对象
    */
@@ -303,7 +304,9 @@ export function setPoint(baseUrl) {
     glbPoint.infoBadge = createGlbInfoBadge({
       map,
       mapId,
+      entity: modelEntity,
       isOffline,
+      labelOffset: Number(options.modelHeight) > 0 ? Number(options.modelHeight) : undefined,
       getPosition: () => {
         const posProp = modelEntity.position
         if (posProp instanceof Cesium.Cartesian3) {

package/package.json

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