From 55fcb97a3d487f54353564f1e402e4d4b61feee9 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Tue, 12 Mar 2024 17:54:05 +0800
Subject: [PATCH] update：kmz/json转换、kmz打包后无法解析等
---
src/pages/page-web/projects/routeLine.vue | 86 +++++++++++++++++++++++++++++--------------
1 files changed, 58 insertions(+), 28 deletions(-)
diff --git a/src/pages/page-web/projects/routeLine.vue b/src/pages/page-web/projects/routeLine.vue
index 47741c7..c397424 100644
--- a/src/pages/page-web/projects/routeLine.vue
+++ b/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>
@@ -44,7 +43,7 @@
<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>
@@ -67,7 +66,11 @@
import * as Cesium from 'cesium'
import { convertTimestampToDate } from '/@/utils/time'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
-import { NONAME } from 'dns'
+import CustomerSportLine from '/@/utils/cesium/customerSportLine'
+
+const getResource = (name: string) => {
+ return new URL(`/src/assets/icons/${name}`, import.meta.url).href
+}
const loading = ref(false)
const { appContext } = getCurrentInstance()
@@ -75,13 +78,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({
@@ -89,7 +102,7 @@
gimbal_yaw_degree: '',
absolute_altitude: '',
relative_altitude: '',
- created_time: ''
+ created_time: '',
})
onMounted(() => {
@@ -119,11 +132,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实体
@@ -146,14 +160,15 @@
})
const pointOption = {
longitude: routeLine[0],
- latitude: routeLine[1]
+ latitude: routeLine[1],
}
routeLine = Cesium.Cartesian3.fromDegreesArray(routeLine)
// 添加起飞点图片
const billboardSetting = {
...pointOption,
billboard: {
- 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),
@@ -165,7 +180,7 @@
pixelSize: 5,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
- outlineWidth: 2
+ outlineWidth: 2,
},
label: {
text: '起飞点',
@@ -173,14 +188,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) {
@@ -193,10 +212,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)
`
@@ -208,9 +227,16 @@
latitude: 28.62452712442823,
id: 'drone_route_history',
polyline: {
- width: 5,
+ width: 10,
positions: routeLine,
- material: Cesium.Color.BLUE
+ // material: Cesium.Color.BLUE
+ material: new CustomerSportLine({
+ color: Cesium.Color.WHITE,
+ speed: 20,
+ image: getResource('arrow.png'),
+ repeat: { x: 15, y: 0 },
+ }),
+ clampToGround: false, // 关闭贴地效果，保留高度
},
}
addPolyline(routeTrajectory)
@@ -225,7 +251,11 @@
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()
}
@@ -238,7 +268,6 @@
// removeById('drone_route_history')
removeAllPoint()
})
-
</script>
<style lang="scss" scoped>
@@ -270,7 +299,7 @@
background-color: #fff;
padding-top: 0;
border-radius: 5px;
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.popup-title {
display: flex;
justify-content: flex-end;
@@ -280,7 +309,7 @@
cursor: pointer;
font-weight: bolder;
display: block;
- width: 25px
+ width: 25px;
}
}
@@ -313,4 +342,5 @@
overflow: auto;
scrollbar-width: thin;
scrollbar-color: #c5c8cc transparent;
-}</style>
+}
+</style>
--
Gitblit v1.9.3