From 12e68e6acc270263c0bea2baf72f3853eafe93e2 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 27 Oct 2025 17:02:10 +0800
Subject: [PATCH] feat:地图加载
---
src/views/layerManagement/components/rightEdit.vue | 33 +++++
src/views/layerManagement/components/utils.js | 9
src/views/layerManagement/components/leftList.vue | 209 ++++++++++++++++++++++++++++++++++
src/views/layerManagement/index.vue | 40 ++++-
src/styles/element-ui.scss | 22 +++
5 files changed, 297 insertions(+), 16 deletions(-)
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index c7378c2..16bd0a1 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -149,6 +149,28 @@
}
}
}
+.ztzf-input {
+ .el-input__wrapper {
+ padding: 0 8px !important;
+ background: #012a50;
+ box-shadow: none !important;
+ border: 1px solid #51a8ff;
+
+ .el-input__inner {
+ color: #ffffff;
+
+ &::placeholder {
+ color: #8ac3fd;
+ }
+ }
+ }
+
+ &.is-disabled {
+ .el-input__wrapper {
+ background-color: #012a50;
+ }
+ }
+}
//======以下针对表格功能 增删查改样式和弹窗=========
.ztzf-dialog-mange {
.el-dialog__body {
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
new file mode 100644
index 0000000..99f70f8
--- /dev/null
+++ b/src/views/layerManagement/components/leftList.vue
@@ -0,0 +1,209 @@
+<template>
+ <div class="table-overlay">
+ <div class="topBar">
+ <div
+ v-for="(item, index) in tabData"
+ :key="index"
+ :class="{ 'active-tab': activeTab === index }"
+ @click="activeTab = index"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ <div class="searchBox">
+ <el-input
+ class="ztzf-input inputName"
+ v-model="formData.dkbh"
+ placeholder="图斑名称"
+ ></el-input>
+ <div class="searchAndReset">
+ <div class="reset" @click="reset">重置</div>
+ <div class="search" @click="search">搜索</div>
+ </div>
+ </div>
+ <div class="btnGroups">
+ <el-button type="primary">新增围栏</el-button>
+ <el-button type="success">新增文件夹</el-button>
+ <el-button type="info" @click="selectAll">全选</el-button>
+ </div>
+ <div class="tableListBox">
+ <el-tree
+ v-model="checkedKeys"
+ :data="treeData"
+ show-checkbox
+ node-key="id"
+ default-expand-all
+ :props="{
+ label: 'name',
+ children: 'children',
+ }"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const formData = {
+ isPush: undefined,
+ page: 1,
+ isGenerated: undefined,
+ pageSize: 17,
+ dkbh: '',
+ patchesName: '',
+};
+const tabData = ref([
+ {
+ name: '电子围栏',
+ type: '0',
+ },
+ {
+ name: '自定义禁飞区',
+ type: '1',
+ },
+ {
+ name: '国土空间规划',
+ type: '2',
+ },
+]);
+
+const activeTab = ref(0);
+const handelClick = val => {
+ activeTab.value = val.type;
+};
+const reset = () => {};
+const search = () => {};
+const treeData = ref([
+ {
+ id: 'group1',
+ name: '道路裂缝识别',
+ children: [
+ { id: 'road1', name: '桃花路' },
+ { id: 'road2', name: '洪城路' },
+ { id: 'road3', name: '中山路' },
+ ],
+ },
+ {
+ id: 'group2',
+ name: '电动车识别',
+ children: [
+ { id: 'electric1', name: '桃新大道' },
+ { id: 'electric2', name: '昌南大道' },
+ ],
+ },
+]);
+
+const checkedKeys = ref([]); // 存储勾选的节点key
+// 全选方法
+const selectAll = () => {
+ const allKeys = [];
+ // 递归收集所有节点的id
+ const collectKeys = data => {
+ data.forEach(item => {
+ allKeys.push(item.id);
+ if (item.children) {
+ collectKeys(item.children);
+ }
+ });
+ };
+ collectKeys(treeData.value);
+ checkedKeys.value = allKeys;
+ console.log('全选', checkedKeys.value);
+};
+</script>
+
+<style scoped lang="scss">
+.table-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 99%;
+ z-index: 99;
+ width: 377px;
+ height: 100%;
+ overflow: hidden;
+ background: rgba(0, 0, 0, 0.8);
+ border-radius: 8px 8px 8px 8px;
+ padding: 6px 10px 0 10px 10px 0 10px;
+}
+
+.topBar {
+ display: flex;
+ justify-content: space-between;
+ color: #fff;
+ font-size: 16px;
+
+ div {
+ padding: 8px 12px;
+ cursor: pointer;
+ position: relative;
+ transition: all 0.3s ease;
+
+ &:hover {
+ color: #409eff; // 悬停颜色
+ }
+
+ &.active-tab {
+ color: #409eff; // 激活颜色
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60%;
+
+ width: 60%;
+ height: 2px;
+ background-color: #409eff;
+ }
+ }
+ }
+}
+.searchBox {
+ display: flex;
+ margin-top: 10px;
+ .searchAndReset {
+ width: 182px;
+ display: flex;
+ justify-content: right;
+ align-items: center;
+ margin-right: 10px;
+ .reset,
+ .search {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 46px;
+ height: 32px;
+ cursor: pointer;
+ }
+
+ .reset {
+ margin-right: 7px;
+ background: #0d2b38;
+ border-radius: 4px 4px 4px 4px;
+ border: 1px solid #84cbd3;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ }
+
+ .search {
+ background: #1e2d51;
+ border-radius: 4px 4px 4px 4px;
+ border: 1px solid #c5d6ff;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ }
+ }
+}
+.btnGroups {
+ margin-top: 10px;
+ display: flex;
+}
+.tableListBox {
+}
+</style>
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
new file mode 100644
index 0000000..5da0f03
--- /dev/null
+++ b/src/views/layerManagement/components/rightEdit.vue
@@ -0,0 +1,33 @@
+<template>
+ <div class="rightContainer">
+ 右侧编辑
+ </div>
+</template>
+
+<script setup >
+/**
+ * @description rightEdit
+ * @date 2025-10-27 (周一) 15:06:00
+ */
+defineOptions({
+ name: 'rightEdit'
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.rightContainer {
+ top: 0;
+ right: 0;
+ height: 99%;
+ z-index: 99;
+ width: 377px;
+ height: 100%;
+ overflow: hidden;
+ background: rgba(0, 0, 0, 0.8);
+
+ border-radius: 8px 8px 8px 8px;
+ padding: 6px 10px 0 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/layerManagement/components/utils.js b/src/views/layerManagement/components/utils.js
index 2b9e452..fbcb033 100644
--- a/src/views/layerManagement/components/utils.js
+++ b/src/views/layerManagement/components/utils.js
@@ -351,9 +351,7 @@
}
// 鼠标右键点击（弹出菜单）
- handleRightClick(click) {
- console.log('click',click);
-
+ handleRightClick(click) {
const that = this
if (that.drawingMode) return
that.removeMenuPopup()
@@ -547,7 +545,8 @@
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))
})
@@ -578,7 +577,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 e22caba..4a3c0a5 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -3,14 +3,18 @@
<div class="layerContainer">
<!-- 地图 -->
<div id="layMap" class="ztzf-cesium"></div>
- <div class="draw-control">
+ <!-- <div class="draw-control">
<div @click="startDraw">开始绘制多边形</div>
- </div>
+ </div> -->
+ <leftList></leftList>
+
</div>
</basic-container>
</template>
<script setup>
+import RightEdit from '@/views/layerManagement/components/rightEdit.vue'
+import leftList from '@/views/layerManagement/components/leftList.vue'
import { DrawPolygon } from '@/views/layerManagement/components/utils';
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
@@ -37,16 +41,15 @@
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
-
drawPolygonExample.initHandler(viewer);
};
-// 开启绘制模式（按钮点击触发）
-const startDraw = () => {
- // 清除之前的绘制内容，重新开启绘制
- drawPolygonExample.removeEntities();
- drawPolygonExample.startDrawing();
-};
+// // 开启绘制模式（按钮点击触发）
+// const startDraw = () => {
+// // 清除之前的绘制内容，重新开启绘制
+// drawPolygonExample.removeEntities();
+// drawPolygonExample.startDrawing();
+// };
// 处理绘制完成后的多边形坐标（示例）
const loadPlanarRoute = async (positions = null, save = false) => {
@@ -77,13 +80,28 @@
}
publicCesiumInstance = null;
};
-
+// 阻止浏览器默认
+const preventDefault = event => {
+ event.preventDefault()
+ return
+}
+const cesiumContextMenu = (isAdd = true) => {
+ let cesium = document.getElementById('layMap')
+ if (!cesium) return
+ if (isAdd) {
+ cesium.addEventListener('contextmenu', preventDefault)
+ } else {
+ cesium.removeEventListener('contextmenu', preventDefault)
+ }
+}
onMounted(() => {
initMap();
+ cesiumContextMenu()
});
onBeforeUnmount(() => {
destroyMap();
+ cesiumContextMenu(false)
});
</script>
@@ -91,7 +109,7 @@
.layerContainer {
position: relative;
width: 100%;
- height: 100vh;
+ height: 90vh;
#layMap {
width: 100%;
height: 100%;
--
Gitblit v1.9.3