ddtj/ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多mb轨迹控制打开和显隐等

Browse Source
This commit is contained in:
严争鸣 2025-04-28 08:56:02 +08:00
parent 20f73b3364
commit 61acdaa593
6 changed files with 223 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/Content/components/WidgetNav/components/MultiHisTraj.jsx
View File

@ -1,10 +1,11 @@
import { NIcon, NPopover } from 'naive-ui'
import { useMultiMBTrajectory } from '@/views/Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj'
// import { useMultiMBTrajectory } from '@/views/Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj'
import { useMultiTraj } from '@/views/MultiTrajPlayback/hooks/useMultiTraj'
export default defineComponent({
setup() {
const { showMultiHisTrajCom, showOrHideMultiHisTraj } =
useMultiMBTrajectory()
const { createMultiTrajPlayback, createOrDestroyMultiTrajPlayback } =
useMultiTraj()
// const handleClick = () => {
// showMultiHisTrajCom.value = !showMultiHisTrajCom.value
@ -19,9 +20,9 @@ export default defineComponent({
trigger: () => (
<div
class={`btn-class ${
showMultiHisTrajCom.value ? 'checked' : ''
createMultiTrajPlayback.value ? 'checked' : ''
}`}
onClick={showOrHideMultiHisTraj}
onClick={createOrDestroyMultiTrajPlayback}
>
<NIcon size="16">
<svg

4
src/views/Content/index.vue
View File

@ -39,7 +39,8 @@ const { getTextConfigs, initWebSocket } = useTextReport()
const { showHisImageCom } = useHisImage()
const { showHisTrajCom } = useMBTrajectory()
const { showMultiHisTrajCom, showMultiHisTrajDrawer } = useMultiTraj()
const { showMultiHisTrajCom, showMultiHisTrajDrawer, createMultiTrajPlayback } =
useMultiTraj()
const { showDdConfigCom } = useDaodan()
const getConfig = async () => {
const res = await getTextConfigs()
@ -242,6 +243,7 @@ const showOrHideTextReport = () => {
</div>
<multi-traj-playback
v-if="createMultiTrajPlayback"
class="btn-transform absolute left-0 top-0"
:class="showMultiHisTrajDrawer ? '' : 'btn-transform-pos'"
/>

63
src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js
View File

@ -1,6 +1,37 @@
import { ref } from 'vue'
import { useSatellite } from '../../Satellite/hooks/satellite'
export function useMultiSatTraj() {
const multiSatTrajMap = new Map()
const satellitePayloadStatusMap = ref(new Map())
const { addSatellite } = useSatellite()
function addSatelliteTraj(satelliteList = [], timeRange) {
satelliteList.forEach(({ id, tle }) => {
if (!multiSatTrajMap.has(id)) {
const satellite = addSatellite(
{ id, tle },
{
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()
multiSatTrajMap.delete(key)
}
}
return {
addSatelliteTraj,
removeAllMultiSatelliteTraj,
@ -8,35 +39,3 @@ export function useMultiSatTraj() {
changeSatellitePayloadStatus,
}
}
const multiSatTrajMap = new Map()
const satellitePayloadStatusMap = ref(new Map())
const { addSatellite } = useSatellite()
function addSatelliteTraj(satelliteList = [], timeRange) {
satelliteList.forEach(({ id, tle }) => {
if (!multiSatTrajMap.has(id)) {
const satellite = addSatellite(
{ id, tle },
{
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()
multiSatTrajMap.delete(key)
}
}

34
src/views/MultiTrajPlayback/hooks/useMultiTraj.js
View File

@ -5,7 +5,6 @@ import { useMultiZBTraj } from './useMultiZBTraj'
import { useMultiHJTraj } from './useMultiHJTraj'
import { useMultiDDTraj } from './useMultiDDTraj'
const timesMap = ref(new Map())
const times = ref([])
const customElapsedTime = ref(0)
@ -75,9 +74,21 @@ export function useMultiTraj() {
showOrHideMultiHisTrajDrawer,
allMultiPayloadStatusMap,
changeRadarStatus,
createMultiTrajPlayback,
createOrDestroyMultiTrajPlayback,
}
}
function resetAllEffect() {
checkedAllKeys.value = {
zb: [],
dd: [],
satellite: [],
hj: [],
}
resetPlayEffect()
}
// 所有树勾选的ids
const checkedAllKeys = ref({
zb: [],
@ -86,6 +97,13 @@ const checkedAllKeys = ref({
hj: [],
})
const createMultiTrajPlayback = ref(false)
function createOrDestroyMultiTrajPlayback() {
createMultiTrajPlayback.value = !createMultiTrajPlayback.value
!createMultiTrajPlayback.value &&
(resetAllEffect(), resetTime(), removeAllEntity())
}
const showMultiHisTrajDrawer = ref(false)
// 显示或隐藏多目标历史轨迹抽屉
function showOrHideMultiHisTrajDrawer() {
@ -97,8 +115,16 @@ const showMultiHisTrajCom = ref(false)
// 显示或隐藏多目标历史轨迹组件
function showOrHideMultiHisTraj() {
showMultiHisTrajCom.value = !showMultiHisTrajCom.value
!showMultiHisTrajCom.value &&
(resetPlayEffect(), resetTime(), removeAllEntity())
}
!showMultiHisTrajCom.value && (resetTime(), removeAllEntity())
function resetPlayEffect() {
times.value = []
customElapsedTime.value = 0
animationSpeed.value = 1
isAnimationRunning.value = false
isPaused.value = false
}
const { getZBHisTraj, getSatelliteHisTraj, getDDHisTraj, getHJHisTraj } =
@ -106,8 +132,6 @@ const { getZBHisTraj, getSatelliteHisTraj, getDDHisTraj, getHJHisTraj } =
// 加载多目标历史轨迹
function loadMultiHisTraj(timeRange) {
console.log(timeRange)
const dictFunc = {
zb: getZBHisTraj,
dd: getDDHisTraj,
@ -174,10 +198,8 @@ const allMultiPayloadChangeFun = {
}
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)

311
src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js
View File

@ -2,6 +2,160 @@ import { useEntity } from '@/hooks/entity'
import { getDirection } from '@/utils/pos'
import { useDetectionLoad } from './useDetectionLoad'
export function useMultiZBTraj() {
const multiZBTrajMap = new Map()
const { getMBEntityOpt } = useEntity()
// 添加多目标目标和轨迹
function addMultiZBTraj(zbList) {
removeAllMultiZBTraj()
Object.keys(zbList).forEach(async id => {
if (!multiZBTrajMap.has(id)) {
const { info, list: trajList } = zbList[id]
const { targetType, country, extendInfo } = info
const ZBOpt = await getMBEntityOpt({
id,
targetType,
country,
extendInfo: null,
})
const startTime = trajList[0].target_time
const endTime = trajList.at(-1).target_time
const positions = getPositions(trajList, targetType)
ZBOpt.billboard.rotation = new Cesium.CallbackProperty(currentTime => {
const point1 = positions.position.getValue(currentTime)
const nextTime = Cesium.JulianDate.addSeconds(
currentTime,
2,
new Cesium.JulianDate()
)
const point2 = positions.position.getValue(nextTime)
if (point2 && point1) {
const heading = getDirection(point1, point2)
const angleDegrees = Cesium.Math.toDegrees(heading)
return Cesium.Math.toRadians(angleDegrees)
}
}, false)
Object.assign(ZBOpt, {
...getPositions(trajList, targetType),
...getPath(startTime, endTime),
// ...getAvailability(startTime, endTime),
})
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()
trajList.forEach(({ target_time, target_lon, target_lat }, index) => {
const time = Cesium.JulianDate.fromDate(new Date(target_time))
const position = Cesium.Cartesian3.fromDegrees(
target_lon,
target_lat,
window.settings.mbDict[targetType].height
)
positionProperty.addSample(time, position)
// viewer.entities.add({
// position,
// point: {
// pixelSize: 3,
// color: Cesium.Color.RED,
// },
// })
})
positionProperty.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
})
return {
position: positionProperty,
orientation: new Cesium.VelocityOrientationProperty(positionProperty),
}
}
function getPath(startTime, endTime) {
console.log(new Date(startTime).getTime() - new Date(endTime).getTime())
return {
path: new Cesium.PathGraphics({
width: 0.5,
// show: true,
resolution: 1,
leadTime: new Date(startTime).getTime() - new Date(endTime).getTime(),
trailTime: new Date(startTime).getTime() - new Date(endTime).getTime(),
material: Cesium.Color.fromRandom().withAlpha(1),
}),
}
}
function getAvailability(startTime, endTime) {
const start = Cesium.JulianDate.fromDate(new Date(startTime))
const stop = Cesium.JulianDate.fromDate(new Date(endTime))
return {
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({ start: start, stop: stop }),
]),
}
}
function removeAllMultiZBTraj() {
for (let [key, entity] of multiZBTrajMap.entries()) {
viewer.entities.remove(entity)
multiZBTrajMap.delete(key)
}
for (let [key, entity] of payloadMap.entries()) {
entity.forEach(item => {
viewer.entities.remove(item)
})
payloadMap.delete(key)
}
}
return {
multiZBTrajMap,
addMultiZBTraj,
@ -10,160 +164,3 @@ export function useMultiZBTraj() {
changeZBPayloadStatus,
}
}
const multiZBTrajMap = new Map()
const { getMBEntityOpt } = useEntity()
// 添加多目标目标和轨迹
function addMultiZBTraj(zbList) {
removeAllMultiZBTraj()
Object.keys(zbList).forEach(async id => {
if (!multiZBTrajMap.has(id)) {
const { info, list: trajList } = zbList[id]
const { targetType, country, extendInfo } = info
const ZBOpt = await getMBEntityOpt({
id,
targetType,
country,
extendInfo: null,
})
const startTime = trajList[0].target_time
const endTime = trajList.at(-1).target_time
const positions = getPositions(trajList, targetType)
ZBOpt.billboard.rotation = new Cesium.CallbackProperty(currentTime => {
const point1 = positions.position.getValue(currentTime)
const nextTime = Cesium.JulianDate.addSeconds(
currentTime,
2,
new Cesium.JulianDate()
)
const point2 = positions.position.getValue(nextTime)
if (point2 && point1) {
const heading = getDirection(point1, point2)
const angleDegrees = Cesium.Math.toDegrees(heading)
return Cesium.Math.toRadians(angleDegrees)
}
}, false)
Object.assign(ZBOpt, {
...getPositions(trajList, targetType),
...getPath(startTime, endTime),
// ...getAvailability(startTime, endTime),
})
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()
trajList.forEach(({ target_time, target_lon, target_lat }, index) => {
const time = Cesium.JulianDate.fromDate(new Date(target_time))
const position = Cesium.Cartesian3.fromDegrees(
target_lon,
target_lat,
window.settings.mbDict[targetType].height
)
positionProperty.addSample(time, position)
// viewer.entities.add({
// position,
// point: {
// pixelSize: 3,
// color: Cesium.Color.RED,
// },
// })
})
positionProperty.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
})
return {
position: positionProperty,
orientation: new Cesium.VelocityOrientationProperty(positionProperty),
}
}
function getPath(startTime, endTime) {
console.log(new Date(startTime).getTime() - new Date(endTime).getTime())
return {
path: new Cesium.PathGraphics({
width: 0.5,
// show: true,
resolution: 1,
leadTime: new Date(startTime).getTime() - new Date(endTime).getTime(),
trailTime: new Date(startTime).getTime() - new Date(endTime).getTime(),
material: Cesium.Color.fromRandom().withAlpha(1),
}),
}
}
function getAvailability(startTime, endTime) {
const start = Cesium.JulianDate.fromDate(new Date(startTime))
const stop = Cesium.JulianDate.fromDate(new Date(endTime))
return {
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({ start: start, stop: stop }),
]),
}
}
function removeAllMultiZBTraj() {
for (let [key, entity] of multiZBTrajMap.entries()) {
viewer.entities.remove(entity)
multiZBTrajMap.delete(key)
}
for (let [key, entity] of payloadMap.entries()) {
entity.forEach(item => {
viewer.entities.remove(item)
})
payloadMap.delete(key)
}
}

2
src/views/MultiTrajPlayback/index.jsx
View File

@ -116,7 +116,7 @@ export default defineComponent({
</div>
<NButton
disabled={!canPlay.value || showMultiHisTrajCom}
disabled={!canPlay.value || showMultiHisTrajCom.value}
onClick={playMultiTraj}
>
轨迹回放