From 3e13dd0242140c7189b65e4171efaa9190d1763d Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Mon, 18 Mar 2024 18:03:07 +0800
Subject: [PATCH] kmz文件打包完成、新增航线功能、事件编辑
---
src/pages/page-web/projects/components/route-edit/index.vue | 52 ++++++++++++++++++++++++++++++++++------------------
1 files changed, 34 insertions(+), 18 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 ba5110c..dc41084 100644
--- a/src/pages/page-web/projects/components/route-edit/index.vue
+++ b/src/pages/page-web/projects/components/route-edit/index.vue
@@ -57,16 +57,18 @@
<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">
- <template #title>
- {{ event.name }}
- </template>
- <img :src="event.icon" alt="icon" />
- </a-tooltip>
+ <contextMenu :menu="[{ title: '删除航点', value: { index, item } }]">
+ <div class="graph-right">
+ <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
+ <a-tooltip placement="top">
+ <template #title>
+ {{ event.name }}
+ </template>
+ <img :src="event.icon" alt="icon" />
+ </a-tooltip>
+ </div>
</div>
- </div>
+ </contextMenu>
</li>
</ul>
</div>
@@ -85,6 +87,7 @@
import useMapDraw, { kmlEntities as globalEntities, selectPointIndex as pointIdx } from '/@/utils/cesium/use-map-draw'
import { getKmlParams } from '/@/utils/cesium/kmz'
import { getHaeHeight } from '/@/utils/cesium/mapUtils'
+import contextMenu from './components/content-menu.vue'
const store = useMyStore()
const { appContext }: any = getCurrentInstance()
const global = appContext.config.globalProperties
@@ -165,6 +168,16 @@
})
waylineDetails.value = details
tragetPointArr.value = waylinePointsEvent.value
+ watch(
+ () => waylinePointsEvent.value,
+ (val) => {
+ tragetPointArr.value = val
+ },
+ {
+ deep: true,
+ },
+ )
+
kmlEntities.value = entities.value
if (!mouseRightClickEvent) {
// 添加右键事件
@@ -172,8 +185,6 @@
}
})
}
-
-// const createPointOrPolyline = () => {}
// 创建广告牌
const createBillboard = (title: string | number, color: string) => {
@@ -244,9 +255,17 @@
kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => {
if (i === index) {
entity.billboard.image = createBillboard(index + 1, '#f3be4f')
+ const dashLineEntity: Cesium.Entity | any = getEntityById(`dashLine${i}`)
+ dashLineEntity.polyline.material = new Cesium.PolylineDashMaterialProperty({
+ color: Cesium.Color.fromBytes(235, 192, 99),
+ })
entity.label.show = true
} else {
entity.billboard.image = createBillboard(i + 1, '#61d396')
+ const dashLineEntity: Cesium.Entity | any = getEntityById(`dashLine${i}`)
+ dashLineEntity.polyline.material = new Cesium.PolylineDashMaterialProperty({
+ color: Cesium.Color.WHITE,
+ })
entity.label.show = false
}
})
@@ -351,12 +370,11 @@
// 加入到解析的JSON对象中
const setting = {
Point: {
- coordinates: { '#text': `${longitude.toFixed(6)},${latitude.toFixed(6)}` },
+ coordinates: { '#text': `${longitude},${latitude}` },
},
index: { '#text': points.length },
- height: { '#text': height },
ellipsoidHeight: { '#text': height - posterHeight },
- isRisky: { '#text': 0 },
+ height: { '#text': height },
useGlobalHeadingParam: { '#text': 1 },
useGlobalHeight: { '#text': 1 },
useGlobalSpeed: { '#text': 1 },
@@ -374,9 +392,8 @@
waypointTurnDampingDist: { '#text': 0.2 },
waypointTurnMode: { '#text': 'toPointAndStopWithDiscontinuityCurvature' },
},
+ isRisky: { '#text': 0 },
}
- removeAllDataSource()
- removeAllPoint()
if (className === 'finally-point') {
globalEntities.value.push(entity)
xmlTemplate.value.Folder.Placemark.push(setting)
@@ -409,7 +426,6 @@
xmlTemplate.value.Folder.Placemark.forEach((placemark: { index: { [x: string]: number } }, index: number) => {
placemark.index['#text'] = index
})
-
const xmlStr = kmzUtils.generateXML(xmlTemplate.value)
mapDraw.drawWayline(globalEntities.value, xmlStr)
})
@@ -623,7 +639,7 @@
}
.graph-right {
- width: calc(100% - 40px);
+ width: 100%;
height: 30px;
border-bottom: 1px solid #4f4f4f;
display: flex;
--
Gitblit v1.9.3