import * as Cesium from 'cesium'
|
import { appointroutePlanning } from '@/api/RoutePlanning'
|
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js'
|
import cesiumOperation from '@/utils/cesium-tsa'
|
import { getLnglatDist, cartesian3Convert } from '@/utils/cesium/mapUtil.js'
|
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
|
import { getLnglatAltitude, getPositionsHeight } from '@/utils/cesium/mapUtil'
|
|
import { PatchesgetInfoById } from '@/api/patternSpot'
|
|
const { getEntityById, removeById, addLeftClickEvent, removeLeftClickEvent } =
|
cesiumOperation()
|
|
export default {
|
inject: ["panelSwitchingElement"],
|
|
data () {
|
return {
|
waylineDetails: [
|
{
|
label: '航线长度',
|
value: 0,
|
},
|
{
|
label: '预计执行时间',
|
value: 0,
|
},
|
{
|
label: '航点',
|
value: 0,
|
},
|
{
|
label: '照片',
|
value: 0,
|
},
|
],
|
workspaceId: '',
|
pointList: [],
|
obtainWaypointData: [],
|
nowObtainWaypointData: [],
|
taskBoxis: false,
|
pointEventList: [
|
{
|
label: '单拍',
|
key: 'takePhoto',
|
icon: require('@/assets/icons/waylinetool/camera.png'),
|
},
|
{
|
label: '开始录像',
|
key: 'startRecord',
|
icon: require('@/assets/icons/waylinetool/camera-on.png'),
|
},
|
{
|
label: '结束录像',
|
key: 'stopRecord',
|
icon: require('@/assets/icons/waylinetool/camera-off.png'),
|
},
|
{
|
label: '变焦',
|
key: 'zoom',
|
icon: require('@/assets/icons/waylinetool/holdertilt.png'),
|
},
|
{
|
label: '创建新文件夹',
|
key: 'customDirName',
|
icon: require('@/assets/icons/waylinetool/create-file.png'),
|
},
|
{
|
label: '旋转云台',
|
key: 'gimbalRotate',
|
icon: require('@/assets/icons/waylinetool/holderyaw.png'),
|
},
|
{
|
label: '飞行器偏航',
|
key: 'rotateYaw',
|
icon: require('@/assets/icons/waylinetool/droneyaw.png'),
|
},
|
{
|
label: '悬停等待',
|
key: 'hover',
|
icon: require('@/assets/icons/waylinetool/xt.png'),
|
},
|
{
|
label: '航段间均匀转动云台pitch角',
|
key: 'gimbalEvenlyRotate',
|
},
|
{
|
label: '精准复拍动作',
|
key: 'accurateShoot',
|
},
|
{
|
label: '精准复拍动作',
|
key: 'orientedShoot',
|
},
|
{
|
label: '全景拍照动作',
|
key: 'panoShot',
|
icon: require('@/assets/icons/waylinetool/panoramicview.png'),
|
},
|
{
|
label: '点云录制操作',
|
key: 'recordPointCloud',
|
},
|
],
|
dockPosition: [],
|
//机场坐标信息
|
droneCoordinates: null,
|
lastlongitude: null,
|
spotData: [],
|
|
}
|
},
|
|
methods: {
|
// 读取kmz文件
|
async initPointWayline (route) {
|
if (!route) return
|
this.workspaceId =
|
localStorage.getItem('bs_workspace_id') ||
|
this.$store.state.drone.selectedWorkSpaceId
|
const { data: waylineUrl } = await appointroutePlanning(
|
this.workspaceId,
|
this.wayline?.id || route.id,
|
)
|
if (waylineUrl.code !== 0)
|
return this._showMessage.error(waylineUrl.message)
|
const { fileInfoObj } = await analyzeKmzFile(
|
`${waylineUrl.data}?_t=${new Date().getTime()}`,
|
)
|
const xmlStr = await fileInfoObj['wpmz/template.kml']
|
const xmlJson = XMLToJSON(xmlStr)?.['Document']
|
this.pointList = xmlJson.Folder.Placemark
|
if (!getEntityById(route.id)) {
|
this.drawWayline(xmlJson, route)
|
}
|
if (
|
!route.patches_id ||
|
route.patches_id == 'null' ||
|
route.patches_id == ''
|
)
|
return
|
this.obtainSpotInfo(xmlJson)
|
this.spottedSurfaceGet(route)
|
},
|
// 绘制航线到地图上
|
async drawWayline (xmlJson, route) {
|
const points = xmlJson?.['Folder']?.['Placemark']
|
//每个点数据
|
let waylinePosition = []
|
this.obtainWaypointData = []
|
let SpecialPointsd = false
|
|
getPositionsHeight(points, global.$viewer).then((res) => {
|
waylinePosition = res.map((item) => {
|
return Cesium.Cartesian3.fromDegrees(
|
Number(item.longitude),
|
Number(item.latitude),
|
item.FinalHeight,
|
)
|
})
|
|
res.forEach((item, index) => {
|
let setting = {}
|
|
if (index === 0) {
|
let firstPoint = cartesian3Convert(
|
waylinePosition[index],
|
global.$viewer,
|
)
|
let dornePoint = cartesian3Convert(
|
this.droneCoordinates,
|
global.$viewer,
|
)
|
let getLongOk = getLnglatDist(
|
firstPoint.longitude,
|
firstPoint.latitude,
|
dornePoint.longitude,
|
dornePoint.latitude,
|
)
|
if (getLongOk < 20) {
|
setting = {
|
id: 'route_point_' + index,
|
position: waylinePosition[index],
|
billboard: {
|
image: require('@/assets/images/Startingpointicon.png'),
|
pixelOffset: new Cesium.Cartesian2(0, -13),
|
outlineWidth: 0,
|
width: 30,
|
height: 30,
|
scale: 1.0,
|
},
|
}
|
} else {
|
setting = {
|
id: 'route_point_' + index,
|
position: waylinePosition[index],
|
billboard: {
|
image: this.createBillboard(`${index + 1}`, '#FFBA00FF'),
|
pixelOffset: new Cesium.Cartesian2(0, -13),
|
outlineWidth: 0,
|
},
|
}
|
SpecialPointsd = true
|
}
|
} else if (index === points.length - 1) {
|
setting = {
|
id: 'route_point_' + index,
|
position: waylinePosition[index],
|
billboard: {
|
image: require('@/assets/images/EndPointicon.png'),
|
pixelOffset: new Cesium.Cartesian2(0, -13),
|
outlineWidth: 0,
|
width: 30,
|
height: 30,
|
scale: 1.0,
|
},
|
}
|
} else {
|
setting = {
|
id: 'route_point_' + index,
|
position: waylinePosition[index],
|
billboard: {
|
image: this.createBillboard(
|
`${SpecialPointsd ? index + 1 : index}`,
|
'#FFBA00FF',
|
),
|
pixelOffset: new Cesium.Cartesian2(0, -13),
|
outlineWidth: 0,
|
},
|
}
|
}
|
|
global.$viewer.entities.add(setting)
|
this.addClickevents('route_point_' + index, waylinePosition[index])
|
if (item?.['actionGroup']) {
|
this.obtainWaypointInfo(item?.['actionGroup']?.['action'], index)
|
}
|
})
|
|
waylinePosition.unshift(this.droneCoordinates)
|
//没有起点坐标时，在机场和第一个点增加一个中间转折点作为起点
|
if (SpecialPointsd) {
|
let cartesian = this.addTurnPoint(
|
waylinePosition[0],
|
waylinePosition[1],
|
)
|
waylinePosition.splice(1, 0, cartesian)
|
if (getEntityById('route_detailSpecialPointsd')) {
|
removeById('route_detailSpecialPointsd')
|
}
|
global.$viewer.entities.add({
|
position: cartesian,
|
id: 'route_detailSpecialPointsd',
|
billboard: {
|
image: require('@/assets/images/Startingpointicon.png'),
|
width: 30,
|
height: 30,
|
pixelOffset: new Cesium.Cartesian2(0, -20),
|
},
|
})
|
}
|
global.$viewer.entities.add({
|
id: 'route_wayline_line',
|
polyline: {
|
positions: waylinePosition,
|
width: 5,
|
material: new ImageTrailMaterial({
|
color: Cesium.Color.WHITE,
|
speed: 10,
|
image: require('@/assets/images/arrow-right-blue.png'),
|
repeat: { x: waylinePosition.length, y: 0 },
|
}),
|
zIndex: 1,
|
clampToGround: this.clampToGroundshow,
|
},
|
})
|
this.$store.commit('SET_WAYLINE_POINTS', {
|
type: 'point',
|
data: waylinePosition,
|
})
|
this.flyToRouterShow(waylinePosition)
|
})
|
},
|
// 在机场和第一个点直接增加一个中间转折点
|
addTurnPoint (firstPoint, SecondPoint) {
|
const dronePosition = cartesian3Convert(firstPoint, global.$viewer)
|
const firstPosition = cartesian3Convert(SecondPoint, global.$viewer)
|
return new Cesium.Cartesian3.fromDegrees(
|
dronePosition?.longitude,
|
dronePosition?.latitude,
|
firstPosition?.height,
|
)
|
},
|
// 增加鼠标监听事件，点击展示事件
|
addClickevents (tragetPointint_id, currentPositionxyz) {
|
addLeftClickEvent(tragetPointint_id, startPointEvent)
|
const _this = this
|
//鼠标点击展示详情
|
function startPointEvent (click, pick, viewer) {
|
// 当前点击项获取数据
|
let id = pick?.id?._id.split('_')[2]
|
let getNowData = _this.obtainWaypointData.find(
|
(obj) => obj.subIndex == id,
|
)
|
if (getNowData) {
|
_this.nowObtainWaypointData = getNowData.label
|
}
|
// 展示详情
|
_this.taskBoxis = true
|
viewer.container.appendChild(_this.$refs.taskBox)
|
viewer.scene.postRender.addEventListener(() => {
|
let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
global.$viewer.scene,
|
currentPositionxyz,
|
)
|
if (!_this.$refs.taskBox) return
|
const x = windowCoord.x + 25
|
const y = windowCoord.y - _this.$refs.taskBox.offsetHeight / 2 - 15
|
_this.$refs.taskBox.style.transform = `translate3d(${Math.round(
|
x,
|
)}px,${Math.round(y)}px,${Math.round(40)}px )`
|
})
|
}
|
},
|
// 创建广告牌
|
createBillboard (title, color) {
|
const billboard = document.createElement('canvas')
|
const ctx = billboard.getContext('2d')
|
ctx.beginPath()
|
ctx.ellipse(150, 90, 11, 11, 0, 0, Math.PI * 2)
|
ctx.fillStyle = color
|
ctx.fill()
|
ctx.font = 'bold 15px serif'
|
ctx.textAlign = 'center'
|
ctx.fillStyle = '#ffffff'
|
ctx.fillText(title, 150, 95)
|
ctx.closePath()
|
return billboard
|
},
|
// 添加图斑面
|
spottedSurfaceGet (wayline) {
|
this.spotData = wayline.patches_id.split(',')
|
this.spotData.forEach((item, index) => {
|
PatchesgetInfoById({ patchesId: item }).then((polygonRes) => {
|
if (polygonRes.data.data === '') return
|
const dkfw = polygonRes.data.data.dkfw
|
const numbersWithCommas = dkfw.match(/\d+(\.\d+)?/g)
|
const grouped = numbersWithCommas.map((item) => Number(item))
|
if (getEntityById('task_polygon_dk_wayline' + index)) {
|
removeById('task_polygon_dk_wayline' + index)
|
}
|
global.$viewer.entities.add({
|
id: 'task_polygon_dk_wayline' + index,
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray(grouped),
|
width: 1,
|
material: Cesium.Color.RED,
|
zIndex: 0,
|
clampToGround: true,
|
},
|
})
|
})
|
})
|
},
|
// 所有点事件
|
obtainWaypointInfo (obtainlist, index) {
|
if (Array.isArray(obtainlist)) {
|
let eventData = []
|
obtainlist.forEach((item) => {
|
let eventName = item?.['actionActuatorFunc']?.['#text']
|
eventData.push(this.findValueByLabel(eventName))
|
})
|
this.obtainWaypointData.push({
|
label: eventData,
|
subIndex: index,
|
})
|
} else {
|
let eventName = obtainlist?.['actionActuatorFunc']?.['#text']
|
this.obtainWaypointData.push({
|
label: [this.findValueByLabel(eventName)],
|
subIndex: index,
|
})
|
}
|
},
|
// 获取图斑块与拍摄的图片信息
|
obtainSpotInfo (xmlJson) {
|
let mergedArray = []
|
this.panelSwitchingElement.updateObtainSpotData([])
|
|
const points = xmlJson?.['Folder']?.['Placemark'].slice(1)
|
for (let [i, entity] of points.entries()) {
|
if (entity?.['actionGroup']) {
|
// 点位信息
|
let PointPosition =
|
entity?.['Point']?.['coordinates']?.['#text'].split(',')
|
// 当前所在图斑
|
let takePhotoName = ''
|
// 只有一个事件
|
if (!entity?.['actionGroup']?.['action'].length) {
|
let takePhotoHas =
|
entity?.['actionGroup']?.['action']?.['actionActuatorFunc']?.[
|
'#text'
|
]
|
if (takePhotoHas === 'takePhoto') {
|
takePhotoName = this.getSpotName(
|
entity?.['actionGroup']?.['action'],
|
)
|
const takePhotoData = {
|
PointPosition: [
|
Number(PointPosition[0]),
|
Number(PointPosition[1]),
|
],
|
takePhotoName: takePhotoName,
|
}
|
mergedArray.push(takePhotoData)
|
}
|
}
|
// 存在多个事件
|
else {
|
entity?.['actionGroup']?.['action'].forEach((item, index) => {
|
if (item?.['actionActuatorFunc']?.['#text'] === 'takePhoto') {
|
takePhotoName = this.getSpotName(item)
|
const takePhotoData = {
|
PointPosition: [
|
Number(PointPosition[0]),
|
Number(PointPosition[1]),
|
],
|
takePhotoName: takePhotoName,
|
}
|
mergedArray.push(takePhotoData)
|
}
|
})
|
}
|
}
|
}
|
|
this.panelSwitchingElement.updateObtainSpotData(Array.from(
|
mergedArray
|
.reduce((map, obj) => {
|
let takePhotoName = obj.takePhotoName
|
if (!map.has(takePhotoName)) {
|
map.set(takePhotoName, [])
|
}
|
map.get(takePhotoName).push(obj)
|
return map
|
}, new Map())
|
.values(),
|
))
|
},
|
// 获取图斑名称
|
getSpotName (str) {
|
let strIn = str?.['actionActuatorFuncParam']?.['fileSuffix']?.['#text']
|
let startIndex = strIn.indexOf('航点') + '航点'.length
|
let endIndex = strIn.indexOf('~')
|
return strIn.substring(startIndex, endIndex)
|
},
|
|
// 根据key获取label
|
findValueByLabel (keyToFind) {
|
return this.pointEventList.find((obj) => obj.key === keyToFind)
|
},
|
// 取消详细信息展示
|
cancleTaskBoxis () {
|
this.taskBoxis = false
|
this.nowObtainWaypointData = []
|
},
|
},
|
mounted () { },
|
destroyed () {
|
removeLeftClickEvent()
|
let taskBox = document.getElementById('taskBox')
|
if (!taskBox) return
|
taskBox.remove()
|
},
|
}
|
