From 70df9429bb56fc293cf7891cb261c2403c0bcb6e Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 27 Oct 2025 14:45:23 +0800
Subject: [PATCH] feat:demo
---
src/assets/images/layerManagement/newcon_box.png | 0
src/views/layerManagement/components/utils.js | 19 ++++--
src/styles/mapEdit.scss | 59 +++++++++++++++++++
src/views/layerManagement/index.vue | 72 ++++++++++++++++++-----
src/styles/common.scss | 3 +
5 files changed, 130 insertions(+), 23 deletions(-)
diff --git a/src/assets/images/layerManagement/newcon_box.png b/src/assets/images/layerManagement/newcon_box.png
new file mode 100644
index 0000000..483bf7a
--- /dev/null
+++ b/src/assets/images/layerManagement/newcon_box.png
Binary files differ
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 4464cf7..e0704d4 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -3,6 +3,9 @@
@import './base.scss';
@import './tool.scss';
@import './element-ui.scss';
+// 地图编辑样式
+@import './mapEdit.scss';
+
a {
text-decoration: none;
color: #333;
diff --git a/src/styles/mapEdit.scss b/src/styles/mapEdit.scss
new file mode 100644
index 0000000..4a7aac3
--- /dev/null
+++ b/src/styles/mapEdit.scss
@@ -0,0 +1,59 @@
+.create-wayline-box {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 130px;
+ height: 70px;
+
+ .create-wayline-menu {
+ background: url('@/assets/images/layerManagement/newcon_box.png') no-repeat center / 100% 100%;
+ margin: 15px;
+
+ div {
+ color: #fff;
+ width: 90px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 12px;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+}
+
+.planar-polygon-edit-tooltip {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+
+
+ .planar-polygon-edit-menu {
+ padding: 4px 0px;
+ transform: translate(24px, 10px);
+
+ background: url('@/assets/images/layerManagement/newcon_box.png') no-repeat center / 100% 100%;
+ border-radius: 4px;
+
+ div {
+ color: #fff;
+ width: 90px;
+ height: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 12px;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/layerManagement/components/utils.js b/src/views/layerManagement/components/utils.js
index 80c8101..2b9e452 100644
--- a/src/views/layerManagement/components/utils.js
+++ b/src/views/layerManagement/components/utils.js
@@ -164,6 +164,8 @@
ind: pointIndex, // 索引记录
},
})
+
+
}
// 清除不在范围内的点
removeLastInvalidPoint() {
@@ -308,11 +310,11 @@
this.removeMenuPopup()
const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isStartPoint = pickedAllEntity.find(i => i.id.name === '起飞点')
+
const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
- if (isStartPoint) return
+
// 如果不是绘制模式
if (!this.drawingMode) {
@@ -349,10 +351,11 @@
}
// 鼠标右键点击（弹出菜单）
- handleRightClick(click) {
+ handleRightClick(click) {
+ console.log('click',click);
+
const that = this
if (that.drawingMode) return
-
that.removeMenuPopup()
const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id)
@@ -367,10 +370,12 @@
pickedEntity = isPolygon
tooltipEvent = that.delPolygon
menuType = 'polygon'
+
} else if (isEditPoint) {
pickedEntity = isEditPoint
tooltipEvent = that.delPoint
menuType = 'edit-point'
+
}
if (pickedEntity && this.isDeleteTheArea) {
@@ -469,6 +474,7 @@
menuPopup.id = 'planarPolygonEditMenu'
menuPopup.className = 'planar-polygon-edit-menu'
+
const menuItems =
type === 'polygon'
? [{ title: '删除测区', class: 'del-planar-polygon' }]
@@ -480,6 +486,7 @@
titleDiv.className = item.class
menuPopup.appendChild(titleDiv)
})
+
this.isPreviewMode = true
menuPopupVBox.appendChild(menuPopup)
return menuPopupVBox
@@ -540,7 +547,7 @@
initPolygon(viewer, positions, isPurePreview = false) {
this.initHandler(viewer)
this.isPureSpotPreview = isPurePreview
- this.startDrawing()
+ // this.startDrawing()
let newPosition = positions.map(item => {
return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item.height))
})
@@ -571,7 +578,7 @@
// 初始化事件处理器
initHandler(viewer) {
this.viewer = viewer
- this.startDrawing()
+ // this.startDrawing()
if (!this.handler) {
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 0668a73..e22caba 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -3,20 +3,29 @@
<div class="layerContainer">
<!-- 地图 -->
<div id="layMap" class="ztzf-cesium"></div>
+ <div class="draw-control">
+ <div @click="startDraw">开始绘制多边形</div>
+ </div>
</div>
</basic-container>
</template>
<script setup>
-import { DrawPolygon } from '@/views/layerManagement/components/utils'
+import { DrawPolygon } from '@/views/layerManagement/components/utils';
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
-import _, { cloneDeep, throttle } from 'lodash'
+import _, { cloneDeep, throttle } from 'lodash';
+import { ElButton } from 'element-plus';
+
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
-// 地图
+
+// 初始化绘制工具实例
+const drawPolygonExample = new DrawPolygon();
+
+// 地图初始化
const initMap = () => {
publicCesiumInstance = new PublicCesium({
dom: 'layMap',
@@ -28,21 +37,40 @@
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
+
+ drawPolygonExample.initHandler(viewer);
};
-const drawPolygonExample = new DrawPolygon()
-const loadPlanarRoute =async(positions = null, save = false)=>{
-}
+// 开启绘制模式（按钮点击触发）
+const startDraw = () => {
+ // 清除之前的绘制内容，重新开启绘制
+ drawPolygonExample.removeEntities();
+ drawPolygonExample.startDrawing();
+};
-const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200)
-drawPolygonExample.subscribe('getShowWaringTip', data => {
-
-})
+// 处理绘制完成后的多边形坐标（示例）
+const loadPlanarRoute = async (positions = null, save = false) => {
+ if (!positions || positions.length < 3) return;
+ console.log('绘制的多边形顶点坐标（Cartesian3）：', positions);
+ //坐标转换
+ const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions);
+ const latLngPositions = cartographics.map(cartographic => ({
+ lng: Cesium.Math.toDegrees(cartographic.longitude),
+ lat: Cesium.Math.toDegrees(cartographic.latitude),
+ height: cartographic.height || 0,
+ }));
+ console.log('转换后的经纬度坐标：', latLngPositions);
+};
+
+const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
- throttleLoadPlanarRoute(data)
-})
-// 销毁
+ throttleLoadPlanarRoute(data);
+});
+
+// 地图销毁
const destroyMap = () => {
+ drawPolygonExample.destroy();
+
if (viewer) {
viewer.destroy();
viewer = null;
@@ -53,6 +81,7 @@
onMounted(() => {
initMap();
});
+
onBeforeUnmount(() => {
destroyMap();
});
@@ -60,12 +89,21 @@
<style scoped lang="scss">
.layerContainer {
- width: 100%;
- height: 100vh;
+ position: relative;
+ width: 100%;
+ height: 100vh;
#layMap {
width: 100%;
- height: 100%;
-
+ height: 100%;
}
}
+
+// 绘制控制按钮样式
+.draw-control {
+ position: absolute;
+ top: 16px;
+ left: 16px;
+ z-index: 100; // 确保按钮在地图上方
+ color: red;
+}
</style>
--
Gitblit v1.9.3