/*
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2025-04-15 22:41:40
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2025-04-17 20:24:19
|
* @FilePath: \command-center-dashboard\src\hooks\useSingleDroneMap\useSingleDroneMap.js
|
* @Description:
|
*
|
* Copyright (c) 2025 by shuishen, All Rights Reserved.
|
*/
|
import * as Cesium from 'cesium'
|
|
import { getEventImage } from '@/utils/stateToImageMap/event'
|
import { getDroneFlagImage } from '@/utils/stateToImageMap/drone'
|
|
import { useMapHandlerClick } from '@/hooks/components/useMapHandlerClick'
|
|
/**
|
*
|
* @param {Object} options - 配置选项
|
*/
|
export function useSingleDroneMap (options = {
|
eventPositions: [],
|
eventApi: null,
|
eventApiParams: {}
|
}) {
|
const { eventPositions, eventApi, eventApiParams } = options
|
|
let viewer = null
|
|
const {
|
handlerInit: mapHandlerInit,
|
removeAll: removeMapHandlerAll
|
} = useMapHandlerClick({
|
getViewer () {
|
return viewer
|
}
|
})
|
|
// 初始化机场位置
|
const initDroneEntity = (dronePosition) => {
|
const { lng, lat, status } = dronePosition
|
|
if (!lng || !lat) return
|
|
const markerImg = getDroneFlagImage(status)
|
const position = Cesium.Cartesian3.fromDegrees(+lng, +lat, 0)
|
|
const droneEntity = viewer?.entities.add({
|
id: `single-drone-position`,
|
position: position,
|
|
billboard: {
|
image: new Cesium.ConstantProperty(markerImg),
|
width: 35,
|
height: 35,
|
},
|
|
ellipse: {
|
semiMinorAxis: 5000,
|
semiMajorAxis: 5000,
|
outline: true,
|
material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.3),
|
},
|
|
properties: {
|
customData: {
|
data: {
|
type: 'single-drone-position'
|
}
|
}
|
}
|
})
|
|
viewer?.flyTo(droneEntity, {
|
offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-60), 0),
|
duration: 0.5,
|
})
|
}
|
|
// 机巢事件地图撒点
|
const initDroneEventEntity = (eventData = eventPositions) => {
|
// 遍历特征并添加实体
|
eventData.length && eventData.forEach((item, index) => {
|
const { longitude, latitude, status, id } = item
|
|
const curImg = getEventImage(status)
|
|
const position = Cesium.Cartesian3.fromDegrees(+longitude, +latitude, 0)
|
|
viewer?.entities.add({
|
id: `single-drone-event-${index}`,
|
position: position,
|
billboard: {
|
image: new Cesium.ConstantProperty(curImg),
|
width: 20,
|
height: 20,
|
},
|
properties: {
|
customData: {
|
data: {
|
...item,
|
eventId: id,
|
type: 'single-drone-event'
|
}
|
}
|
},
|
})
|
})
|
}
|
|
// 调用传入api
|
const initEventApiEntity = () => {
|
removeEventLayer()
|
|
eventApi(
|
{
|
...eventApiParams,
|
}
|
).then(res => {
|
const result = res.data.data
|
|
initDroneEventEntity(result)
|
})
|
}
|
|
// 事件地图撒点加载方式
|
const initEventLayer = () => {
|
eventApi ? initEventApiEntity() : initDroneEventEntity()
|
}
|
|
const removeEventLayer = () => {
|
// entities移除
|
const entitiesIDs = viewer?.entities.values.map(i => i.id)
|
entitiesIDs && entitiesIDs.forEach(item => {
|
item.includes('single-drone-event') && viewer?.entities.removeById(item)
|
})
|
}
|
|
// 移除当前地图所有entity
|
const removeLayer = () => {
|
// entities移除
|
const entitiesIDs = viewer?.entities.values.map(i => i.id)
|
entitiesIDs.forEach(item => {
|
item.includes('single-drone-') && viewer?.entities.removeById(item)
|
})
|
}
|
|
const init = () => {
|
viewer = window.$viewer
|
|
mapHandlerInit()
|
}
|
|
const removeAll = () => {
|
removeLayer()
|
removeMapHandlerAll()
|
}
|
|
onMounted(async () => {
|
await nextTick()
|
init()
|
})
|
|
// 自动清理
|
onUnmounted(() => {
|
removeAll()
|
})
|
|
return {
|
init,
|
removeAll,
|
initEventLayer,
|
initDroneEntity,
|
}
|
}
|
