huweili-cesium 1.3.2 → 1.3.4

package/components/wsIndicator/wsIndicator.vue

@@ -1,152 +1,175 @@
 <template>
-    <!-- WebSocket连接状态指示器：动态挂载到 Cesium 自动生成的 .cesium-viewer 内 -->
-    <Teleport v-if="cesiumViewerEl" :to="cesiumViewerEl">
-      <div class="ws-drone-indicator">
-        <div class="ws-drone-indicator-dot" :class="wsIndicatorClass"></div>
-      </div>
-    </Teleport>
-  </template>
-  
-  <script setup>
-  /**
-   * WsIndicator.vue - WebSocket连接状态指示器组件
-   * 
-   * 组件功能：
-   * - 实时显示WebSocket连接状态
-   * - 提供可视化的连接状态反馈
-   * 
-   * 状态说明：
-   * - 断开连接时红色高亮（.disconnected）
-   * - 连接正常时微弱绿色（.connected）
-   * - 收到无人机数据时绿色高亮闪烁（.active）
-   */
-  import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-  import { useEventBus } from '../../js/utils/useEventBus.js'
-  
-  const { on, off } = useEventBus()
-  
-  // Cesium Viewer 自动生成的 DOM 容器
-  const cesiumViewerEl = ref(null)
-  
-  // WebSocket连接状态
-  const wsConnected = ref(false)
-  // 无人机数据接收高亮状态（用于闪烁效果）
-  const wsDroneIndicatorActive = ref(false)
-  
-  /**
-   * 计算指示器的CSS类名
-   * 根据连接状态和数据接收状态返回对应的类名
-   */
-  const wsIndicatorClass = computed(() => {
-    if (!wsConnected.value) {
-      return 'disconnected' // 断开连接时红色高亮
-    }
-    if (wsDroneIndicatorActive.value) {
-      return 'active' // 收到无人机数据时绿色高亮
-    }
-    return 'connected' // 连接正常但无数据时微弱绿色
-  })
-  
-  /**
-   * 处理无人机数据接收事件
-   * 收到数据时设置连接状态为true，并触发高亮闪烁
-   */
-  const handleWsDroneDataReceived = () => {
-    wsConnected.value = true // 收到数据说明连接正常
-    wsDroneIndicatorActive.value = true // 触发绿色高亮
-    // 300ms后恢复微弱绿色状态
-    setTimeout(() => {
-      wsDroneIndicatorActive.value = false
-    }, 300)
+  <!-- WebSocket连接状态指示器：挂载到当前地图容器内的 .cesium-viewer -->
+  <Teleport v-if="cesiumViewerEl" :to="cesiumViewerEl">
+    <div class="ws-drone-indicator">
+      <div class="ws-drone-indicator-dot" :class="wsIndicatorClass"></div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+/**
+ * WsIndicator.vue - WebSocket连接状态指示器组件
+ *
+ * 状态说明：
+ * - 断开连接时红色高亮（.disconnected）
+ * - 连接正常时微弱绿色（.connected）
+ * - 收到无人机数据时绿色高亮闪烁（.active）
+ */
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { useEventBus } from '../../js/utils/useEventBus.js'
+
+const props = defineProps({
+  /** 地图根容器 ref（index.vue 中的 cesium-container） */
+  container: {
+    type: Object,
+    default: null,
+  },
+})
+
+const { on, off } = useEventBus()
+
+const cesiumViewerEl = ref(null)
+const wsConnected = ref(false)
+const wsDroneIndicatorActive = ref(false)
+
+let viewerObserver = null
+let resolveTimer = null
+
+const wsIndicatorClass = computed(() => {
+  if (!wsConnected.value) {
+    return 'disconnected'
   }
-  
-  /**
-   * 处理WebSocket连接成功事件
-   */
-  const handleWsConnected = () => {
-    wsConnected.value = true
+  if (wsDroneIndicatorActive.value) {
+    return 'active'
   }
-  
-  /**
-   * 处理WebSocket断开连接事件
-   */
-  const handleWsDisconnected = () => {
-    wsConnected.value = false
+  return 'connected'
+})
+
+const resolveViewerElement = () => {
+  const root = props.container?.value
+  if (!root) return null
+  return root.querySelector('.cesium-viewer')
+}
+
+const bindViewerElement = () => {
+  const viewer = resolveViewerElement()
+  if (!viewer) return false
+  cesiumViewerEl.value = viewer
+  return true
+}
+
+const stopResolveViewerElement = () => {
+  viewerObserver?.disconnect()
+  viewerObserver = null
+  if (resolveTimer) {
+    clearTimeout(resolveTimer)
+    resolveTimer = null
   }
-  
-  /**
-   * 组件挂载时订阅事件
-   */
-  onMounted(async () => {
-    await nextTick()
-    cesiumViewerEl.value = document.querySelector('.cesium-viewer')
-  
-    // 订阅无人机数据接收事件
-    on('wsDroneDataReceived', handleWsDroneDataReceived)
-    // 订阅WebSocket连接成功事件
-    on('wsConnected', handleWsConnected)
-    // 订阅WebSocket断开连接事件
-    on('wsDisconnected', handleWsDisconnected)
-    
-    // 检查全局连接状态（处理组件挂载前已连接的情况）
-    if (window.wsConnected) {
-      wsConnected.value = true
+}
+
+const startResolveViewerElement = () => {
+  stopResolveViewerElement()
+  if (bindViewerElement()) return
+
+  const root = props.container?.value
+  if (!root) return
+
+  viewerObserver = new MutationObserver(() => {
+    if (bindViewerElement()) {
+      stopResolveViewerElement()
     }
   })
-  
-  /**
-   * 组件卸载时取消订阅，避免内存泄漏
-   */
-  onUnmounted(() => {
-    off('wsDroneDataReceived', handleWsDroneDataReceived)
-    off('wsConnected', handleWsConnected)
-    off('wsDisconnected', handleWsDisconnected)
-  })
-  </script>
-  
-  <style scoped lang="scss">
-  /* WebSocket指示器容器 */
-  .ws-drone-indicator {
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
-    width: 13px;
-    height: 13px;
-    border-radius: 3px;
-    background: rgba(40, 40, 40, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2147483647;
-    pointer-events: none;
-  }
-  
-  /* 指示器圆点基础样式 */
-  .ws-drone-indicator-dot {
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: #0f3;
-    opacity: 0.25;
-    transition: opacity 0.08s ease, box-shadow 0.08s ease;
-  }
-  
-  /* 连接正常状态 - 微弱绿色 */
-  .ws-drone-indicator-dot.connected {
-    opacity: 0.3;
-    box-shadow: none;
-  }
-  
-  /* 收到数据状态 - 绿色高亮 */
-  .ws-drone-indicator-dot.active {
-    opacity: 1;
-    box-shadow: 0 0 6px #0f3;
-  }
-  
-  /* 断开连接状态 - 红色高亮 */
-  .ws-drone-indicator-dot.disconnected {
-    background: #f33;
-    opacity: 1;
-    box-shadow: 0 0 6px #f33;
+  viewerObserver.observe(root, { childList: true, subtree: true })
+
+  // 地图初始化较慢时兜底重试，避免 Teleport 目标一直为空
+  resolveTimer = window.setTimeout(() => {
+    bindViewerElement()
+    stopResolveViewerElement()
+  }, 10000)
+}
+
+const handleWsDroneDataReceived = () => {
+  wsConnected.value = true
+  wsDroneIndicatorActive.value = true
+  setTimeout(() => {
+    wsDroneIndicatorActive.value = false
+  }, 300)
+}
+
+const handleWsConnected = () => {
+  wsConnected.value = true
+}
+
+const handleWsDisconnected = () => {
+  wsConnected.value = false
+}
+
+watch(
+  () => props.container?.value,
+  () => {
+    cesiumViewerEl.value = null
+    startResolveViewerElement()
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  on('wsDroneDataReceived', handleWsDroneDataReceived)
+  on('wsConnected', handleWsConnected)
+  on('wsDisconnected', handleWsDisconnected)
+
+  if (window.wsConnected) {
+    wsConnected.value = true
   }
-  </style>
+})
+
+onUnmounted(() => {
+  stopResolveViewerElement()
+  off('wsDroneDataReceived', handleWsDroneDataReceived)
+  off('wsConnected', handleWsConnected)
+  off('wsDisconnected', handleWsDisconnected)
+})
+</script>
+
+<style scoped lang="scss">
+.ws-drone-indicator {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  width: 13px;
+  height: 13px;
+  border-radius: 3px;
+  background: rgba(40, 40, 40, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2147483647;
+  pointer-events: none;
+}
+
+.ws-drone-indicator-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #0f3;
+  opacity: 0.25;
+  transition: opacity 0.08s ease, box-shadow 0.08s ease;
+}
+
+.ws-drone-indicator-dot.connected {
+  opacity: 0.3;
+  box-shadow: none;
+}
+
+.ws-drone-indicator-dot.active {
+  opacity: 1;
+  box-shadow: 0 0 6px #0f3;
+}
+
+.ws-drone-indicator-dot.disconnected {
+  background: #f33;
+  opacity: 1;
+  box-shadow: 0 0 6px #f33;
+}
+</style>

package/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cesium-map-wrapper">
     <div class="cesium-container" ref="cesiumContainer" />
-    <WsIndicator />
+    <WsIndicator :container="cesiumContainer" />
   </div>
 </template>
 

package/js/drawFenceNew.js

@@ -1002,8 +1002,16 @@ export function drawFenceNew() {
     let centerPointEntity = null
     // activePointEntity：活动点实体（跟随鼠标的边界点）
     let activePointEntity = null
-    // ellipseEntity：椭圆实体（用于显示圆形围栏的预览）
-    let ellipseEntity = null
+    // circleWallEntity / circleOutlineEntity / radiusLineEntity：绘制过程预览（与最终围栏一致的贴地圆边）
+    let circleWallEntity = null
+    let circleOutlineEntity = null
+    let radiusLineEntity = null
+    // 预览几何缓存，仅在鼠标移动时更新，避免每帧重复计算
+    let previewCirclePositions = []
+    let previewWallMaxHeights = []
+    let previewWallMinHeights = []
+    let previewRadiusLinePositions = []
+    let previewRenderFrameId = null
     // tipEntity：提示文字实体（显示"点击确定圆心"等提示）
     let tipEntity = null
     // radiusLabelEntity：绘制过程中显示当前半径的标签
@@ -1018,7 +1026,9 @@ export function drawFenceNew() {
     // ==================== 临时实体ID配置 ====================
     // 这些是绘制过程中临时显示的实体，绘制完成后会清理
     const tempIds = {
-      ellipse: `${options.id}_draw_circle_wall`,  // 临时椭圆围栏
+      circleWall: `${options.id}_draw_circle_wall`,
+      circleOutline: `${options.id}_draw_circle_outline`,
+      radiusLine: `${options.id}_draw_radius_line`,
       center: `${options.id}_draw_center_point`,  // 临时圆心点
       active: `${options.id}_draw_active_point`,  // 临时边界点
       tip: `${options.id}_draw_tip`,              // 临时提示文字
@@ -1139,6 +1149,42 @@ export function drawFenceNew() {
       })
     }
 
+    const updatePreviewGeometry = () => {
+      if (!centerPosition || !edgePosition) {
+        previewCirclePositions = []
+        previewWallMaxHeights = []
+        previewWallMinHeights = []
+        previewRadiusLinePositions = []
+        return
+      }
+
+      const radius = getRadius()
+      previewRadiusLinePositions = [centerPosition, edgePosition]
+
+      if (radius <= 0) {
+        previewCirclePositions = []
+        previewWallMaxHeights = []
+        previewWallMinHeights = []
+        return
+      }
+
+      const centerData = cartesianToLngLatHeight(centerPosition)
+      const circleLngLats = generateCircleLngLatPositions(centerData.lng, centerData.lat, radius)
+      const footprint = circleLngLats.map(cartesianFootprintFromLngLat)
+      previewCirclePositions = [...footprint, footprint[0]]
+      previewWallMaxHeights = previewCirclePositions.map(() => height)
+      previewWallMinHeights = previewCirclePositions.map(() => 0)
+    }
+
+    const schedulePreviewUpdate = () => {
+      if (previewRenderFrameId !== null) return
+      previewRenderFrameId = requestAnimationFrame(() => {
+        previewRenderFrameId = null
+        updatePreviewGeometry()
+        map.scene.requestRender()
+      })
+    }
+
     // ==================== 核心业务函数 ====================
 
     /**
@@ -1162,25 +1208,45 @@ export function drawFenceNew() {
         })
       }
 
-      // 2. 创建椭圆实体（如果还没有）
-      if (!ellipseEntity) {
-        ellipseEntity = map.entities.add({
-          id: tempIds.ellipse,
-          // 使用CallbackProperty实现动态更新：当centerPosition或radius变化时自动更新
-          position: new Cesium.CallbackProperty(() => centerPosition, false),
-          ellipse: {
-            // 椭圆的长半轴（动态半径）
-            semiMajorAxis: new Cesium.CallbackProperty(() => getRadius(), false),
-            // 椭圆的短半轴（与长半轴相同 = 圆形）
-            semiMinorAxis: new Cesium.CallbackProperty(() => getRadius(), false),
-            height: 0,  // 椭圆底部高度（地面）
-            extrudedHeight: height,  // 椭圆顶部高度（围栏高度）
-            material: color.withAlpha(0),  // 填充材质（透明）
-            outline: true,  // 显示边框
-            outlineColor: color,  // 边框颜色
-            outlineWidth,  // 边框宽度
-            numberOfVerticalLines: 64  // 垂直线条数，数值越大圆形越圆滑
-          }
+      // 2. 创建贴地圆边预览（确定圆心后显示，与最终围栏 polyline / wall 一致）
+      if (centerPosition && !circleWallEntity) {
+        circleWallEntity = map.entities.add({
+          id: tempIds.circleWall,
+          wall: {
+            positions: new Cesium.CallbackProperty(() => previewCirclePositions, false),
+            maximumHeights: new Cesium.CallbackProperty(() => previewWallMaxHeights, false),
+            minimumHeights: new Cesium.CallbackProperty(() => previewWallMinHeights, false),
+            material: color.withAlpha(0.18),
+            outline: true,
+            outlineColor: color,
+            outlineWidth,
+          },
+        })
+      }
+
+      if (centerPosition && !circleOutlineEntity) {
+        circleOutlineEntity = map.entities.add({
+          id: tempIds.circleOutline,
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => previewCirclePositions, false),
+            width: outlineWidth,
+            material: color,
+            clampToGround: true,
+            arcType: Cesium.ArcType.GEODESIC,
+          },
+        })
+      }
+
+      if (centerPosition && !radiusLineEntity) {
+        radiusLineEntity = map.entities.add({
+          id: tempIds.radiusLine,
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => previewRadiusLinePositions, false),
+            width: Math.max(1, outlineWidth - 1),
+            material: color.withAlpha(0.85),
+            clampToGround: true,
+            arcType: Cesium.ArcType.GEODESIC,
+          },
         })
       }
 
@@ -1241,17 +1307,28 @@ export function drawFenceNew() {
      */
     const cleanupTempEntities = () => {
       // 遍历所有临时实体，如果存在就从地图上移除
-      ;[ellipseEntity, centerPointEntity, activePointEntity, radiusLabelEntity, tipEntity, nameLabelEntity].forEach((entity) => {
+      ;[circleWallEntity, circleOutlineEntity, radiusLineEntity, centerPointEntity, activePointEntity, radiusLabelEntity, tipEntity, nameLabelEntity].forEach((entity) => {
         if (entity) {
           map.entities.remove(entity)
         }
       })
       // 将变量清空，防止内存泄露
-      ellipseEntity = null
+      circleWallEntity = null
+      circleOutlineEntity = null
+      radiusLineEntity = null
       centerPointEntity = null
       activePointEntity = null
       radiusLabelEntity = null
+      tipEntity = null
       nameLabelEntity = null
+      previewCirclePositions = []
+      previewWallMaxHeights = []
+      previewWallMinHeights = []
+      previewRadiusLinePositions = []
+      if (previewRenderFrameId !== null) {
+        cancelAnimationFrame(previewRenderFrameId)
+        previewRenderFrameId = null
+      }
     }
 
     /**
@@ -1291,9 +1368,17 @@ export function drawFenceNew() {
       const footprint = circleLngLats.map(cartesianFootprintFromLngLat)
       const wallPositions = [...footprint, footprint[0]]
 
-      if (ellipseEntity) {
-        map.entities.remove(ellipseEntity)
-        ellipseEntity = null
+      if (circleWallEntity) {
+        map.entities.remove(circleWallEntity)
+        circleWallEntity = null
+      }
+      if (circleOutlineEntity) {
+        map.entities.remove(circleOutlineEntity)
+        circleOutlineEntity = null
+      }
+      if (radiusLineEntity) {
+        map.entities.remove(radiusLineEntity)
+        radiusLineEntity = null
       }
 
       const fenceEntity = map.entities.add({
@@ -1451,6 +1536,7 @@ export function drawFenceNew() {
         centerPosition = Cesium.Cartesian3.clone(cartesian)
         edgePosition = Cesium.Cartesian3.clone(cartesian)  // 边界点初始化为圆心
         ensurePreviewEntities()  // 确保预览实体都创建好
+        schedulePreviewUpdate()
         emitChange()  // 触发变化回调
         return
       }
@@ -1473,6 +1559,7 @@ export function drawFenceNew() {
       // 如果已经确定了圆心 → 实时更新边界点，让预览跟随鼠标
       if (!centerPosition) return
       edgePosition = Cesium.Cartesian3.clone(cartesian)
+      schedulePreviewUpdate()
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
 
     // ==================== 事件3：鼠标右键点击 ====================

package/package.json

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