多mb轨迹回放载荷显隐

This commit is contained in:
严争鸣 2025-04-27 17:11:06 +08:00
parent d7c196d88d
commit 20f73b3364
9 changed files with 240 additions and 73 deletions

Binary file not shown.

After

(image error) Size: 766 B

View File

@ -2,24 +2,13 @@ export default class Radar {
// 创建雷达罩
constructor(options) {
this.radius = options.radius
// this.viewer = options.viewer
// this.id = options.id
// this.entity = null
// this.radius = options.radius
// ;(this.longitude = options.position[0]),
// (this.latitude = options.position[1]),
// (this.position = Cesium.Cartesian3.fromDegrees(
// options.position[0],
// options.position[1]
// ))
// this.heading = 0
// this.positionArr = this.calcPoints(
// options.position[0],
// options.position[1],
// options.radius,
// 0
// ) //储存脏数据
// this.addEntities()
this.maximumCone = options.maximumCone || 0
this.minimumCone = options.minimumCone || 90
this.maximumClock = options.maximumClock || 0
this.minimumClock = options.minimumClock || 360
this.entity = null
this.bindEntity = options.bindEntity
}
cartesian32LonLat(cartesian3) {
const cartographic =
@ -31,50 +20,20 @@ export default class Radar {
return [lon, lat]
}
getRadar() {
// this.entity = this.viewer.entities.add({
// id: this.id,
// position: this.position,
// wall: {
// positions: new Cesium.CallbackProperty(() => {
// return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr)
// }, false),
// material: Cesium.Color.fromCssColorString('#00dcff82'),
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 0.0,
// 10.5e6
// ),
// },
// ellipsoid: {
// radii: new Cesium.Cartesian3(
// this.radius,
// this.radius,
// this.radius
// ),
// maximumCone: Cesium.Math.toRadians(90),
// material: Cesium.Color.fromCssColorString('#00dcff82'),
// outline: true,
// outlineColor: Cesium.Color.fromCssColorString('#00dcff'),
// outlineWidth: 1,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 0.0,
// 10.5e8
// ),
// },
// })
return {
// wall: {
// positions: new Cesium.CallbackProperty(() => {
// return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr)
// }, false),
// material: Cesium.Color.fromCssColorString('#00dcff82'),
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
// 0.0,
// 10.5e6
// ),
// },
position: new Cesium.CallbackProperty(() => {
const position =
this.bindEntity.position._value ||
this.bindEntity.position.getValue(viewer.clock.currentTime)
return position
}),
ellipsoid: {
innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0),
radii: new Cesium.Cartesian3(this.radius, this.radius, this.radius),
maximumCone: Cesium.Math.toRadians(90),
maximumCone: Cesium.Math.toRadians(this.maximumCone),
minimumCone: Cesium.Math.toRadians(this.minimumCone),
maximumClock: Cesium.Math.toRadians(this.maximumClock),
minimumClock: Cesium.Math.toRadians(this.minimumClock),
material: Cesium.Color.fromCssColorString('#00dcff82'),
outline: true,
outlineColor: Cesium.Color.fromCssColorString('#00dcff'),
@ -83,10 +42,20 @@ export default class Radar {
0.0,
10.5e8
),
slicePartitions: 24,
stackPartitions: 36,
},
orientation: this.bindEntity.orientation,
}
// this.addPostRender()
}
create() {
this.entity = viewer.entities.add(this.getRadar())
return this.entity
}
addPostRender() {
this.viewer.clock.onTick.addEventListener(() => {
this.heading += 1.0 //可调节转动速度

View File

@ -25,7 +25,7 @@ const {
changeTime,
} = useMultiTraj()
const timeRange = ref<string[]>([1183135200000 + 40 * 1000, 1183135360000])
const timeRange = ref<string[]>([1730620780000, 1730623260000])
const rangeShortcuts = {
近一天: () => {

View File

@ -0,0 +1,80 @@
import Radar from '@/js/Radar'
export function useDetectionLoad() {
return {
addSectorDetectionLoad,
addConicDetectionLoad,
}
}
function addSectorDetectionLoad({
radius,
maximumCone,
minimumCone,
maximumClock,
minimumClock,
bindEntity,
}) {
const radar = new Radar({
radius,
maximumCone,
minimumCone,
maximumClock,
minimumClock,
bindEntity,
})
const sector = radar.create()
return sector
}
function addConicDetectionLoad({
radius,
angle,
bindEntity,
heading,
pitch,
show = true,
}) {
const conicSensor = new CesiumSensorVolumes.ConicSensorGraphics({
show: true,
radius: radius * 1000,
innerHalfAngle: 0,
outerHalfAngle: Cesium.Math.toRadians(angle / 2),
minimumClockAngle: 0,
maximumClockAngle: 2 * Math.PI,
showIntersection: true,
intersectionColor: new Cesium.Color(1, 1, 1, 1),
intersectionWidth: 3,
lateralSurfaceMaterial: new Cesium.Color(0.0, 1.0, 1.0, 0.3),
})
const conic = viewer.entities.add({
position: new Cesium.CallbackProperty(() => {
const position =
bindEntity.position._value ||
bindEntity.position.getValue(viewer.clock.currentTime)
return position
}),
orientation: new Cesium.CallbackProperty(() => {
const position =
bindEntity.position._value ||
bindEntity.position.getValue(viewer.clock.currentTime)
return (
position &&
Cesium.Transforms.headingPitchRollQuaternion(
position,
new Cesium.HeadingPitchRoll(
// Cesium.Math.toRadians(heading),
Cesium.Math.toRadians(heading),
Cesium.Math.toRadians(pitch),
0
// Cesium.Math.toRadians(pitch)
) // 初始朝向
)
)
}),
conicSensor: conicSensor,
})
return conic
}

View File

@ -1,15 +1,19 @@
import { ref } from 'vue'
import { useSatellite } from '../../Satellite/hooks/satellite'
export function useMultiSatTraj() {
return { addSatelliteTraj, removeAllMultiSatelliteTraj }
return {
addSatelliteTraj,
removeAllMultiSatelliteTraj,
satellitePayloadStatusMap,
changeSatellitePayloadStatus,
}
}
const multiSatTrajMap = new Map()
const satellitePayloadStatusMap = ref(new Map())
const { addSatellite } = useSatellite()
function addSatelliteTraj(satelliteList = [], timeRange) {
console.log(satelliteList)
satelliteList.forEach(({ id, tle }) => {
if (!multiSatTrajMap.has(id)) {
const satellite = addSatellite(
@ -18,11 +22,18 @@ function addSatelliteTraj(satelliteList = [], timeRange) {
startTime: new Date(timeRange[0]).toISOString() || new Date(),
}
)
satellite.sensor = true
multiSatTrajMap.set(id, satellite)
satellitePayloadStatusMap.value.set(id, satellite.sensor)
}
})
}
function changeSatellitePayloadStatus(id, status) {
multiSatTrajMap.has(id) && (multiSatTrajMap.get(id).sensor = status)
}
function removeAllMultiSatelliteTraj() {
for (let [key, satellite] of multiSatTrajMap.entries()) {
satellite.destroy()

View File

@ -73,6 +73,8 @@ export function useMultiTraj() {
loadMultiHisTraj,
showMultiHisTrajDrawer,
showOrHideMultiHisTrajDrawer,
allMultiPayloadStatusMap,
changeRadarStatus,
}
}
@ -91,6 +93,7 @@ function showOrHideMultiHisTrajDrawer() {
}
const showMultiHisTrajCom = ref(false)
// 显示或隐藏多目标历史轨迹组件
function showOrHideMultiHisTraj() {
showMultiHisTrajCom.value = !showMultiHisTrajCom.value
@ -138,8 +141,18 @@ function loadMultiHisTraj(timeRange) {
setTimeRange(timeRange)
}
const { addMultiZBTraj, removeAllMultiZBTraj } = useMultiZBTraj()
const { addSatelliteTraj, removeAllMultiSatelliteTraj } = useMultiSatTraj()
const {
addMultiZBTraj,
removeAllMultiZBTraj,
ZBPayloadStatusMap,
changeZBPayloadStatus,
} = useMultiZBTraj()
const {
addSatelliteTraj,
removeAllMultiSatelliteTraj,
satellitePayloadStatusMap,
changeSatellitePayloadStatus,
} = useMultiSatTraj()
const { addHJTraj, removeAllMultiHJTraj } = useMultiHJTraj()
const { addMultiDDTraj, removeAllMultiDDTraj } = useMultiDDTraj()
@ -149,6 +162,31 @@ const typeFunc = {
satellite: { add: addSatelliteTraj, remove: removeAllMultiSatelliteTraj },
hj: { add: addHJTraj, remove: removeAllMultiHJTraj },
}
const allMultiPayloadStatusMap = ref({
zb: ZBPayloadStatusMap,
satellite: satellitePayloadStatusMap,
})
const allMultiPayloadChangeFun = {
zb: changeZBPayloadStatus,
satellite: changeSatellitePayloadStatus,
}
function changeRadarStatus({ id, type }) {
console.log(id, type)
const statusMap = allMultiPayloadStatusMap.value[type]
if (statusMap) {
console.log(statusMap)
if (statusMap.has(id)) {
const status = !statusMap.get(id)
statusMap.set(id, status)
typeof allMultiPayloadChangeFun[type] === 'function' &&
allMultiPayloadChangeFun[type](id, status)
}
}
}
// 添加轨迹实体
function addAllEntity(data) {
Object.keys(typeFunc).forEach(key => {

View File

@ -87,7 +87,7 @@ async function getSatelliteHisTraj({ ids, timeRange }) {
setTimeout(() => {
resolve([
{
id: 'ONEWEB-0012',
id: '11',
name: 'ONEWEB-0012',
tle: `ONEWEB-0012
1 44057U 19010A 24310.58073783 .00000090 00000+0 20246-3 0 9997

View File

@ -1,10 +1,13 @@
import { useEntity } from '@/hooks/entity'
import { getDirection } from '@/utils/pos'
import { useDetectionLoad } from './useDetectionLoad'
export function useMultiZBTraj() {
return {
multiZBTrajMap,
addMultiZBTraj,
removeAllMultiZBTraj,
ZBPayloadStatusMap,
changeZBPayloadStatus,
}
}
@ -23,7 +26,7 @@ function addMultiZBTraj(zbList) {
id,
targetType,
country,
extendInfo,
extendInfo: null,
})
const startTime = trajList[0].target_time
@ -46,7 +49,6 @@ function addMultiZBTraj(zbList) {
return Cesium.Math.toRadians(angleDegrees)
}
}, false)
Object.assign(ZBOpt, {
...getPositions(trajList, targetType),
...getPath(startTime, endTime),
@ -56,11 +58,48 @@ function addMultiZBTraj(zbList) {
console.log('ZBOpt', ZBOpt)
const ZBEntity = viewer.entities.add(ZBOpt)
// ZBEntity.billboard.show = false
// ZBEntity.model.show = true
addPayload(id, extendInfo, ZBEntity)
multiZBTrajMap.set(id, ZBEntity)
}
})
}
const { addSectorDetectionLoad, addConicDetectionLoad } = useDetectionLoad()
const payloadMap = new Map()
const ZBPayloadStatusMap = ref(new Map())
function addPayload(id, extendInfo, ZBEntity) {
extendInfo?.radarPayload &&
extendInfo.radarPayload.forEach(item => {
const radar = addSectorDetectionLoad({
id: `${item.id}`,
bindEntity: ZBEntity,
...item,
})
payloadMap.set(id, [...(payloadMap.get(id) || []), radar])
})
extendInfo?.airplaneConicPayload &&
extendInfo.airplaneConicPayload.forEach(item => {
const conic = addConicDetectionLoad({
id: `${item.id}`,
bindEntity: ZBEntity,
...item,
})
payloadMap.set(id, [...(payloadMap.get(id) || []), conic])
})
// console.log(payloadMap, 'payloadMap')
ZBPayloadStatusMap.value.set(id, true)
}
function changeZBPayloadStatus(id, status) {
payloadMap.get(id)?.forEach(item => {
item.show = status
})
}
function getPositions(trajList, targetType) {
const positionProperty = new Cesium.SampledPositionProperty()
@ -120,4 +159,11 @@ function removeAllMultiZBTraj() {
viewer.entities.remove(entity)
multiZBTrajMap.delete(key)
}
for (let [key, entity] of payloadMap.entries()) {
entity.forEach(item => {
viewer.entities.remove(item)
})
payloadMap.delete(key)
}
}

View File

@ -5,7 +5,8 @@ import Tree from '@/components/Tree/index.vue'
import TabsCom from '@/components/Tabs/index.vue'
import Bg from '@/assets/image/multiTraj/编组.png'
import RadarSwitch from '@/assets/image/multiTraj/开.png'
import RadarOpen from '@/assets/image/multiTraj/开.png'
import RadarClose from '@/assets/image/multiTraj/关备份.png'
import { useMultiTrajReq } from './hooks/useMultiTrajReq'
import { useMultiTraj } from './hooks/useMultiTraj'
@ -13,6 +14,7 @@ export default defineComponent({
name: 'MultiTrajPlayback',
setup() {
const { allTreeData, getAllTree } = useMultiTrajReq()
onMounted(() => {
getAllTree()
})
@ -23,17 +25,30 @@ export default defineComponent({
dd: 'dd',
hj: 'hj',
}
function renderSuffix({ option }) {
const idField = this.type === 'satellite' ? 'id' : 'dataId'
return option.extendInfo || option.data?.extendInfo ? (
<div class="pr-2">
<NIcon
size={14}
class="cursor-pointer text-gray-500 hover:text-blue-600"
onClick={() => {
onClick={e => {
e.stopPropagation()
changeRadarStatus({ type: this.type, id: option[idField] })
}}
>
<img src={RadarSwitch} class="h-full w-full" />
{allMultiPayloadStatusMap.value &&
allMultiPayloadStatusMap.value[this.type]?.get(option[idField]) ? (
<img src={RadarOpen} class="h-full w-full" />
) : (
<img
src={RadarClose}
style={`filter: contrast(0.2);`}
class="h-full w-full"
/>
)}
</NIcon>
</div>
) : undefined
@ -41,8 +56,11 @@ export default defineComponent({
const {
checkedAllKeys,
showMultiHisTrajCom,
showOrHideMultiHisTraj,
showOrHideMultiHisTrajDrawer,
allMultiPayloadStatusMap,
changeRadarStatus,
} = useMultiTraj()
const multiTrajAllTreeTabConfig = computed(() => {
@ -58,7 +76,9 @@ export default defineComponent({
label-field={key === 'satellite' ? 'name' : 'nodeName'}
showSearch
renderSuffix={
['zb', 'satellite'].includes(key) ? renderSuffix : () => ({})
['zb', 'satellite'].includes(key)
? renderSuffix.bind({ type: key })
: () => ({})
}
v-model:checked={checkedAllKeys.value[key]}
/>
@ -95,7 +115,10 @@ export default defineComponent({
)}
</div>
<NButton disabled={!canPlay.value} onClick={playMultiTraj}>
<NButton
disabled={!canPlay.value || showMultiHisTrajCom}
onClick={playMultiTraj}
>
轨迹回放
</NButton>
</div>