| | |
| | | <script setup> |
| | | import * as Cesium from 'cesium' |
| | | import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue' |
| | | import { geomAnalysis } from '@ztzf/utils' |
| | | import { buildEllipsePositions } from '@/utils/cesium/shapeTools' |
| | | import { AREA_TYPE_STYLE_MAP, BUFFER_LEVEL_STYLES, DEFAULT_AREA_STYLE } from '@ztzf/constants' |
| | | import { fwDefenseZonePageApi } from '@/views/areaManage/defenseZone/defenseZoneApi' |
| | | import { fwAreaDivideListApi } from '@/views/areaManage/partition/partitionApi' |
| | | import { fwDefenseSceneListApi } from '@/views/areaManage/sceneConfig/sceneConfigApi' |
| | | import { cockpitAggregationApi } from '@/api/dataCockpit' |
| | |
| | | import DevicePopup from './components/DevicePopup.vue' |
| | | import DronePopup from './components/DronePopup.vue' |
| | | import { |
| | | RING_STYLES, |
| | | addDeviceRings, |
| | | createDroneTrackMaterial, |
| | | createRadialGradientMaterial, |
| | | getTexturedVertexFormat, |
| | | } from './device-map-materials' |
| | | import { getPointPositionsHeight } from '@/utils/cesium/mapUtil' |
| | | import { createDeviceRangePrimitiveWithHeight } from '@/utils/cesium/deviceRange' |
| | | import dzIcon from '@/assets/images/dataCockpit/map/dz-map-layer.png' |
| | | import yxIcon from '@/assets/images/dataCockpit/map/yx-map-layer.png' |
| | | |
| | |
| | | }) |
| | | const emit = defineEmits(['droneSignal', 'droneCounter', 'droneFavorite']) |
| | | |
| | | const DEFAULT_ZONE_PAGE_SIZE = 999 |
| | | |
| | | const mapRef = ref(null) |
| | | let viewer = null |
| | |
| | | let deviceBillboardCollection = null |
| | | let deviceRingOutlinePrimitives = [] |
| | | let deviceRingFillPrimitives = [] |
| | | let defenseZonePrimitive = null |
| | | let defenseZoneOutlinePrimitive = null |
| | | let partitionFillPrimitives = [] |
| | | let partitionOutlinePrimitives = [] |
| | | let aggregationSource = null |
| | |
| | | return range |
| | | } |
| | | |
| | | |
| | | const ensureCockpitPrimitiveLayer = () => { |
| | | if (!viewer) return |
| | | if (!cockpitPrimitiveLayer) { |
| | |
| | | if (!viewer) return |
| | | ensureCockpitPrimitiveLayer() |
| | | cockpitPrimitiveLayer.removeAll(false) |
| | | if (defenseZonePrimitive) cockpitPrimitiveLayer.add(defenseZonePrimitive) |
| | | if (defenseZoneOutlinePrimitive) cockpitPrimitiveLayer.add(defenseZoneOutlinePrimitive) |
| | | if (partitionFillPrimitives.length) { |
| | | partitionFillPrimitives.forEach(primitive => cockpitPrimitiveLayer.add(primitive)) |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | const clearDefenseZoneEntities = () => { |
| | | if (!viewer) return |
| | | if (defenseZonePrimitive) { |
| | | removeCockpitPrimitive(defenseZonePrimitive) |
| | | defenseZonePrimitive = null |
| | | } |
| | | if (defenseZoneOutlinePrimitive) { |
| | | removeCockpitPrimitive(defenseZoneOutlinePrimitive) |
| | | defenseZoneOutlinePrimitive = null |
| | | } |
| | | } |
| | | |
| | | const clearPartitionEntities = () => { |
| | | if (!viewer) return |
| | |
| | | |
| | | const setDetailVisibility = visible => { |
| | | detailVisible.value = visible |
| | | if (defenseZonePrimitive) defenseZonePrimitive.show = visible |
| | | if (defenseZoneOutlinePrimitive) defenseZoneOutlinePrimitive.show = visible |
| | | if (partitionFillPrimitives.length) { |
| | | partitionFillPrimitives.forEach(primitive => { |
| | | primitive.show = visible |
| | |
| | | reorderCockpitPrimitives() |
| | | } |
| | | |
| | | const renderDeviceEntities = devices => { |
| | | const renderDeviceEntities = async devices => { |
| | | if (!viewer) return |
| | | ensureCockpitPrimitiveLayer() |
| | | ensureDeviceCollections() |
| | |
| | | } |
| | | devicePickMap.clear() |
| | | deviceBillboardCollection.show = detailVisible.value |
| | | const ringFillInstancesByStyle = RING_STYLES.map(() => []) |
| | | const ringOutlineInstancesByStyle = RING_STYLES.map(() => []) |
| | | const deviceEntries = [] |
| | | const devicePositions = [] |
| | | devices.forEach((item, index) => { |
| | | const position = getDevicePosition(item) |
| | | if (!position) return |
| | | const entityId = `online-device-${item.id ?? index}-${index}` |
| | | const rangeMeters = getDeviceRange(item) |
| | | addDeviceRings(position, ringFillInstancesByStyle, ringOutlineInstancesByStyle, rangeMeters) |
| | | devicePositions.push({ lng: position.longitude, lat: position.latitude }) |
| | | const billboard = deviceBillboardCollection.add({ |
| | | position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0), |
| | | image: equipmentIcon, |
| | |
| | | }) |
| | | billboard.id = entityId |
| | | devicePickMap.set(entityId, { data: item, billboard }) |
| | | deviceEntries.push({ position, rangeMeters, billboard }) |
| | | }) |
| | | if (selectedTargetType.value === 'device' && selectedDeviceBillboard && !devicePickMap.has(selectedDeviceBillboard.id)) { |
| | | closePopup() |
| | | } |
| | | ringFillInstancesByStyle.forEach((instances, index) => { |
| | | if (!instances.length) return |
| | | const ring = RING_STYLES[index] |
| | | const alpha = ring.alpha ?? 0.64 |
| | | const innerRatio = |
| | | typeof ring.innerRatio === 'number' |
| | | ? ring.innerRatio |
| | | : ring.inner && ring.outer |
| | | ? Math.min(Math.max(ring.inner / ring.outer, 0), 0.9) |
| | | : 0 |
| | | const material = createRadialGradientMaterial( |
| | | Cesium.Color.fromCssColorString(ring.gradient[0]).withAlpha(alpha), |
| | | Cesium.Color.fromCssColorString(ring.gradient[1]).withAlpha(alpha), |
| | | { |
| | | gamma: 1.7, |
| | | innerCutoff: innerRatio, |
| | | if (deviceEntries.length) { |
| | | const heights = await getPointPositionsHeight(devicePositions, viewer) |
| | | deviceEntries.forEach((entry, index) => { |
| | | const height = Number(heights?.[index]?.ASL) |
| | | const centerHeight = Number.isFinite(height) ? height : 0 |
| | | if (entry.billboard) { |
| | | entry.billboard.position = Cesium.Cartesian3.fromDegrees( |
| | | entry.position.longitude, |
| | | entry.position.latitude, |
| | | centerHeight |
| | | ) |
| | | } |
| | | ) |
| | | const primitive = new Cesium.GroundPrimitive({ |
| | | geometryInstances: instances, |
| | | appearance: new Cesium.MaterialAppearance({ |
| | | material, |
| | | translucent: true, |
| | | }), |
| | | if (!Number.isFinite(entry.rangeMeters) || entry.rangeMeters <= 0) return |
| | | const primitive = createDeviceRangePrimitiveWithHeight(entry.position, entry.rangeMeters, centerHeight) |
| | | if (!primitive) return |
| | | primitive.show = detailVisible.value |
| | | addCockpitPrimitive(primitive) |
| | | deviceRingFillPrimitives.push(primitive) |
| | | }) |
| | | primitive.show = detailVisible.value |
| | | addCockpitPrimitive(primitive) |
| | | deviceRingFillPrimitives.push(primitive) |
| | | }) |
| | | ringOutlineInstancesByStyle.forEach(instances => { |
| | | if (!instances.length) return |
| | | const primitive = new Cesium.GroundPolylinePrimitive({ |
| | | geometryInstances: instances, |
| | | appearance: new Cesium.PolylineColorAppearance(), |
| | | }) |
| | | primitive.show = detailVisible.value |
| | | addCockpitPrimitive(primitive) |
| | | deviceRingOutlinePrimitives.push(primitive) |
| | | }) |
| | | } |
| | | reorderCockpitPrimitives() |
| | | } |
| | | |
| | | const getDefenseZonePositions = geom => { |
| | | const points = geomAnalysis(geom) |
| | | if (points.length < 3) return [] |
| | | const first = points[0] |
| | | const last = points[points.length - 1] |
| | | const list = |
| | | first && last && first.longitude === last.longitude && first.latitude === last.latitude |
| | | ? points.slice(0, -1) |
| | | : points |
| | | return list.map(item => Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude)) |
| | | } |
| | | |
| | | const elevatePositions = async (positions, height = POLYGON_HEIGHT_M) => { |
| | |
| | | |
| | | const getAreaTypeStyle = areaType => { |
| | | return AREA_TYPE_STYLE_MAP?.[String(areaType)] || DEFAULT_AREA_STYLE |
| | | } |
| | | |
| | | const buildZonePrimitives = async (zones, lineColor, fillColor1, fillColor2) => { |
| | | if (!viewer) return { primitive: null, outlinePrimitive: null } |
| | | const polygonInstances = [] |
| | | const lineInstances = [] |
| | | const positionGroups = [] |
| | | const texturedVertexFormat = getTexturedVertexFormat() |
| | | ; (zones || []).forEach(zone => { |
| | | if (!zone?.geom) return |
| | | const positions = getDefenseZonePositions(zone.geom) |
| | | if (!positions.length) return |
| | | positionGroups.push(positions) |
| | | }) |
| | | if (!positionGroups.length) return { primitive: null, outlinePrimitive: null } |
| | | const elevatedGroups = await Promise.all(positionGroups.map(group => elevatePositions(group))) |
| | | elevatedGroups.forEach(elevatedPositions => { |
| | | if (!elevatedPositions.length) return |
| | | const polygon = new Cesium.PolygonGeometry({ |
| | | polygonHierarchy: new Cesium.PolygonHierarchy(elevatedPositions), |
| | | perPositionHeight: true, |
| | | vertexFormat: texturedVertexFormat, |
| | | }) |
| | | polygonInstances.push( |
| | | new Cesium.GeometryInstance({ |
| | | geometry: polygon, |
| | | }) |
| | | ) |
| | | const linePositions = |
| | | elevatedPositions.length > 1 ? [...elevatedPositions, elevatedPositions[0]] : elevatedPositions |
| | | lineInstances.push( |
| | | new Cesium.GeometryInstance({ |
| | | geometry: new Cesium.PolylineGeometry({ |
| | | positions: linePositions, |
| | | width: 2, |
| | | }), |
| | | attributes: { |
| | | color: Cesium.ColorGeometryInstanceAttribute.fromColor( |
| | | Cesium.Color.fromCssColorString(lineColor) |
| | | ), |
| | | }, |
| | | }) |
| | | ) |
| | | }) |
| | | let primitive = null |
| | | if (polygonInstances.length) { |
| | | const baseColor1 = Cesium.Color.fromCssColorString(fillColor1) |
| | | const baseColor2 = Cesium.Color.fromCssColorString(fillColor2) |
| | | const material = createRadialGradientMaterial(baseColor1.withAlpha(0.64), baseColor2.withAlpha(0.64)) |
| | | primitive = new Cesium.Primitive({ |
| | | geometryInstances: polygonInstances, |
| | | appearance: new Cesium.MaterialAppearance({ |
| | | material, |
| | | translucent: true, |
| | | }), |
| | | }) |
| | | addCockpitPrimitive(primitive) |
| | | } |
| | | let outlinePrimitive = null |
| | | if (lineInstances.length) { |
| | | outlinePrimitive = new Cesium.Primitive({ |
| | | geometryInstances: lineInstances, |
| | | appearance: new Cesium.PolylineColorAppearance(), |
| | | }) |
| | | addCockpitPrimitive(outlinePrimitive) |
| | | } |
| | | return { primitive, outlinePrimitive } |
| | | } |
| | | |
| | | const buildPartitionPrimitives = async shapes => { |
| | |
| | | return shapes |
| | | } |
| | | |
| | | const renderDefenseZones = async zones => { |
| | | if (!viewer) return |
| | | clearDefenseZoneEntities() |
| | | const result = await buildZonePrimitives(zones, '#72F3FF', '#72F3FF', '#0A7C88') |
| | | defenseZonePrimitive = result.primitive |
| | | defenseZoneOutlinePrimitive = result.outlinePrimitive |
| | | if (defenseZonePrimitive) defenseZonePrimitive.show = detailVisible.value |
| | | if (defenseZoneOutlinePrimitive) defenseZoneOutlinePrimitive.show = detailVisible.value |
| | | reorderCockpitPrimitives() |
| | | } |
| | | |
| | | const renderPartitions = async zones => { |
| | | if (!viewer) return |
| | | clearPartitionEntities() |
| | |
| | | }) |
| | | } |
| | | reorderCockpitPrimitives() |
| | | } |
| | | |
| | | const loadDefenseZones = async () => { |
| | | if (!viewer) return |
| | | try { |
| | | const res = await fwDefenseZonePageApi({ current: 1, size: DEFAULT_ZONE_PAGE_SIZE }) |
| | | await renderDefenseZones(res?.data?.data?.records ?? []) |
| | | } catch (error) { |
| | | await renderDefenseZones([]) |
| | | } |
| | | } |
| | | |
| | | const loadPartitions = async () => { |
| | |
| | | const stage = getStageByHeight(height) |
| | | updateStageDisplay(stage) |
| | | renderDeviceEntities(props.onlineDevices) |
| | | loadDefenseZones() |
| | | loadPartitions() |
| | | loadAggregation() |
| | | loadCommandPosts() |
| | |
| | | onBeforeUnmount(() => { |
| | | document.removeEventListener('click', handleClickOutside) |
| | | clearDeviceEntities() |
| | | clearDefenseZoneEntities() |
| | | clearPartitionEntities() |
| | | clearAggregationEntities() |
| | | clearCommandPostEntities() |