import * as Cesium from 'cesium'
|
import { analyzeKmzFile, getKmlParams } from '/@/utils/cesium/kmz'
|
import { getPolylineLength, createTriangleMarker } from '/@/utils/cesium/mapUtils'
|
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
|
import { ref } from 'vue'
|
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
|
const { addPolyline, getEntityById } = cesiumOperation()
|
|
const getResource = (name: string) => {
|
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
|
}
|
|
interface waylineDetails {
|
title: string
|
value: number | string
|
}
|
interface eventParmas {
|
key: string
|
name: string
|
distinguish?: string
|
icon?: string
|
}
|
interface tragetPoint {
|
position: Cesium.Cartesian3
|
isUseGlobalHeight: boolean,
|
eventList: eventParmas[]
|
}
|
|
// 对应事件
|
const eventList = [
|
{
|
key: 'takePhoto',
|
name: '单拍',
|
icon: getResource('waylinetool/camera.png'),
|
},
|
{
|
key: 'startRecord',
|
name: '开始录像',
|
icon: getResource('waylinetool/camera-on.png'),
|
},
|
{
|
key: 'stopRecord',
|
name: '结束录像',
|
icon: getResource('waylinetool/camera-off.png'),
|
},
|
{
|
key: 'time',
|
name: '开始等时间隔拍照',
|
icon: getResource('waylinetool/shoot1.png'),
|
},
|
{
|
key: 'distance',
|
name: '开始等距间隔拍照',
|
icon: getResource('waylinetool/shoot2.png'),
|
},
|
{
|
key: 'zoom',
|
name: '变焦',
|
icon: getResource('waylinetool/fd.png'),
|
},
|
{
|
key: 'customDirName',
|
name: '创建新文件夹',
|
icon: getResource('waylinetool/create-file.png'),
|
},
|
{
|
key: 'gimbalRotate',
|
distinguish: 'Yaw',
|
name: '云台俯仰角',
|
icon: getResource('waylinetool/holderyaw.png'),
|
},
|
{
|
key: 'gimbalYawRotate',
|
name: '云台偏航角',
|
distinguish: 'pitch',
|
icon: getResource('waylinetool/holdertilt.png'),
|
},
|
{
|
key: 'rotateYaw',
|
name: '飞行器偏航',
|
icon: getResource('waylinetool/droneyaw.png'),
|
},
|
{
|
key: 'hover',
|
name: '悬停等待',
|
icon: getResource('waylinetool/xt.png'),
|
},
|
]
|
|
const waylinePointsEvent = ref<tragetPoint[]>([])
|
// 路线详情
|
const waylineDetails = reactive<waylineDetails[]>([
|
{
|
title: '航线长度',
|
value: '0',
|
},
|
{
|
title: '预计执行时间',
|
value: '0',
|
},
|
{
|
title: '航点',
|
value: 0,
|
},
|
{
|
title: '照片',
|
value: 0,
|
},
|
])
|
// kml中的全部实体
|
const kmlEntities = ref<Cesium.Entity[]>([])
|
|
const useMapDraw = (
|
dataSource: Cesium.DataSource | any,
|
entitiesList: Cesium.Entity[] | any,
|
fileUrl: string | any,
|
global: any,
|
) => {
|
const ellipsoid = global.$viewer.scene.globe.ellipsoid
|
|
// kml文件中点位string
|
let kmlPoints: string[] | any = []
|
// 记录点位信息
|
let cartesianArr: Cesium.Cartesian3[] = []
|
|
// 绘制路线
|
// 起飞点
|
// let btmStartPoint: Cesium.Cartesian3 | null = null
|
const drawWayline = async (entities?: Cesium.Entity[], kmlStr?: string) => {
|
if (!entities && !kmlStr) {
|
dataSource.show = false
|
}
|
let kmlEntityArr = entities || [...entitiesList]
|
if (dataSource) {
|
kmlEntityArr = dataSource.entities.values[0]._children
|
kmlEntities.value = kmlEntityArr
|
}
|
// 获取所有点位
|
let kmlRes = ''
|
if (kmlStr) {
|
kmlRes = kmlStr
|
} else {
|
const fileRes = await analyzeKmzFile(fileUrl)
|
kmlRes = await fileRes.fileInfoObj['wpmz/template.kml']
|
}
|
// 所有航点
|
kmlPoints = getKmlParams(kmlRes, false, {
|
name: 'Placemark',
|
findRegx: '([\\s\\S]*?)',
|
mode: 'g',
|
})
|
// 起飞点
|
let btmStartPoint = null
|
// 获取文件中的起飞点
|
const startPointRegStr = getKmlParams(kmlRes, true, {
|
name: 'takeOffRefPoint',
|
findRegx: '([\\s\\S]*?)',
|
}) || ['', '0.00000,0.00000,0.00000']
|
const startPointPosition = startPointRegStr[1].split(',')
|
btmStartPoint = Cesium.Cartesian3.fromDegrees(
|
Number(startPointPosition[1]),
|
Number(startPointPosition[0]),
|
Number(startPointPosition[2])
|
)
|
// 参考起飞点“海拔高度，与“参考起飞点”中的椭球高度对应
|
// const posterHeightRegStr = getKmlParams(kmlRes, true, {
|
// name: 'takeOffRefPointAGLHeight',
|
// findRegx: '([\\s\\S]*?)',
|
// }) || ['', 0]
|
// const posterHeight = Number(posterHeightRegStr[1])
|
// 判断是否存在实体集
|
if (entities) {
|
cartesianArr = []
|
waylinePointsEvent.value = []
|
}
|
// 修改点位样式
|
for (let i = 0; i < kmlEntityArr.length; i++) {
|
const entity: any = kmlEntityArr[i]
|
// 将cartographic3D坐标转换为正常坐标
|
const c3Position = entity.position._value
|
const c2Postion = ellipsoid.cartesianToCartographic(c3Position)
|
const longitude = Cesium.Math.toDegrees(c2Postion.longitude)
|
const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
|
// 获取当前航点中的值
|
const point = kmlPoints[i]
|
const getHaeHeight: any = getKmlParams(point, true, {
|
name: 'ellipsoidHeight',
|
findRegx: '([\\s\\S]*?)',
|
})
|
const getPointHeight: any = getKmlParams(point, true, {
|
name: 'height',
|
findRegx: '([\\s\\S]*?)',
|
})
|
// 获取是否使用全局高度
|
const useGlobalHeightRegStr = getKmlParams(point, true, {
|
name: 'useGlobalHeight',
|
findRegx: '([\\s\\S]*?)',
|
}) || ['', '0']
|
const isUseGlobalHeight = Boolean(Number(useGlobalHeightRegStr[1]))
|
const AslHeight = Number(getPointHeight[1])
|
const HeaHeight = Number(getHaeHeight[1])
|
entity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, AslHeight)
|
// 创建广告牌信息
|
const title = Number(i + 1) === 1 ? 'S' : i + 1
|
let billboard = null
|
if (isUseGlobalHeight) {
|
billboard = createTriangleMarker(title, '#61d396')
|
} else {
|
billboard = createTriangleMarker(title, '#409eff')
|
}
|
// 修改id
|
entity._id = 'tragetPoint' + i
|
// 修改广告牌样式
|
entity.billboard = new Cesium.BillboardGraphics({
|
image: billboard,
|
pixelOffset: new Cesium.Cartesian2(0, -20),
|
})
|
entity.label = new Cesium.LabelGraphics({
|
text: `ASL：${Math.round(AslHeight)}m\nHAE：${Math.round(HeaHeight)}m`,
|
font: '13px monospace',
|
showBackground: true,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
pixelOffset: new Cesium.Cartesian2(0, -40),
|
})
|
// 修改点的信息
|
entity.point = new Cesium.PointGraphics({
|
pixelSize: 20,
|
color: Cesium.Color.GHOSTWHITE,
|
outlineColor: Cesium.Color.BLACK,
|
})
|
if (entities) {
|
global.$viewer.entities.add(entity)
|
}
|
// 创建虚线
|
addPolyline({
|
id: 'dashLine' + i,
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
longitude,
|
latitude,
|
AslHeight,
|
longitude,
|
latitude,
|
0,
|
]),
|
width: 1,
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.WHITE,
|
}),
|
},
|
})
|
cartesianArr.push(entity.position._value)
|
// 当前航线点位事件信息等
|
waylinePointsEvent.value.push({
|
position: entity.position._value,
|
isUseGlobalHeight,
|
eventList: [],
|
})
|
}
|
// 创建起飞位置
|
global.$viewer.entities.add({
|
id: 'dronePosition',
|
position: btmStartPoint,
|
billboard: {
|
image: getResource('dock.png'),
|
width: 36,
|
height: 36,
|
},
|
})
|
// 绘制链接线
|
addPolyline({
|
id: 'entityLine',
|
polyline: {
|
positions: [btmStartPoint, ...cartesianArr],
|
width: 7,
|
material: new ImageTrailMaterial({
|
backgroundColor: Cesium.Color.fromBytes(96, 210, 149),
|
image: getResource('arrow-right.png'),
|
imageW: 7,
|
duration: 0,
|
animation: false,
|
}),
|
clampToGround: false, // 关闭贴地效果，保留高度
|
},
|
})
|
// 获取航线详情
|
getWaylineDetails(kmlRes)
|
if (!entities && !kmlStr) {
|
dataSource.show = true
|
}
|
global.$viewer.flyTo(getEntityById('entityLine'), {
|
offset: new Cesium.HeadingPitchRange(0, -90, 600),
|
})
|
}
|
// 获取航线详情
|
const getWaylineDetails = (kmlStr: string) => {
|
// 获取当前航线全局速度
|
const getGlobalSpeed: any = getKmlParams(kmlStr, true, {
|
name: 'autoFlightSpeed',
|
findRegx: '([\\s\\S]*?)',
|
})
|
const speed = Number(getGlobalSpeed[1])
|
const lineEntity = getEntityById('entityLine')
|
// 获取距离
|
const polylineLength: any = getPolylineLength(lineEntity).toFixed(1) || 0
|
waylineDetails[0].value = polylineLength + 'm'
|
// 航点数
|
waylineDetails[2].value = cartesianArr.length
|
// 计算时间
|
const sportTime = polylineLength / speed
|
// 判断有没有超过一分钟
|
const time = sportTime / 60
|
waylineDetails[1].value = Math.trunc(time) + ' m ' + Math.round((time % 1) * 60) + ' s'
|
|
// 获取事件
|
getPointEvent(kmlStr || null)
|
}
|
// 获取航线点位事件
|
const getPointEvent = async (kmlStr: string | null) => {
|
let kmlRes = ''
|
if (kmlStr) {
|
kmlRes = kmlStr
|
} else {
|
const fileRes = await analyzeKmzFile(fileUrl)
|
kmlRes = await fileRes.fileInfoObj['wpmz/template.kml']
|
}
|
// 所有航点
|
const points = getKmlParams(kmlRes, false, {
|
name: 'Placemark',
|
findRegx: '([\\s\\S]*?)',
|
mode: 'g',
|
})
|
points?.forEach((point: string, index: number) => {
|
// 当前点位事件
|
const pointActions = getKmlParams(point, true, {
|
name: 'actionGroup',
|
findRegx: '([\\s\\S]*?)',
|
mode: 'g',
|
})
|
const eventArr: eventParmas[] = []
|
if (pointActions) {
|
const actions =
|
getKmlParams(pointActions[0], true, {
|
name: 'action',
|
findRegx: '([\\s\\S]*?)',
|
mode: 'g',
|
}) || []
|
actions?.forEach((action) => {
|
eventList.forEach((event: any) => {
|
if (!event.distinguish) {
|
action.includes(event.key) && eventArr.push(event)
|
} else {
|
const pitchAngle =
|
getKmlParams(action, true, {
|
name: 'gimbalPitchRotateAngle',
|
findRegx: '([\\s\\S]*?)',
|
}) || []
|
const yawAngle =
|
getKmlParams(action, true, {
|
name: 'gimbalYawRotateAngle',
|
findRegx: '([\\s\\S]*?)',
|
}) || []
|
if (!!Number(pitchAngle[1]) && event.distinguish === 'pitch') {
|
eventArr.push(event)
|
}
|
if (!!Number(yawAngle[1]) && event.distinguish === 'yaw') {
|
eventArr.push(event)
|
}
|
}
|
})
|
// 判断一共有多少个拍照模式
|
const actionFunc = getKmlParams(point, true, {
|
name: 'actionActuatorFunc',
|
findRegx: 'takePhoto',
|
mode: 'g',
|
})
|
if (actionFunc) {
|
;(waylineDetails[3] as any).value++
|
}
|
})
|
waylinePointsEvent.value[index].eventList = eventArr
|
}
|
// 获取当前是否存在拍照模式
|
const pointShootMode = getKmlParams(point, true, {
|
name: 'shootType',
|
findRegx: '([\\s\\S]*?)',
|
mode: 'g',
|
})
|
if (pointShootMode) {
|
pointShootMode.forEach((type: string) => {
|
eventList.forEach((item: any) => {
|
type.includes(item.key) && eventArr.push(item)
|
})
|
})
|
}
|
})
|
}
|
const clearWaylineData = () => {
|
kmlEntities.value = []
|
waylinePointsEvent.value = []
|
}
|
|
return {
|
waylinePointsEvent,
|
waylineDetails,
|
kmlEntities,
|
drawWayline,
|
getWaylineDetails,
|
clearWaylineData,
|
}
|
}
|
|
export { waylinePointsEvent, waylineDetails, kmlEntities }
|
export default useMapDraw
|
