import { ref,reactive } from 'vue'
|
import * as Cesium from 'cesium'
|
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js'
|
import cesiumOperation from '@/utils/cesium-tsa'
|
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
|
import { getLnglatAltitude, getPositionsHeight, getLnglatDist, cartesian3Convert, getCenterPoint } from '@/utils/cesium/mapUtil'
|
|
// import { appointroutePlanning } from '@/api/RoutePlanning'
|
import { PatchesgetInfoById } from '@/api/patternSpot'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useMyStore } from '@/store'
|
|
const { getEntityById, removeById, addLeftClickEvent, removeLeftClickEvent, flyTo } = cesiumOperation()
|
|
export function initPointWayLine () {
|
const store = useMyStore()
|
|
const state = reactive({
|
// pinNum: 0,
|
// polylineNum: 0,
|
// PolygonNum: 0,
|
// currentType: '',
|
pointList: [],
|
obtainWaypointData: [],
|
droneCoordinates: null,
|
longitude: 0, // 机场经纬度
|
latitude: 0,
|
clampToGroundshow: (store.state.common.mapSetting.visual == '2D' ? true : false)
|
})
|
async function pointWayline (route:any,longitude:any, latitude:any) {
|
if (!route || !longitude) return
|
state.longitude = longitude
|
state.latitude = latitude
|
const workspaceId = localStorage.getItem('bs_workspace_id') || store.state.index.selectedWorkSpaceId
|
// 请求获取ktz地址
|
// const { data: waylineUrl } = await appointroutePlanning(workspaceId, wayline?.id || route.id)
|
// if (waylineUrl.code !== 0) return ElMessage.error(waylineUrl.message)
|
// let textUrl = 'https://wrj.shuixiongit.com/minio/cloud-bucket//wayline/20250115/wayline_1736931502859.kmz'
|
// const { fileInfoObj } = await analyzeKmzFile(`${waylineUrl.data}?_t=${new Date().getTime()}`)
|
const { fileInfoObj } = await analyzeKmzFile(`${route}?_t=${new Date().getTime()}`)
|
const xmlStr = await fileInfoObj['wpmz/template.kml']
|
const xmlJson = XMLToJSON(xmlStr)?.['Document']
|
state.pointList = xmlJson.Folder.Placemark
|
// if (!getEntityById(route.id)) {
|
// drawWayline(xmlJson, route)
|
// }
|
drawWayline(xmlJson, route)
|
// if (
|
// !route.patches_id ||
|
// route.patches_id == 'null' ||
|
// route.patches_id == ''
|
// )
|
// return
|
// this.obtainSpotInfo(xmlJson)
|
// this.spottedSurfaceGet(route)
|
}
|
// 绘制航线到地图上
|
function drawWayline (xmlJson:any, route:any) {
|
console.log('航线绘制到地图上',xmlJson)
|
const points = xmlJson?.['Folder']?.['Placemark']
|
//每个点数据
|
let waylinePosition = reactive([])
|
state.obtainWaypointData = []
|
let SpecialPointsd = ref(false)
|
const imageStart = new URL('@/assets/images/Startingpointicon.png', import.meta.url).href
|
const imageEnd = new URL('@/assets/images/EndPointicon.png', import.meta.url).href
|
const imgRightBlue = new URL('@/assets/images/arrow-right-blue.png', import.meta.url).href
|
// 获取机场信息
|
getLnglatAltitude(state.longitude, state.latitude, window.cesiumViewer).then((res) => {
|
state.droneCoordinates = Cesium.Cartesian3.fromDegrees(
|
Number(state.longitude),
|
Number(state.latitude),
|
Number(res.height),
|
)
|
})
|
getPositionsHeight(points, window.cesiumViewer).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],
|
window.cesiumViewer,
|
)
|
let dornePoint = cartesian3Convert(
|
state.droneCoordinates,
|
window.cesiumViewer,
|
)
|
|
let getLongOk = getLnglatDist(
|
firstPoint.longitude,
|
firstPoint.latitude,
|
dornePoint.longitude,
|
dornePoint.latitude,
|
)
|
if (getLongOk < 20) {
|
setting = {
|
id: 'route_point_' + index,
|
position: waylinePosition[index],
|
billboard: {
|
image: imageStart,
|
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: createBillboard(`${index + 1}`, '#FFBA00FF'),
|
pixelOffset: new Cesium.Cartesian2(0, -13),
|
outlineWidth: 0,
|
},
|
}
|
SpecialPointsd.value = true
|
}
|
} else if (index === points.length - 1) {
|
setting = {
|
id: 'route_point_' + index,
|
position: waylinePosition[index],
|
billboard: {
|
image: imageEnd,
|
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: createBillboard(
|
`${SpecialPointsd.value ? index + 1 : index}`,
|
'#FFBA00FF',
|
),
|
pixelOffset: new Cesium.Cartesian2(0, -13),
|
outlineWidth: 0,
|
},
|
}
|
}
|
|
window.cesiumViewer.entities.add(setting)
|
// this.addClickevents('route_point_' + index, waylinePosition[index])
|
// if (item?.['actionGroup']) {
|
// this.obtainWaypointInfo(item?.['actionGroup']?.['action'], index)
|
// }
|
})
|
|
waylinePosition.unshift(state.droneCoordinates)
|
//没有起点坐标时，在机场和第一个点增加一个中间转折点作为起点
|
if (SpecialPointsd.value) {
|
let cartesian = addTurnPoint(
|
waylinePosition[0],
|
waylinePosition[1],
|
)
|
waylinePosition.splice(1, 0, cartesian)
|
if (getEntityById('route_detailSpecialPointsd')) {
|
removeById('route_detailSpecialPointsd')
|
}
|
window.cesiumViewer.entities.add({
|
position: cartesian,
|
id: 'route_detailSpecialPointsd',
|
billboard: {
|
image: imageStart,
|
width: 30,
|
height: 30,
|
pixelOffset: new Cesium.Cartesian2(0, -20),
|
},
|
})
|
}
|
window.cesiumViewer.entities.add({
|
id: 'route_wayline_line',
|
polyline: {
|
positions: waylinePosition,
|
width: 5,
|
material: new ImageTrailMaterial({
|
color: Cesium.Color.WHITE,
|
speed: 10,
|
image: imgRightBlue,
|
repeat: { x: waylinePosition.length, y: 0 },
|
}),
|
zIndex: 1,
|
clampToGround: state.clampToGroundshow,
|
},
|
})
|
store.commit('SET_WAYLINE_POINTS', {
|
type: 'point',
|
data: waylinePosition,
|
})
|
flyToRouterShow(waylinePosition)
|
})
|
}
|
// 指向该区域
|
function flyToRouterShow (waylinePosition:any) {
|
let cartesianlengthArr = waylinePosition.map((cartesian:any) => {
|
return [
|
cartesian3Convert(cartesian, window.cesiumViewer).longitude,
|
cartesian3Convert(cartesian, window.cesiumViewer).latitude,
|
]
|
})
|
const centerpoint = getCenterPoint(cartesianlengthArr)
|
let maxlength = 0
|
cartesianlengthArr.forEach((item:any, index:any) => {
|
let banseTwoPoints = getLnglatDist(
|
item[0],
|
item[1],
|
centerpoint.lng,
|
centerpoint.lat,
|
)
|
if (banseTwoPoints > maxlength) {
|
maxlength = banseTwoPoints
|
}
|
})
|
// clampToGroundshow
|
let flyNum = state.clampToGroundshow ? 7 : 12
|
flyTo(
|
{ longitude: centerpoint.lng, latitude: centerpoint.lat },
|
3,
|
maxlength * flyNum,
|
)
|
}
|
// 创建广告牌
|
function createBillboard (title:any, color:any) {
|
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
|
}
|
// 在机场和第一个点直接增加一个中间转折点
|
function addTurnPoint (firstPoint:any, SecondPoint:any) {
|
const dronePosition = cartesian3Convert(firstPoint, window.cesiumViewer)
|
const firstPosition = cartesian3Convert(SecondPoint, window.cesiumViewer)
|
return new Cesium.Cartesian3.fromDegrees(
|
dronePosition?.longitude,
|
dronePosition?.latitude,
|
firstPosition?.height,
|
)
|
}
|
// 所有点事件
|
// function 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,
|
// })
|
// }
|
// }
|
// 增加鼠标监听事件，点击展示事件
|
// function 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(window.cesiumViewer.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 )`
|
// })
|
// }
|
// }
|
return {
|
pointWayline
|
}
|
}
|
