| | |
| | | <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 }"> |
| | |
| | | |
| | | <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> |
| | |
| | | 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({ |
| | |
| | | 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, |
| | | }, |
| | |
| | | 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 '在线' |
| | |
| | | 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; |
| | | } |