<template>
|
<Teleport to="body">
|
<div class="tip-container">点击地图设置参考起飞点</div>
|
</Teleport>
|
</template>
|
|
<script lang="ts" setup>
|
import { onMounted, onUnmounted } from 'vue'
|
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
|
import * as Cesium from 'cesium'
|
import useKmzTsa, { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
|
import useMapDraw, { kmlEntities as globalEntities } from '/@/utils/cesium/use-map-draw'
|
import { useMyStore } from '/@/store'
|
const store = useMyStore()
|
const { appContext }: any = getCurrentInstance()
|
const global = appContext.config.globalProperties
|
const kmzUtils = useKmzTsa()
|
const mapDraw = useMapDraw('', [], '', global)
|
|
const { addClickEvent, removeClickEvent } = cesiumOperation()
|
|
const getResource = (name: string) => {
|
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
|
}
|
|
const createInitialPoint = () => {
|
const cesiumDom: any = document.querySelector('#cesiumContainer')
|
cesiumDom.style.cursor = `url(${getResource('waylinetool/cursor.png')}), auto`
|
addClickEvent('', addSettingEvent)
|
}
|
|
const addSettingEvent = (click: { position: Cesium.Cartesian2 }) => {
|
const { position } = click
|
const c3Position = global.$viewer.scene.globe.pick(global.$viewer.camera.getPickRay(position), global.$viewer.scene)
|
const ellipsoid = global.$viewer.scene.globe.ellipsoid
|
const c2Postion = ellipsoid.cartesianToCartographic(c3Position)
|
const longitude = Cesium.Math.toDegrees(c2Postion.longitude)
|
const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
|
const height = 6
|
const takeOffPoint = [latitude, longitude, height]
|
xmlTemplate.value.missionConfig.takeOffRefPoint['#text'] = takeOffPoint.join(',')
|
store.commit('SET_WAYLINE_INFO', {
|
isShow: true,
|
})
|
const xmlStr = kmzUtils.generateXML(xmlTemplate.value)
|
mapDraw.drawWayline(globalEntities.value, xmlStr)
|
}
|
|
const delSettingEvent = () => {
|
const cesiumDom: any = document.querySelector('#cesiumContainer')
|
cesiumDom.style.cursor = 'auto'
|
removeClickEvent()
|
}
|
|
onMounted(() => {
|
createInitialPoint()
|
})
|
onUnmounted(() => {
|
delSettingEvent()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.tip-container {
|
width: 60%;
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: rgba(0, 0, 0, 0.5);
|
padding: 20px;
|
color: #fff;
|
text-align: center;
|
font-weight: bold;
|
pointer-events: none;
|
}
|
</style>
|
