| | |
| | | <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' |
| | |
| | | }) |
| | | 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 |
| | |
| | | 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 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) => { |
| | | if (!Array.isArray(positions) || !positions.length) return [] |
| | | if (!viewer) return positions |
| | |
| | | |
| | | 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() |