<template>
|
<div class="route-edit-box">
|
<div class="btn-group">
|
<a-button type="text" @click="backPage">
|
<template #icon>
|
<ArrowLeftOutlined />
|
</template>
|
返回
|
</a-button>
|
<!-- <setting>
|
<template #show>
|
<a-button type="text" class="setting-btn">
|
<div class="router-setting">
|
<img
|
class="wayline-icon"
|
:src="getResource('wayline.png')"
|
alt="icon" />
|
<span class="text">航线设置</span>
|
<CaretDownOutlined />
|
</div>
|
</a-button>
|
</template>
|
</setting> -->
|
</div>
|
<div class="wayline-info">
|
<div
|
class="info-box"
|
v-for="(item, index) in waylineDetails"
|
:key="index">
|
<div class="title">{{ item.title }}</div>
|
<div class="info">{{ item.value }}</div>
|
</div>
|
</div>
|
<ul class="point-list">
|
<li v-for="(item, index) in tragetPointArr" :key="index">
|
<div class="graph">
|
<div class="left"></div>
|
<div class="right">{{ index + 1 }}</div>
|
</div>
|
<div class="graph-right">
|
<div
|
v-for="(event, index) in item.eventList"
|
:key="index"
|
class="s-event-icon">
|
<a-tooltip placement="top">
|
<template #title>
|
{{ event.name }}
|
</template>
|
<img :src="event.icon" alt="icon" />
|
</a-tooltip>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import _ from 'lodash'
|
import * as Cesium from 'cesium'
|
import setting from './components/setting.vue'
|
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
|
import { ArrowLeftOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
|
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
|
import { useMyStore } from '/@/store'
|
import { analyzeKmzFile, getKmlParams } from '/@/utils/cesium/kmz'
|
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
|
import { getPolylineLength } from '/@/utils/cesium/mapUtils'
|
const store = useMyStore()
|
const { appContext }: any = getCurrentInstance()
|
const global = appContext.config.globalProperties
|
|
const { removeAllPoint, getEntityById, addPolyline } = cesiumOperation()
|
|
interface waylineDetails {
|
title: string
|
value: string | number
|
}
|
interface eventParmas {
|
key: string
|
name: string
|
distinguish?: string
|
icon?: string
|
}
|
|
interface tragetPoint {
|
position: Cesium.Cartesian3
|
eventList: eventParmas[]
|
}
|
|
const getResource = (name: string) => {
|
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
|
}
|
|
const emits = defineEmits(['backFn'])
|
const props = defineProps<{
|
details: any
|
}>()
|
|
const filePath = computed(() => store.state.waylineTool.kmzPath)
|
|
// 对应事件
|
const eventList = reactive<eventParmas[]>([
|
{
|
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 tragetPointArr = ref<tragetPoint[]>([])
|
|
let kmlDataSource:
|
| { entities: { values: { _children: any }[] }; show: boolean }
|
| null
|
| any = null
|
|
const initKML = () => {
|
analyzeKmzFile(filePath.value).then((kmlRes) => {
|
// 所有航点
|
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)
|
}
|
}
|
})
|
})
|
tragetPointArr.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 initDrawRoute = () => {
|
const options = {
|
camera: global.$viewer.scene.camera,
|
canvas: global.$viewer.scene.canvas,
|
screenOverlayContainer: global.$viewer.container,
|
}
|
if (kmlDataSource) {
|
global.$viewer.dataSources.remove(kmlDataSource)
|
}
|
global.$viewer.dataSources
|
.add(Cesium.KmlDataSource.load(filePath.value, options))
|
.then((res: any) => {
|
kmlDataSource = res
|
createMapMarker(kmlDataSource)
|
})
|
}
|
|
const kmlEntity = ref<any>([])
|
const waylineDetails = reactive<
|
{
|
title: string
|
value: string | number
|
}[]
|
>([
|
{
|
title: '航线长度',
|
value: '0',
|
},
|
{
|
title: '预计执行时间',
|
value: '0',
|
},
|
{
|
title: '航点',
|
value: 0,
|
},
|
{
|
title: '照片',
|
value: 0,
|
},
|
])
|
// 样式
|
const createMapMarker = async (dataSource: {
|
entities: { values: { _children: any }[] }
|
show: boolean
|
}) => {
|
const ellipsoid = global.$viewer.scene.globe.ellipsoid
|
kmlEntity.value = dataSource.entities.values
|
dataSource.show = true
|
const kmlEntityArr = dataSource.entities.values[0]._children
|
const cartesianArr: any[] = []
|
let btmStartPoint = null
|
// 获取所有的点位
|
const kmlRes = await analyzeKmzFile(filePath.value)
|
// 所有航点
|
const points: string[] | any = getKmlParams(kmlRes, false, {
|
name: 'Placemark',
|
findRegx: '([\\s\\S]*?)',
|
mode: 'g',
|
})
|
// 修改点位样式信息等
|
for (let i = 0; i < kmlEntityArr.length; i++) {
|
const entity = 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 = points[i]
|
const getPointHeight: any = getKmlParams(point, true, {
|
name: 'height',
|
findRegx: '([\\s\\S]*?)',
|
})
|
console.log(getPointHeight[0])
|
const height = 100
|
entity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
|
if (i === 0) {
|
btmStartPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0)
|
}
|
// 创建广告牌信息
|
const billboard = createBillboard(`${i + 1}`, '#61d396')
|
// 修改id
|
entity._id = 'tragetPoint' + i
|
// 修改广告牌样式
|
entity.billboard = new Cesium.BillboardGraphics({
|
image: billboard,
|
pixelOffset: new Cesium.Cartesian2(0, -20),
|
})
|
// 修改点的信息
|
entity.point = new Cesium.PointGraphics({
|
pixelSize: 20,
|
color: Cesium.Color.GHOSTWHITE,
|
outlineColor: Cesium.Color.BLACK,
|
})
|
// 创建虚线
|
addPolyline({
|
id: 'dashLine' + i,
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
longitude,
|
latitude,
|
height,
|
longitude,
|
latitude,
|
0,
|
]),
|
width: 1,
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.WHITE,
|
}),
|
},
|
})
|
cartesianArr.push(entity.position._value)
|
tragetPointArr.value[i] = {
|
position: entity.position._value,
|
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, // 关闭贴地效果，保留高度
|
},
|
})
|
const lineEntity = getEntityById('entityLine')
|
const polylineLength = getPolylineLength(lineEntity).toFixed(1) || 0
|
waylineDetails[0].value = polylineLength + 'm'
|
waylineDetails[2].value = cartesianArr.length
|
global.$viewer.flyTo(lineEntity, {
|
offset: new Cesium.HeadingPitchRange(0, -90, 300),
|
})
|
}
|
|
// 创建广告牌
|
const createBillboard = (title: string | number, color: string) => {
|
// 创建canvas绘制广告牌
|
const billboard = document.createElement('canvas')
|
billboard.width = 30
|
billboard.height = 30
|
const ctx: HTMLCanvasElement | any = billboard.getContext('2d')
|
ctx.beginPath()
|
ctx.moveTo(0, 0)
|
ctx.lineTo(30, 0)
|
ctx.lineTo(15, 22)
|
ctx.fillStyle = color
|
ctx.fill()
|
ctx.font = '18px serif'
|
ctx.fillStyle = '#ffffff'
|
ctx.fillText(Number(title) === 1 ? 'S' : title, 10, 15)
|
ctx.closePath()
|
return billboard
|
}
|
|
const backPage = () => {
|
emits('backFn')
|
}
|
|
onMounted(() => {
|
// 清空画布
|
removeAllPoint()
|
global.$viewer.dataSources.removeAll()
|
initDrawRoute()
|
})
|
|
onUnmounted(() => {
|
// if (kmlDataSource) {
|
// global.$viewer.dataSources.remove(kmlDataSource)
|
// }
|
removeAllPoint()
|
global.$viewer.dataSources.removeAll()
|
store.commit('SET_WAYLINE_INFO', {
|
isShow: false,
|
wayline: {},
|
position: null,
|
})
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.route-edit-box {
|
.btn-group {
|
height: 49px;
|
width: 100%;
|
border-bottom: 1px solid #4f4f4f;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
|
.ant-btn {
|
color: #fff;
|
}
|
.setting-btn {
|
background-color: #3c3c3c;
|
margin-right: 10px;
|
|
.router-setting {
|
display: flex;
|
align-items: center;
|
|
.wayline-icon {
|
width: 16px;
|
height: 16px;
|
}
|
|
.text {
|
margin: 0 3px;
|
}
|
}
|
}
|
}
|
|
.wayline-info {
|
display: flex;
|
height: 50px;
|
margin: 10px 0;
|
text-align: center;
|
align-items: center;
|
|
.info-box {
|
flex: 1;
|
border-right: 1px solid hsla(0, 0%, 100%, 0.1);
|
|
.title {
|
color: hsla(0, 0%, 100%, 0.65);
|
font-size: 12px;
|
font-weight: bold;
|
}
|
|
.info {
|
font-weight: bold;
|
}
|
|
&:last-child {
|
border: 0;
|
}
|
}
|
}
|
|
.point-list {
|
padding: 0;
|
li {
|
cursor: pointer;
|
padding: 10px 0;
|
margin: 0 7px;
|
display: flex;
|
|
.graph {
|
width: 40px;
|
display: flex;
|
align-items: center;
|
|
.left {
|
width: 0;
|
height: 0;
|
border-top: 15px solid #2d8cf0;
|
border-right: 10px solid transparent;
|
border-left: 10px solid transparent;
|
}
|
|
.right {
|
margin-left: 3px;
|
}
|
}
|
|
.graph-right {
|
width: calc(100% - 40px);
|
height: 30px;
|
border-bottom: 1px solid #4f4f4f;
|
display: flex;
|
align-items: center;
|
|
.s-event-icon {
|
width: 25px;
|
height: 25px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
img {
|
width: 70%;
|
}
|
}
|
}
|
|
&:hover {
|
background-color: #3c3c3c;
|
}
|
}
|
}
|
}
|
</style>
|
