吉安感知网项目-前端
shuishen
2026-02-12 3ec8d3625e6fb7614e2ec4bb02ed99a3cdf4cdb7
applications/drone-command/src/components/map-container/device-map-container.vue
@@ -1,11 +1,11 @@
<template>
<template>
   <div class="map-shell">
      <CommonCesiumMap ref="mapRef" class="command-cesium map-container" :dom-id="props.containerId" :active="true"
         :flat-mode="false" :terrain="true" :layer-mode="4" :contour="false" :boundary="false"
         :show-admin-boundary="true" :zoom-to-boundary="true" :enable-stage-emit="true"
         :cluster-height="CLUSTER_HEIGHT" :detail-height="DETAIL_HEIGHT" @ready="handleMapReady"
         @stage-change="handleStageChange" />
      <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.leftCollapsed }">
      <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.rightCollapsed }">
         <div class="layer-control-wrap" ref="layerWrapRef">
            <div class="layer-control" @click="toggleLayerPanel">
               <img :src="layerControlIcon" alt="图层控制" />
@@ -88,7 +88,7 @@
      type: Array,
      default: () => [],
   },
   leftCollapsed: {
   rightCollapsed: {
      type: Boolean,
      default: false,
   },
@@ -303,10 +303,10 @@
   if (deviceRingOutlinePrimitives.length) {
      deviceRingOutlinePrimitives.forEach(primitive => cockpitPrimitiveLayer.add(primitive))
   }
   if (commandPostBillboardCollection) cockpitPrimitiveLayer.add(commandPostBillboardCollection)
   if (deviceBillboardCollection) cockpitPrimitiveLayer.add(deviceBillboardCollection)
   if (droneTrackPolylineCollection) cockpitPrimitiveLayer.add(droneTrackPolylineCollection)
   if (droneTrackBillboardCollection) cockpitPrimitiveLayer.add(droneTrackBillboardCollection)
   if (deviceBillboardCollection) cockpitPrimitiveLayer.add(deviceBillboardCollection)
   if (commandPostBillboardCollection) cockpitPrimitiveLayer.add(commandPostBillboardCollection)
}
const clearDeviceEntities = () => {
@@ -1238,6 +1238,7 @@
            width: 40,
            height: 56,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
         })
      })
   }
@@ -1289,7 +1290,7 @@
)
watch(
   () => props.leftCollapsed,
   () => props.rightCollapsed,
   isCollapsed => {
      if (isCollapsed) showLayerPanel.value = false
   }
@@ -1330,7 +1331,7 @@
   setDroneVisibility(!showCluster)
}
const handleMapReady = ({ viewer: mapViewer, publicCesium: mapPublic }) => {
const  handleMapReady = async ({ viewer: mapViewer, publicCesium: mapPublic }) => {
   if (mapReadyHandled) return
   mapReadyHandled = true
   viewer = mapViewer
@@ -1340,10 +1341,10 @@
   const height = viewer?.camera?.positionCartographic?.height
   const stage = getStageByHeight(height)
   updateStageDisplay(stage)
   await loadCommandPosts()
   renderDeviceEntities(props.allDevices)
   loadPartitions()
   loadAggregation()
   loadCommandPosts()
   renderSimulatedDroneTrack(props.alarmDrones)
   initDeviceClickHandler()
}
@@ -1414,14 +1415,14 @@
.layer-control-root {
   position: absolute;
   left: 337px;
   bottom: 22px;
   z-index: 9;
   right: 337px;
   top: 95px;
   z-index: 11;
   transition: transform 0.3s ease-in-out;
   pointer-events: none;
   &.collapsed {
      transform: translateX(-317px);
      transform: translateX(317px);
   }
}
@@ -1448,12 +1449,13 @@
   display: flex;
   flex-direction: column;
   position: absolute;
   left: 66px;
   bottom: 0;
   right: 66px;
   top: 0;
   width: 160px;
   max-height: 442px;
   background: #191932;
   border-radius: 8px 8px 8px 8px;
   z-index: 99;
   .panel-title {
      padding: 0 16px;