feat:任务管理-历史任务，查看按钮，航线回显处理

shuishen

2025-06-11 fe82456ba3df9b58b3f3932baf08a6c24c1318c6

feat:任务管理-历史任务，查看按钮，航线回显处理

 src/views/job/components/DeviceJobDetailsMap.vue

@@ -1,90 +1,45 @@
<!--
 * @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" />
    <div id="deviceJobDetailsMap" class="ztzf-cesium">
        <PlanarRouteLineList :curRouteLineData="curRouteLineData" @routeLineListClick="routeLineListClick" />
    </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { Cartesian3, Terrain, Viewer } from 'cesium'
import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
import lineImg from '@/assets/images/task/arrow-right-blue.png'
// import rwqfdImg from '@/assets/images/task/rwqfd.png'
import rwqfdImg from '@/assets/map_images/Startingpointicon.png'
import endPointImg from '@/assets/images/task/EndPointicon.png'
import { flyVisual } from '@/utils/cesium/mapUtil'
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()
}

// 渲染线和点
const renderingLine = (lineObj,startPoint) => {
    const positions = lineObj.Placemark.map(item => {
        const [lon, lat] = item.Point.coordinates.split(',')
        return Cartesian3.fromDegrees(Number(lon), Number(lat))
    })
    // 向前插入起飞点
    positions.unshift(Cartesian3.fromDegrees(startPoint[0], startPoint[1]))
    // 起点
    viewer.entities.add({
        position: positions[0],
        billboard: {
            image: new Cesium.ConstantProperty(rwqfdImg),
            width: 30,
            height: 30,
        },
    })
    // 终点
    viewer.entities.add({
        position: positions[positions.length - 1],
        billboard: {
            image: new Cesium.ConstantProperty(endPointImg),
            width: 30,
            height: 30,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 底部对齐
        },
    })
    // 路径线
    viewer.entities.add({
        polyline: {
            width: 4,
            positions: positions,
            material: new ImageTrailMaterial({
                color: { alpha: 1, blue: 1, green: 1, red: 1 },
                speed: 20,
                image: lineImg,
                repeat: { x: Math.floor(40), y: 1 },
            }),
            clampToGround: false,
        },
    })
}

// 异步解析kmz文件
const analysis = async item => {
    return new Promise(async resolve => {
        const res = await analyzeKmzFile(`${item.url}?_t=${new Date().getTime()}`)
        const waylinesXML = await res.fileInfoObj['wpmz/waylines.wpml']
        const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document']
        const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
        resolve({ waylinesXMLObj, takeOffRefPoint:[item.longitude,item.latitude] })
    })
    initViewer(viewer)
}

// 绘制线和飞行
const drawLine = async () => {
    const res = await Promise.all(props.detailsData.way_lines.map(item => analysis(item)))
    // 渲染线
    res.forEach(({ waylinesXMLObj,takeOffRefPoint }) => renderingLine(waylinesXMLObj,takeOffRefPoint))
    // 收集所有起飞点
    const allTakeOffRefPoint = props.detailsData.way_lines.map(item => ([item.longitude,item.latitude]))
    // 收集所有点包括起飞点
    const allPoint = res.flatMap(({ waylinesXMLObj }) => waylinesXMLObj.Placemark)
        .map(item => item.Point.coordinates.split(',')).concat(allTakeOffRefPoint)
    flyVisual(allPoint, viewer,4)
    Promise.all(
        props.detailsData.way_lines.map(
            async item => await renderPreviewLine(`${item.url}?_t=${new Date().getTime()}`, item.wayline_type)
        )
    )
}

const removeMap = () => {
@@ -113,6 +68,7 @@
</script>
<style scoped lang="scss">
#deviceJobDetailsMap {
    position: relative;
    height: 100%;
}
</style>