From f27ca082eb0a839449dd50c49007b58e5ed6946f Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 19 Jun 2025 19:08:01 +0800
Subject: [PATCH] feat: 服务名修改
---
src/utils/cesium/use-map-draw.ts | 316 +++++++++++++++++++++++++++++-----------------------
1 files changed, 174 insertions(+), 142 deletions(-)
diff --git a/src/utils/cesium/use-map-draw.ts b/src/utils/cesium/use-map-draw.ts
index 3bba15f..4c2b631 100644
--- a/src/utils/cesium/use-map-draw.ts
+++ b/src/utils/cesium/use-map-draw.ts
@@ -4,7 +4,9 @@
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
import { ref } from 'vue'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
-const { addPolyline, getEntityById } = cesiumOperation()
+import { XMLToJSON } from './kmz'
+import _, { includes } from 'lodash'
+const { addPolyline, getEntityById, removeAllDataSource, removeAllPoint } = cesiumOperation()
const getResource = (name: string) => {
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
@@ -22,11 +24,17 @@
}
interface tragetPoint {
position: Cesium.Cartesian3
- eventList: eventParmas[]
+ isUseGlobalHeight: boolean
+ eventList: eventParmas[] | null
}
+interface action {
+ key: string
+ name: string
+ icon?: string
+}
// 对应事件
-const eventList = [
+const actionList: eventParmas[] = [
{
key: 'takePhoto',
name: '单拍',
@@ -43,12 +51,12 @@
icon: getResource('waylinetool/camera-off.png'),
},
{
- key: 'time',
+ key: 'multipleTiming',
name: '开始等时间隔拍照',
icon: getResource('waylinetool/shoot1.png'),
},
{
- key: 'distance',
+ key: 'multipleDistance',
name: '开始等距间隔拍照',
icon: getResource('waylinetool/shoot2.png'),
},
@@ -56,11 +64,6 @@
key: 'zoom',
name: '变焦',
icon: getResource('waylinetool/fd.png'),
- },
- {
- key: 'customDirName',
- name: '创建新文件夹',
- icon: getResource('waylinetool/create-file.png'),
},
{
key: 'gimbalRotate',
@@ -84,7 +87,37 @@
name: '悬停等待',
icon: getResource('waylinetool/xt.png'),
},
+ {
+ key: 'panoShot',
+ name: '全景拍摄',
+ icon: getResource('waylinetool/panoramicview.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 selectPointIndex = ref<number | null>(null)
const useMapDraw = (
dataSource: Cesium.DataSource | any,
@@ -93,51 +126,51 @@
global: any,
) => {
const ellipsoid = global.$viewer.scene.globe.ellipsoid
- 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[]>([])
- // kml文件中点位string
- let kmlPoints: string[] | any = []
- // 记录点位信息
- const cartesianArr: Cesium.Cartesian3[] = []
+ // 记录点位信息
+ let cartesianArr: Cesium.Cartesian3[] = []
- // 绘制路线
- const drawWayline = async () => {
- dataSource.show = false
- let kmlEntityArr = [...entitiesList]
+ // 绘制路线
+ const drawWayline = async (entities?: Cesium.Entity[], kmlStr?: string) => {
+ // if (!entities && !kmlStr) {
+ // dataSource.show = false
+ // }
+ if (dataSource) {
+ dataSource.show = false
+ }
+ let kmlEntityArr = entities || [...entitiesList]
if (dataSource) {
kmlEntityArr = dataSource.entities.values[0]._children
kmlEntities.value = kmlEntityArr
}
// 获取所有点位
- const kmlRes = await analyzeKmzFile(fileUrl)
+ let kmlRes = ''
+ if (kmlStr) {
+ removeAllDataSource()
+ removeAllPoint()
+ kmlRes = kmlStr
+ } else {
+ const fileRes = await analyzeKmzFile(fileUrl)
+ kmlRes = await fileRes.fileInfoObj['wpmz/template.kml']
+ }
+ const kmlJson = XMLToJSON(kmlRes)
// 所有航点
- kmlPoints = getKmlParams(kmlRes, false, {
- name: 'Placemark',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
- })
+ const kmlPoints = Array.isArray(kmlJson.Document.Folder.Placemark)
+ ? kmlJson.Document.Folder.Placemark
+ : [kmlJson.Document.Folder.Placemark]
// 起飞点
let btmStartPoint = null
+ // 获取文件中的起飞点
+ const startPointPosition = kmlJson.Document.missionConfig.takeOffRefPoint['#text'].split(',')
+ btmStartPoint = Cesium.Cartesian3.fromDegrees(
+ Number(startPointPosition[1]),
+ Number(startPointPosition[0]),
+ Number(startPointPosition[2]),
+ )
+ // 判断是否存在实体集
+ if (entities) {
+ cartesianArr = []
+ waylinePointsEvent.value = []
+ }
// 修改点位样式
for (let i = 0; i < kmlEntityArr.length; i++) {
const entity: any = kmlEntityArr[i]
@@ -148,27 +181,21 @@
const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
// 获取当前航点中的值
const point = kmlPoints[i]
- const getPointHeight: any = getKmlParams(point, true, {
- name: 'ellipsoidHeight',
- findRegx: '([\\s\\S]*?)',
- })
- const getHaeHeight: any = getKmlParams(point, true, {
- name: 'height',
- findRegx: '([\\s\\S]*?)',
- })
- const AslHeight = Number(getPointHeight[1])
- const HeaHeight = Number(getHaeHeight[1])
- entity.position = Cesium.Cartesian3.fromDegrees(
- longitude,
- latitude,
- AslHeight,
- )
- if (i === 0) {
- btmStartPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0)
- }
+ const getHaeHeight = point.ellipsoidHeight['#text']
+ const getPointHeight = point.height['#text']
+ // 获取是否使用全局高度
+ const isUseGlobalHeight = point?.useGlobalHeight ? point.useGlobalHeight['#text'] : 0
+ const AslHeight = Number(getPointHeight)
+ const HeaHeight = Number(getHaeHeight)
+ entity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, AslHeight)
// 创建广告牌信息
- const title = Number(i + 1) === 1 ? 'S' : i
- const billboard = createTriangleMarker(title, '#61d396')
+ 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
// 修改广告牌样式
@@ -184,6 +211,7 @@
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
pixelOffset: new Cesium.Cartesian2(0, -40),
+ show: false,
})
// 修改点的信息
entity.point = new Cesium.PointGraphics({
@@ -191,6 +219,9 @@
color: Cesium.Color.GHOSTWHITE,
outlineColor: Cesium.Color.BLACK,
})
+ if (entities) {
+ global.$viewer.entities.add(entity)
+ }
// 创建虚线
addPolyline({
id: 'dashLine' + i,
@@ -213,6 +244,7 @@
// 当前航线点位事件信息等
waylinePointsEvent.value.push({
position: entity.position._value,
+ isUseGlobalHeight,
eventList: [],
})
}
@@ -244,7 +276,9 @@
})
// 获取航线详情
getWaylineDetails(kmlRes)
- dataSource.show = true
+ if (!entities && !kmlStr) {
+ dataSource.show = true
+ }
global.$viewer.flyTo(getEntityById('entityLine'), {
offset: new Cesium.HeadingPitchRange(0, -90, 600),
})
@@ -252,11 +286,9 @@
// 获取航线详情
const getWaylineDetails = (kmlStr: string) => {
// 获取当前航线全局速度
- const getGlobalSpeed: any = getKmlParams(kmlStr, true, {
- name: 'autoFlightSpeed',
- findRegx: '([\\s\\S]*?)',
- })
- const speed = Number(getGlobalSpeed[1])
+ const kmlJson = XMLToJSON(kmlStr).Document
+ const getGlobalSpeed = kmlJson.Folder.autoFlightSpeed['#text']
+ const speed = Number(getGlobalSpeed)
const lineEntity = getEntityById('entityLine')
// 获取距离
const polylineLength: any = getPolylineLength(lineEntity).toFixed(1) || 0
@@ -267,84 +299,81 @@
const sportTime = polylineLength / speed
// 判断有没有超过一分钟
const time = sportTime / 60
- waylineDetails[1].value =
- Math.trunc(time) + ' m ' + Math.round((time % 1) * 60) + ' s'
+ waylineDetails[1].value = Math.trunc(time) + ' m ' + Math.round((time % 1) * 60) + ' s'
// 获取事件
- getPointEvent()
+ getPointEvent(kmlStr || null)
}
// 获取航线点位事件
- const getPointEvent = async () => {
- const kmlRes = await analyzeKmzFile(fileUrl)
- // 所有航点
- const points = getKmlParams(kmlRes, false, {
- name: 'Placemark',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
+ 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 kmlJson = XMLToJSON(kmlRes).Document
+ const points = Array.isArray(kmlJson.Folder?.Placemark) ? kmlJson.Folder.Placemark : [kmlJson.Folder.Placemark]
+ points?.forEach((point: { actionGroup: any }, index: number) => {
+ if (point !== undefined) {
+ if (Reflect.has(point, 'actionGroup')) {
+ if (Array.isArray(point.actionGroup)) {
+ const actionGroups = point.actionGroup
+ actionGroups.forEach((actionGroup) => {
+ const action = actionGroup.action
+ const actionTrigger = actionGroup.actionTrigger
+ pointActionShow(action, actionTrigger, index)
+ })
+ } else {
+ const action = point.actionGroup.action
+ const actionTrigger = point.actionGroup.actionTrigger
+ pointActionShow(action, actionTrigger, index)
+ }
+ }
+ }
})
- 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++
+ waylineDetails[3].value = takePhotoNum
+ }
+
+ let takePhotoNum = 0
+ const pointActionShow = (
+ action: { forEach: (arg0: (item: any) => void) => void; actionActuatorFunc: { [x: string]: string } },
+ actionTrigger: { actionTriggerType: { [x: string]: string } },
+ index: number,
+ ) => {
+ if (Array.isArray(action)) {
+ action.forEach((item) => {
+ const { actionActuatorFunc } = item
+ actionActuatorFunc?.['#text'] === 'takePhoto' && takePhotoNum++
+ const actionObj: eventParmas | any = actionList.find((event) => {
+ if (actionTrigger?.actionTriggerType['#text'] === event.key) {
+ return actionTrigger?.actionTriggerType['#text'] === event.key
+ } else {
+ return actionActuatorFunc['#text'] === event.key
}
})
- waylinePointsEvent.value[index].eventList = eventArr
- }
- // 获取当前是否存在拍照模式
- const pointShootMode = getKmlParams(point, true, {
- name: 'shootType',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
+ waylinePointsEvent.value[index].eventList?.push(actionObj)
})
- if (pointShootMode) {
- pointShootMode.forEach((type: string) => {
- eventList.forEach((item: any) => {
- type.includes(item.key) && eventArr.push(item)
- })
- })
- }
+ } else {
+ action?.actionActuatorFunc['#text'] === 'takePhoto' && takePhotoNum++
+ const actionObj: eventParmas | any = actionList.find((item) => {
+ const actionTriggerType = actionTrigger.actionTriggerType['#text']
+ if (['multipleDistance', 'multipleTiming'].includes(actionTriggerType)) {
+ return actionTriggerType === item.key
+ } else {
+ return action?.actionActuatorFunc['#text'] === item.key
+ }
+ })
+ waylinePointsEvent.value[index].eventList?.push(actionObj)
+ }
+ }
+
+ const clearWaylineData = () => {
+ kmlEntities.value = []
+ waylinePointsEvent.value = []
+ _.transform(waylineDetails, (_result, value) => {
+ value.value = 0
})
}
@@ -354,6 +383,9 @@
kmlEntities,
drawWayline,
getWaylineDetails,
+ clearWaylineData,
}
}
+
+export { waylinePointsEvent, waylineDetails, kmlEntities, selectPointIndex, actionList }
export default useMapDraw
--
Gitblit v1.9.3