<!--
|
* @Author : yuan
|
* @Date : 2025-05-26 17:30:33
|
* @LastEditors : yuan
|
* @LastEditTime : 2025-06-10 15:46:18
|
* @FilePath : \src\views\job\components\DeviceJobDetailsMap.vue
|
* @Description :
|
* Copyright 2025 OBKoro1, All Rights Reserved.
|
* 2025-05-26 17:30:33
|
-->
|
<template>
|
<div id="deviceJobDetailsMap" class="ztzf-cesium">
|
<PlanarRouteLineList :curRouteLineData="curRouteLineData" @routeLineListClick="routeLineListClick" />
|
</div>
|
</template>
|
<script setup>
|
import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue'
|
|
import { PublicCesium } from '@/utils/cesium/publicCesium'
|
|
const props = defineProps(['detailsData'])
|
|
import { useRouteLine } from '@/hooks/useRouteLine/useRouteLine.js'
|
|
// 加载航线hook
|
const { curRouteLineData, routeLineListClick, initViewer, renderPreviewLine } = useRouteLine()
|
|
|
let viewer = null
|
const initMap = () => {
|
viewer = new PublicCesium({ dom: 'deviceJobDetailsMap' }).getViewer()
|
|
initViewer(viewer)
|
}
|
|
// 绘制线和飞行
|
const drawLine = async () => {
|
Promise.all(
|
props.detailsData.way_lines.map(
|
async item => await renderPreviewLine(`${item.url}?_t=${new Date().getTime()}`, item.wayline_type)
|
)
|
)
|
}
|
|
const removeMap = () => {
|
viewer.entities.removeAll()
|
viewer.destroy()
|
}
|
|
watch(
|
() => props.detailsData,
|
(newValue, oldValue) => {
|
if (newValue) {
|
drawLine()
|
}
|
}
|
)
|
|
onBeforeUnmount(() => {
|
removeMap()
|
})
|
|
onMounted(() => {
|
nextTick(() => {
|
initMap()
|
})
|
})
|
</script>
|
<style scoped lang="scss">
|
#deviceJobDetailsMap {
|
position: relative;
|
height: 100%;
|
}
|
</style>
|
