ts/src/views/Mubiao/hooks/mubiao.ts

211 lines
5.2 KiB
TypeScript
Raw Normal View History

2024-12-09 06:44:52 +00:00
import { ref } from 'vue'
2025-01-13 08:45:08 +00:00
import { Subscriber } from 'cesium-extends'
2024-12-09 06:44:52 +00:00
import { parseWKT } from '@/utils/parseWKT'
import { cesiumTime2Format } from '@/utils/date'
import { difference } from 'lodash'
import { getMubiaoPos, sendCheckedTargetIds } from '@/api/Mubiao'
import { useTree } from '@/utils/tree'
import { useMubiaoPopup } from './mubiaoPopup'
2025-01-06 01:18:58 +00:00
import { useEntity } from '@/hooks/entity'
// import { useEntity } from '@/stores/entity'
// import { storeToRefs } from 'pinia'
2024-12-09 06:44:52 +00:00
interface IMubiaoNode {
country: string
targetName: string
targetType: string
id: string
extendInfo: Record<string, any>
}
interface IMubiao {
dataId: string
data: IMubiaoNode
nodeName: string
children?: IMubiao[]
}
const data = ref<Record<string, any>[]>([])
2025-01-13 08:45:08 +00:00
const { mubiaoMap, getMBEntityOpt } = useEntity()
2025-01-06 01:18:58 +00:00
// const { mubiaoMap } = storeToRefs(entity)
// const mubiaoMap = ref<Map<string, any>>(new Map())
2024-12-09 06:44:52 +00:00
let subscriber: Subscriber | null = null
const { filterTreeNodeByField } = useTree()
const { popupMap, createPopup } = useMubiaoPopup()
export const useMubiao = () => {
const addMubiao = async (ids: Array<string | number>) => {
subscriber = new Subscriber(viewer, {
pickResult: {
enable: true,
},
})
postCheckedIds(ids)
// console.log(subscriber, 'subscriber')
// const ids = data.map(item => item.id)
const addIds = difference(ids, [...mubiaoMap.keys()])
const removeIds = difference([...mubiaoMap.keys()], ids)
// 添加
if (addIds.length > 0) {
const nodes = filterTreeNodeByField({
treeData: data.value,
params: addIds,
paramName: 'dataId',
})
const targetIdList = nodes.map(({ dataId }: IMubiao) => dataId)
// 获取目标坐标
const mbPos = await getMubiaoCurPos(targetIdList)
console.log('mbPos', mbPos)
nodes.forEach(({ data, dataId: id }: IMubiao) => {
const { target_time, target_geom } =
mbPos.find(item => item.target_id === id) ?? {}
const pos = parseWKT(target_geom).coordinates
2025-01-13 08:45:08 +00:00
const mbEntity = addMubiaoEntity({
id,
position: pos,
target_time,
targetType: data.targetType,
})
2024-12-09 06:44:52 +00:00
// console.log(mbEntity, 'mbEntity')
addEventSub(id, mbEntity, data)
mubiaoMap.set(id, mbEntity)
})
}
// 删除
if (removeIds.length > 0) {
removeIds.forEach(id => {
removeMubiao(id)
})
}
}
async function postCheckedIds(ids: Array<string | number>) {
const res = await sendCheckedTargetIds(ids)
}
const addMubiaoEntity = ({
id,
position,
target_time,
2025-01-13 08:45:08 +00:00
targetType,
2024-12-09 06:44:52 +00:00
}: Record<string, string | number | number[]>) => {
// 添加目标实体
2025-01-13 08:45:08 +00:00
// console.log(window.settings, targetType, '-----')
const mbEntityOpt = getMBEntityOpt({
id,
targetType,
})
2024-12-09 06:44:52 +00:00
const mubiaoEntity = viewer.entities.add({
name: id,
position: Cesium.Cartesian3.fromDegrees(...(position as number[])),
2025-01-13 08:45:08 +00:00
...mbEntityOpt,
2024-12-09 06:44:52 +00:00
})
return mubiaoEntity
}
const addEventSub = (
id: string | number,
entity: Cesium.Entity,
mbData: Record<string, any>
) => {
subscriber &&
subscriber.add(
entity,
(movement, entity) => {
// console.log(movement, 'movement')
// console.log(entity, 'entity')
createPopup(id, entity, mbData)
},
'LEFT_CLICK'
)
// console.log(subscriber, '-------')
}
const removeMubiao = (id: string | number) => {
if (mubiaoMap.has(id)) {
subscriber && subscriber.remove(mubiaoMap.get(id), 'LEFT_CLICK')
viewer.entities.remove(mubiaoMap.get(id))
mubiaoMap.delete(id)
}
if (popupMap.has(id)) {
popupMap.get(id).windowClose()
popupMap.delete(id)
}
}
const updateMubiaoPos = async (
mbs: Array<Record<string, string | number>>
) => {
// const existsIds = [...mubiaoMap.keys()]
if (mbs.length === 0) {
return
}
mbs.forEach(
({
target_id: id,
target_lon: lon,
target_lat: lat,
target_direction,
}) => {
if (mubiaoMap.has(id)) {
const entity = mubiaoMap.get(id)
const position = Cesium.Cartesian3.fromDegrees(lon, lat)
entity.position = position
entity.orientation = getOrientation({
position,
heading: target_direction as number,
})
}
}
)
}
const getOrientation = ({
position,
heading,
pitch = 0,
roll = 0,
}: Record<string, number>) => {
//模型朝向
const h = Cesium.Math.toRadians(heading - 90)
const p = Cesium.Math.toRadians(pitch)
const r = Cesium.Math.toRadians(roll)
const hpr = new Cesium.HeadingPitchRoll(h, p, r)
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
)
return orientation
}
return {
data,
addMubiao,
updateMubiaoPos,
}
}
async function getMubiaoCurPos(ids: Array<string | number>) {
const time = cesiumTime2Format(viewer.clock.currentTime)
// 获取当前目标位置
const { code, data } = await getMubiaoPos({ ids, current: time })
if (code === '200') {
return data
} else {
return []
}
}