update： 新建航线、事件编辑、kmz文件问题修改

GuLiMmo

2024-03-19 aec00ecc093be803860c8675cbe1c4c776a7cb4e

 src/pages/page-web/projects/routeLine.vue

@@ -1,7 +1,7 @@
<template>
  <div class="project-wayline-wrapper height-100">
    <a-spin :spinning="loading" :delay="300" tip="加载中" size="large">
      <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
      <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450">
        <a-row>
          <a-col :span="1"></a-col>
          <a-col :span="15">历史航线</a-col>
@@ -10,7 +10,7 @@
      <div :style="{ height: height + 'px' }" class="scrollbar">
        <div id="data" class="height-100 uranus-scrollbar" v-if="routeLine.length !== 0" @scroll="onScroll">
          <div v-for="wayline in routeLine" :key="wayline.id">
            <div class="wayline-panel" style="padding-top: 5px;" @click="selectRoute(wayline)">
            <div class="wayline-panel" style="padding-top: 5px" @click="selectRoute(wayline)">
              <div class="title">
                <a-tooltip :title="wayline.title">
                  <div class="pr10">{{ wayline.title }}</div>
@@ -21,12 +21,11 @@
                </a-tooltip>
                <div class="fz20"></div>
              </div>
              <div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
              </div>
              <div class="mt5 ml10" style="color: hsla(0,0%,100%,0.35);">
              <div class="ml10 mt5" style="color: hsla(0, 0%, 100%, 0.65)"></div>
              <div class="mt5 ml10" style="color: hsla(0, 0%, 100%, 0.35)">
                <span class="mr10">开始时间: {{ convertTimestampToDate(wayline.start_time) }}</span>
              </div>
              <div class="mt5 ml10" style="color: hsla(0,0%,100%,0.35);">
              <div class="mt5 ml10" style="color: hsla(0, 0%, 100%, 0.35)">
                <span class="mr10">结束时间: {{ convertTimestampToDate(wayline.end_time) }}</span>
              </div>
            </div>
@@ -40,8 +39,11 @@

    <!-- 地图内弹窗 -->
    <div class="popup-box" ref="popup">
      <div class="popup-title">
        <span @click="closePopUp">×</span>
      </div>
      <div class="PopUp">
        <img :src="currentWayline.photo_url" alt="photo">
        <img :src="currentWayline.photo_url" alt="photo" />
        <div>
          <div>云台偏航角：{{ currentWayline.gimbal_yaw_degree }}</div>
          <div>拍摄绝对高度：{{ currentWayline.absolute_altitude }}</div>
@@ -64,7 +66,10 @@
import * as Cesium from 'cesium'
import { convertTimestampToDate } from '/@/utils/time'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { NONAME } from 'dns'

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}

const loading = ref(false)
const { appContext } = getCurrentInstance()
@@ -72,13 +77,23 @@
const pagination: IPage = {
  page: 1,
  total: -1,
  page_size: 10
  page_size: 10,
}
const routeLine = ref([])
const workspaceId = computed(() => store.state.common.projectId || localStorage.getItem(ELocalStorageKey.WorkspaceId))
const canRefresh = ref(true)
const height = ref()
const { addPoint, addClickEvent, removeClickEvent, removeById, addPolyline, getEntityById, flyTo, removeAllPoint, removeAllDataSource } = cesiumOperation()
const {
  addPoint,
  addClickEvent,
  removeClickEvent,
  removeById,
  addPolyline,
  getEntityById,
  flyTo,
  removeAllPoint,
  removeAllDataSource,
} = cesiumOperation()
const isShowPopUp = ref<boolean>(false)
const popup = ref(null)
const currentWayline = ref({
@@ -86,7 +101,7 @@
  gimbal_yaw_degree: '',
  absolute_altitude: '',
  relative_altitude: '',
  created_time: ''
  created_time: '',
})

