From 016de324c0145632532fcd5450b96a2d1291dac6 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Fri, 08 Mar 2024 17:41:24 +0800
Subject: [PATCH] update: 右键添加航点完成、kmz文件编辑等
---
src/pages/page-web/projects/components/route-edit/index.vue | 140 ++++++++++++++++++++++++++++++++++++++++------
1 files changed, 120 insertions(+), 20 deletions(-)
diff --git a/src/pages/page-web/projects/components/route-edit/index.vue b/src/pages/page-web/projects/components/route-edit/index.vue
index ea4e04e..e3a05a0 100644
--- a/src/pages/page-web/projects/components/route-edit/index.vue
+++ b/src/pages/page-web/projects/components/route-edit/index.vue
@@ -1,12 +1,26 @@
<template>
<div class="route-edit-box">
<div class="btn-group">
- <a-button type="text" @click="backPage">
- <template #icon>
- <ArrowLeftOutlined />
+ <a-popover
+ :visible="modfiyPopupShow"
+ overlayClassName="popup-container"
+ placement="leftBottom"
+ :getPopupContainer="(triggerNode: any) => triggerNode.parentNode">
+ <template #content>
+ <div class="popup-text">返回将退出航线编辑器，您要保存吗？如果不保存，您更改的内容将会丢失。</div>
+ <div class="btn-tool">
+ <a-button size="small" class="btn-cancel" @click="modfiyPopupShow = false">取消</a-button>
+ <a-button size="small" class="btn-cancel" @click="handleModfiySave(false)">不保存</a-button>
+ <a-button size="small" type="primary" @click="handleModfiySave(true)">保存</a-button>
+ </div>
</template>
- 返回
- </a-button>
+ <a-button type="text" @click="backPage">
+ <template #icon>
+ <ArrowLeftOutlined />
+ </template>
+ 返回
+ </a-button>
+ </a-popover>
<div class="save-button" @click="saveWaylineFile">
<SaveOutlined />
</div>
@@ -34,10 +48,15 @@
:key="index"
:class="{ 'active-point': index == selectPointIndex }"
@click="pointSelect(item, index)">
- <div class="graph">
- <div class="left"></div>
- <div class="right">{{ index + 1 }}</div>
- </div>
+ <a-tooltip placement="top">
+ <template #title>
+ <span>{{ item.isUseGlobalHeight ? '跟随全局' : '不跟随全局' }}</span>
+ </template>
+ <div class="graph">
+ <div class="left" :style="{ borderTopColor: item.isUseGlobalHeight ? '#61d396' : '#409eff' }"></div>
+ <div class="right">{{ index + 1 }}</div>
+ </div>
+ </a-tooltip>
<div class="graph-right">
<div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
<a-tooltip placement="top">
@@ -88,6 +107,7 @@
interface tragetPoint {
position: Cesium.Cartesian3
+ isUseGlobalHeight: boolean
eventList: eventParmas[]
}
@@ -246,7 +266,7 @@
},
{
class: 'add-next-point',
- title: `在${Number(selectPointIndex.value) + 1}号航点前插入`,
+ title: `在${Number(selectPointIndex.value) + 1}号航点后插入`,
},
]
const defaultEvents = [{ class: 'finally-point', title: '在最后航点新增航点' }]
@@ -320,6 +340,11 @@
const entity: Cesium.Entity = global.$viewer.entities.add({
position: createPointPosition,
})
+ const posterHeightRegStr = getKmlParams(kmlStr.value, true, {
+ name: 'takeOffRefPointAGLHeight',
+ findRegx: '([\\s\\S]*?)',
+ }) || ['', 0]
+ const posterHeight = Number(posterHeightRegStr[1])
// 加入kml文件中
const setting = {
Point: {
@@ -327,27 +352,36 @@
},
index: tragetPointArr.value.length,
height,
- ellipsoidHeight: height,
+ ellipsoidHeight: height - posterHeight,
}
+ removeAllDataSource()
+ removeAllPoint()
if (className === 'finally-point') {
- removeAllDataSource()
- removeAllPoint()
- kmzUtils.writePoint(setting)
+ kmzUtils.writePoint(setting, 'add')
globalEntities.value.push(entity)
- mapDraw.drawWayline(globalEntities.value, kmlStr.value)
tragetPointArr.value.push({
position: createPointPosition,
eventList: [],
})
}
if (className === 'add-prev-point') {
- // console.log(1)
+ kmzUtils.writePoint(setting, 'prev', selectPointIndex.value)
+ globalEntities.value.splice(selectPointIndex.value, 0, entity)
+ tragetPointArr.value.splice(selectPointIndex.value, 0, {
+ position: createPointPosition,
+ eventList: [],
+ })
}
if (className === 'add-next-point') {
- // const index = selectPointIndex.value
- // globalEntities.value.splice(index, 0, entity)
- // console.log()
+ kmzUtils.writePoint(setting, 'next', selectPointIndex.value)
+ const index = _.cloneDeep(selectPointIndex.value + 1)
+ globalEntities.value.splice(index, 0, entity)
+ tragetPointArr.value.splice(index, 0, {
+ position: createPointPosition,
+ eventList: [],
+ })
}
+ mapDraw.drawWayline(globalEntities.value, kmlStr.value)
// clearCesiumMap()
// createMapMarker(undefined, [...kmlEntities.value, entity])
})
@@ -361,8 +395,25 @@
}
}
+const modfiyPopupShow = ref<boolean>(false)
const backPage = () => {
- emits('backFn')
+ if (isModify.value) {
+ modfiyPopupShow.value = true
+ } else {
+ mapDraw.clearWaylineData()
+ kmlStr.value = ''
+ emits('backFn')
+ }
+}
+const handleModfiySave = (isSave: boolean) => {
+ if (isSave) {
+ saveWaylineFile()
+ modfiyPopupShow.value = false
+ } else {
+ mapDraw.clearWaylineData()
+ kmlStr.value = ''
+ emits('backFn')
+ }
}
// 清空画布
const clearCesiumMap = () => {
@@ -379,7 +430,22 @@
// 保存文件
const saveWaylineFile = () => {
kmzUtils.save()
+ mapDraw.clearWaylineData()
+ kmlStr.value = ''
+ emits('backFn')
}
+
+// 判断当前文件是否被修改
+const isModify = ref<boolean>(false)
+watch(
+ () => kmlStr.value,
+ (val) => {
+ isModify.value = true
+ },
+ {
+ deep: true,
+ },
+)
onMounted(() => {
// 清空画布
@@ -410,17 +476,48 @@
align-items: center;
justify-content: flex-start;
+ :deep() {
+ .popup-container {
+ .ant-popover-content {
+ .ant-popover-arrow,
+ .ant-popover-inner {
+ border-color: #282828;
+ background-color: #282828;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+ .popup-text {
+ color: #fff;
+ width: 400px;
+ }
+ .btn-tool {
+ margin-top: 10px;
+ display: flex;
+ justify-content: flex-end;
+ .ant-btn {
+ border: 0;
+ }
+ .btn-cancel {
+ background-color: #3c3c3c;
+ margin-right: 5px;
+ }
+ }
+ }
+ }
+ }
+ }
.ant-btn {
color: #fff;
}
+
.save-button {
font-size: 20px;
margin: 0 10px 0 auto;
cursor: pointer;
+
&:hover {
color: #409eff;
}
}
+
.setting-btn {
background-color: #3c3c3c;
margin-right: 10px;
@@ -472,6 +569,7 @@
padding: 0;
height: calc(100vh - 180px);
overflow: auto;
+
li {
cursor: pointer;
padding: 10px 0;
@@ -522,8 +620,10 @@
}
}
}
+
.active-point {
background-color: #3c3c3c;
+
.graph {
.left {
border-top-color: #f3bf4e !important;
--
Gitblit v1.9.3