吉安感知网项目-前端
shuishen
2026-01-22 e4bc365cdca026cf7c94717eb5fad3b80cce1567
applications/drone-command/src/components/map-container/device-map-container.vue
@@ -1,7 +1,7 @@
<template>
   <div class="map-shell">
      <CommonCesiumMap ref="mapRef" class="command-cesium map-container" :dom-id="props.containerId" :active="true"
         :flat-mode="false" :terrain="false" :layer-mode="4" :contour="false" :boundary="false"
         :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="100000"
         @ready="handleMapReady" @stage-change="handleStageChange" />
      <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.leftCollapsed }">
@@ -22,7 +22,15 @@
      <div v-if="popupVisible" class="device-popup" :style="popupStyle" @click.stop>
         <div class="device-popup__header">
            <span class="device-popup__title">{{ popupTitle }}</span>
            <el-tooltip
               class="device-popup__title-tooltip"
               :content="popupTitle"
               placement="top"
               effect="dark"
               :show-after="200"
            >
               <span class="device-popup__title">{{ popupTitleDisplay }}</span>
            </el-tooltip>
            <img class="device-popup__close" :src="popupClose" alt="" @click.stop="closePopup">
         </div>
@@ -344,7 +352,7 @@
   devices.forEach((item, index) => {
      const position = getDevicePosition(item)
      if (!position) return
      const entityId = `online-device-${item.id ?? index}`
      const entityId = `online-device-${item.id ?? index}-${index}`
      deviceEntityIds.add(entityId)
      addDeviceRings(position, entityId, detailVisible.value)
      const entity = viewer.entities.add({
@@ -496,11 +504,10 @@
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            font: '12pt Source Han Sans CN',
            font: '11pt Source Han Sans CN',
            eyeOffset: new Cesium.Cartesian3(0, 0, -20), // 让label "浮" 在广告牌前面
            pixelOffset: new Cesium.Cartesian2(2, -11),
            pixelOffset: new Cesium.Cartesian2(0, -48),
            pixelOffset: new Cesium.Cartesian2(0, -35),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         },
@@ -580,7 +587,13 @@
   top: `${popupPosition.value.y}px`,
}))
const POPUP_TITLE_MAX = 12
const popupTitle = computed(() => selectedDevice.value?.deviceName || selectedDevice.value?.deviceModel || '-')
const popupTitleOverflow = computed(() => popupTitle.value.length > POPUP_TITLE_MAX)
const popupTitleDisplay = computed(() => {
   if (!popupTitleOverflow.value) return popupTitle.value
   return `${popupTitle.value.slice(0, POPUP_TITLE_MAX)}……`
})
const popupStatusText = computed(() => {
   const status = selectedDevice.value?.status
   if (status === 0) return '在线'
@@ -829,6 +842,20 @@
         border-radius: 0px 0px 5px 5px;
      }
      .device-popup__title-tooltip {
         flex: 1;
         min-width: 0;
         display: block;
      }
      .device-popup__title {
         display: inline-block;
         max-width: 100%;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
      }
      .device-popup__close {
         cursor: pointer;
      }