onMounted(() => {
@@ -116,11 +131,12 @@

async function selectRoute (wayline: { start_time: string; id: string }) {
  currentWayline.value = {
    photo_url: 'https://dev.jxpskj.com:8026/cloud-bucket/5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_202311171122_004_5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_20231117112319_0001_W_%E8%88%AA%E7%82%B91.jpeg',
    photo_url:
      'https://dev.jxpskj.com:8026/cloud-bucket/5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_202311171122_004_5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_20231117112319_0001_W_%E8%88%AA%E7%82%B91.jpeg',
    gimbal_yaw_degree: '81°',
    absolute_altitude: '120m',
    relative_altitude: '120m',
    created_time: new Date(wayline.start_time).toLocaleString()
    created_time: new Date(wayline.start_time).toLocaleString(),
  }
  // currentWayline.value = wayline
  // 判断是否有历史航线的id实体
@@ -143,15 +159,15 @@
  })
  const pointOption = {
    longitude: routeLine[0],
    latitude: routeLine[1]
    latitude: routeLine[1],
  }
  routeLine = Cesium.Cartesian3.fromDegreesArray(routeLine)
  // 添加起飞点图片
  const billboardSetting = {
    ...pointOption,
    billboard: {
      id: 'start_point_img',
      image: 'https://dev.jxpskj.com:8026/cloud-bucket/5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_202311171122_004_5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_20231117112319_0001_W_%E8%88%AA%E7%82%B91.jpeg',
      image:
        'https://dev.jxpskj.com:8026/cloud-bucket/5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_202311171122_004_5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_20231117112319_0001_W_%E8%88%AA%E7%82%B91.jpeg',
      width: 40,
      height: 40,
      pixelOffset: new Cesium.Cartesian2(0, -10),
@@ -163,7 +179,7 @@
      pixelSize: 5,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2
      outlineWidth: 2,
    },
    label: {
      text: '起飞点',
@@ -171,14 +187,18 @@
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 1,
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      pixelOffset: new Cesium.Cartesian2(0, 10)
      pixelOffset: new Cesium.Cartesian2(0, 10),
    },
    id: 'start_point_billboard'
    id: 'start_point_billboard',
  }
  addPoint(billboardSetting)
  // 添加广告牌点击事件
  addClickEvent('start_point_billboard', addBillboard)
  function addBillboard (_click: any, _pick: any, viewer: { container: { append: (arg0: any) => void }; scene: Cesium.Scene }) {
  function addBillboard (
    _click: any,
    _pick: any,
    viewer: { container: { append: (arg0: any) => void }; scene: Cesium.Scene },
  ) {
    viewer.scene.postRender.removeEventListener(addBillboard)
    viewer.container.append(element)
    if (isShowPopUp.value) {
@@ -191,10 +211,10 @@
    viewer.scene.postRender.addEventListener(() => {
      const windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
        viewer.scene,
        Cesium.Cartesian3.fromDegrees(longitude, latitude, 0)
        Cesium.Cartesian3.fromDegrees(longitude, latitude, 0),
      )
      const x = windowCoord.x + 40
      const y = windowCoord.y - (element.offsetHeight / 2) - 40
      const y = windowCoord.y - element.offsetHeight / 2 - 40
      element.style.transform = `
        translate3d(${Math.round(x)}px,${Math.round(y)}px, 0)
      `
@@ -206,18 +226,29 @@
    latitude: 28.62452712442823,
    id: 'drone_route_history',
    polyline: {
      width: 5,
      width: 10,
      positions: routeLine,
      material: Cesium.Color.BLUE
      material: Cesium.Color.BLUE,
      clampToGround: false, // 关闭贴地效果，保留高度
    },
  }
  addPolyline(routeTrajectory)
  // 飞向第一个坐标点
  flyTo(pointOption, 4, 1000)
}

const closePopUp = () => {
  const element: HTMLDivElement | any = document.querySelector('.popup-box') || popup.value
  element.style.display = 'none'
}

function onScroll (e: any) {
  const element = e.srcElement
  if (element.scrollTop + element.clientHeight >= element.scrollHeight - 5 && Math.ceil(pagination.total / pagination.page_size) > pagination.page && canRefresh.value) {
  if (
    element.scrollTop + element.clientHeight >= element.scrollHeight - 5 &&
    Math.ceil(pagination.total / pagination.page_size) > pagination.page &&
    canRefresh.value
  ) {
    pagination.page++
    getHistoryWay()
  }
@@ -230,7 +261,6 @@
  // removeById('drone_route_history')
  removeAllPoint()
})

</script>

<style lang="scss" scoped>
@@ -259,19 +289,34 @@
  top: 0;
  left: 0;
  display: none;
  background-color: #fff;
  padding-top: 0;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .popup-title {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    span {
      text-align: right;
      cursor: pointer;
      font-weight: bolder;
      display: block;
      width: 25px;
    }
  }

  .PopUp {
    width: 250px;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #f5f5f5;
    padding: 10px;
    padding-top: 0px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: calc(50% - 6px);
      left: -9px;
      left: -12px;
      width: 0px;
      height: 0px;
      border-style: solid;