| | |
| | | <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="图层控制" /> |
| | |
| | | type: Array, |
| | | default: () => [], |
| | | }, |
| | | leftCollapsed: { |
| | | rightCollapsed: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | |
| | | 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 = () => { |
| | |
| | | width: 40, |
| | | height: 56, |
| | | verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY, |
| | | }) |
| | | }) |
| | | } |
| | |
| | | ) |
| | | |
| | | watch( |
| | | () => props.leftCollapsed, |
| | | () => props.rightCollapsed, |
| | | isCollapsed => { |
| | | if (isCollapsed) showLayerPanel.value = false |
| | | } |
| | |
| | | setDroneVisibility(!showCluster) |
| | | } |
| | | |
| | | const handleMapReady = ({ viewer: mapViewer, publicCesium: mapPublic }) => { |
| | | const handleMapReady = async ({ viewer: mapViewer, publicCesium: mapPublic }) => { |
| | | if (mapReadyHandled) return |
| | | mapReadyHandled = true |
| | | viewer = mapViewer |
| | |
| | | const height = viewer?.camera?.positionCartographic?.height |
| | | const stage = getStageByHeight(height) |
| | | updateStageDisplay(stage) |
| | | await loadCommandPosts() |
| | | renderDeviceEntities(props.allDevices) |
| | | loadPartitions() |
| | | loadAggregation() |
| | | loadCommandPosts() |
| | | renderSimulatedDroneTrack(props.alarmDrones) |
| | | initDeviceClickHandler() |
| | | } |
| | |
| | | |
| | | .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); |
| | | } |
| | | } |
| | | |
| | |
| | | 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; |