吉安感知网项目-前端
张含笑
2026-01-16 754f9b186f9ce43c730d2a80728daba74951e0bf
applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
@@ -1,6 +1,12 @@
<template>
   <el-dialog class="ztzf-page-map-view-dialog" v-model="visible" :show-close="false"
      :close-on-click-modal="false" @closed="handleClosed" destroy-on-close>
   <el-dialog
      class="ztzf-page-map-view-dialog"
      v-model="visible"
      :show-close="false"
      :close-on-click-modal="false"
      @closed="handleClosed"
      destroy-on-close
   >
      <div class="dialog-container">
         <div class="left-container">
            <div class="leftMap ztzf-cesium" id="leftMapContainer"></div>
@@ -59,6 +65,7 @@
import { PublicCesium } from '@/utils/cesium/publicCesium'
import * as Cesium from 'cesium'
import { flyVisual } from '@/utils/cesium/mapUtil'
import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
const initForm = () => ({
   droneName: '',
@@ -84,12 +91,12 @@
})
// 关闭弹框
function handleCancel () {
function handleCancel() {
   visible.value = false
}
// 加载详情
async function loadDetail () {
async function loadDetail() {
   if (!formData.value.id) return
   const res = await fwDroneFlightRecordDetailApi({ id: formData.value.id })
   const res1 = await fwDroneFlightRecordDetailPageApi({ flightRecordId: formData.value.id })
@@ -98,28 +105,35 @@
   formData.value = res?.data?.data ?? {}
}
let arrowLineMaterialProperty = new ArrowLineMaterialProperty({
   color: new Cesium.Color(128 / 255, 215 / 255, 255 / 255, 1),
   directionColor: new Cesium.Color(1, 1, 1, 1),
   outlineColor: new Cesium.Color(1, 1, 1, 1),
   outlineWidth: 0,
   speed: 5,
})
// 角度转c3
function degreesToC3 ({ longitude, latitude, height = 0 }) {
function degreesToC3({ longitude, latitude, height = 0 }) {
   return Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
}
// 渲染航线
function drawFlightPath () {
function drawFlightPath() {
   const positions = list.value.map(p => degreesToC3(p))
   droneLineEntity && geometricSource.entities.remove(droneLineEntity)
   const color = Cesium.Color.fromCssColorString('#00D690')
   droneLineEntity = geometricSource.entities.add({
      polyline: {
         width: 4,
         positions: positions,
         width: 3,
         material: new Cesium.PolylineOutlineMaterialProperty({ color }),
         material: arrowLineMaterialProperty,
         clampToGround: false,
      },
   })
   viewer.flyTo(droneLineEntity)
   viewer.flyTo(droneLineEntity, { duration: 0 })
}
// 关闭后重置
function handleClosed () {
function handleClosed() {
   formData.value = initForm()
   list.value = []
   viewer = null
@@ -128,7 +142,7 @@
}
let viewer, geometricSource, droneLineEntity
function initMap () {
function initMap() {
   if (viewer) return
   const publicCesiumInstance = new PublicCesium({
      dom: 'leftMapContainer',
@@ -143,7 +157,7 @@
}
// 打开弹框
async function open ({ mode, row } = {}) {
async function open({ mode, row } = {}) {
   dialogMode.value = mode || 'add'
   visible.value = true
   await nextTick()