From adf22ab5619e2903a98fbda955a7708956600760 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 28 Oct 2025 10:46:49 +0800
Subject: [PATCH] feat:地图加载
---
src/views/layerManagement/components/leftList.vue | 366 ++++++++++++++++++++++++++++++++-------------
src/views/layerManagement/index.vue | 85 ++++++---
src/styles/element-ui.scss | 17 +
3 files changed, 327 insertions(+), 141 deletions(-)
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 16bd0a1..4a42324 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -152,15 +152,15 @@
.ztzf-input {
.el-input__wrapper {
padding: 0 8px !important;
- background: #012a50;
+ background: #2D2D2D;
box-shadow: none !important;
- border: 1px solid #51a8ff;
-
+ border: 1px solid #fff;
+
.el-input__inner {
color: #ffffff;
&::placeholder {
- color: #8ac3fd;
+ color: rgba(255,255,255,0.37);
}
}
}
@@ -171,6 +171,15 @@
}
}
}
+.ztzf-button {
+ background-color: transparent !important;
+ color: #fff !important;
+}
+.ztzf-el-tree {
+ background-color: transparent !important;
+ --el-tree-node-hover-bg-color:transparent !important;
+ color: #fff !important;
+}
//======以下针对表格功能 增删查改样式和弹窗=========
.ztzf-dialog-mange {
.el-dialog__body {
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index 25c4356..0160499 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -1,42 +1,34 @@
<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="图斑名称"
+ placeholder="输入名称模糊搜索"
></el-input>
<div class="searchAndReset">
- <div class="reset" @click="reset">重置</div>
- <div class="search" @click="search">搜索</div>
+ <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+ <el-button class="ztzf-button" icon="el-icon-refresh" @click="reset">清空</el-button>
+
</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>
+ <el-button class="ztzf-button">新增围栏</el-button>
+ <el-button class="ztzf-button">新增文件夹</el-button>
+ <el-button class="ztzf-button" @click="selectAll">全选</el-button>
</div>
<div class="tableListBox">
<el-tree
- ref="treeRef"
+ class="ztzf-el-tree"
+ ref="treeRef"
v-model="checkedKeys"
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
- @check="handleCheck"
+ @check="handleCheck"
:props="{
- label: 'name',
+ label: 'dkbh',
children: 'children',
}"
/>
@@ -46,6 +38,7 @@
<script setup>
import { ref } from 'vue';
+const layerData = inject('layerData')
const formData = {
isPush: undefined,
page: 1,
@@ -54,47 +47,242 @@
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: '道路裂缝识别',
+ dkbh: '道路裂缝识别',
children: [
- { id: 'road1', name: '桃花路' },
- { id: 'road2', name: '洪城路' },
- { id: 'road3', name: '中山路' },
- ],
+ {
+ "id": 519239,
+ "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
+ "dock_sn": "7CTDM7100BN4J5",
+ "bsm": "77de338bc7c348ff96d37e336def1a0b",
+ "dklx": "QT",
+ "dkbh": "相对地形高度测试航线",
+ "dkfw": "POLYGON((114.824346 25.992131, 114.825211 25.991885, 114.824945 25.990836, 114.823565 25.99111, 114.824346 25.992131, 114.824346 25.992131))",
+ "create_time": 1759126987041,
+ "update_time": 1759126987041,
+ "is_plan": 0,
+ "investigate": 1,
+ "is_push": 0,
+ "user_name": "张红娟",
+ "type": 0,
+ "special_type": 0,
+ "patches_info_id": 65,
+ "create_user": "1899711781376974849",
+ "create_dept": "1916401339951845377",
+ "area_code": "360704000000",
+ "update_user": "1899711781376974849",
+ "is_deleted": 0,
+ "is_generated": 1,
+ "collection_time": "2025-09-29 14:41:03",
+ "patches_name": "自定义图斑",
+ "patches_type": "综合类"
+ },
+ {
+ "id": 517566,
+ "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
+ "dock_sn": "7CTDM7100BN4J5",
+ "bsm": "baad483e5ba54dcb9c1bb311082fa9e5",
+ "dklx": "QT",
+ "dkbh": "65面状航线测试01-夏潭",
+ "dkfw": "POLYGON((114.82207 25.992745, 114.822648 25.992635, 114.822551 25.992142, 114.821895 25.992132, 114.82207 25.992745, 114.82207 25.992745))",
+ "create_time": 1758158120486,
+ "update_time": 1758158120486,
+ "is_plan": 0,
+ "investigate": 0,
+ "is_push": 0,
+ "user_name": "张红娟",
+ "type": 0,
+ "special_type": 0,
+ "patches_info_id": 65,
+ "create_user": "1899711781376974849",
+ "create_dept": "1916401339951845377",
+ "area_code": "360704000000",
+ "update_user": "1899711781376974849",
+ "is_deleted": 0,
+ "is_generated": 0,
+ "patches_name": "自定义图斑",
+ "patches_type": "综合类"
+ },
+ {
+ "id": 517567,
+ "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
+ "dock_sn": "7CTDM7100BN4J5",
+ "bsm": "4bbaac90ddb04fe1ab7ad5adbb5dece7",
+ "dklx": "QT",
+ "dkbh": "65新建航线20250918094540",
+ "dkfw": "POLYGON((114.821512 25.992198, 114.823099 25.991259, 114.822046 25.990192, 114.820519 25.99109, 114.821512 25.992198, 114.821512 25.992198))",
+ "create_time": 1758159958425,
+ "update_time": 1758159958425,
+ "is_plan": 0,
+ "investigate": 0,
+ "is_push": 0,
+ "user_name": "张红娟",
+ "type": 0,
+ "special_type": 0,
+ "patches_info_id": 65,
+ "create_user": "1899711781376974849",
+ "create_dept": "1916401339951845377",
+ "area_code": "360704000000",
+ "update_user": "1899711781376974849",
+ "is_deleted": 0,
+ "is_generated": 0,
+ "patches_name": "自定义图斑",
+ "patches_type": "综合类"
+ },
+ {
+ "id": 518228,
+ "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
+ "dock_sn": "7CTDM7100BN4J5",
+ "bsm": "4a7824e676404cd8a2efb11ff8ae681e",
+ "dklx": "QT",
+ "dkbh": "新建航线20250922145458",
+ "dkfw": "POLYGON((114.821696 25.993983, 114.819532 25.992569, 114.819172 25.994371, 114.820561 25.995004, 114.822089 25.994711, 114.821696 25.993983, 114.821696 25.993983))",
+ "create_time": 1758524113039,
+ "update_time": 1758524113039,
+ "is_plan": 0,
+ "investigate": 0,
+ "is_push": 0,
+ "user_name": "张含笑",
+ "type": 0,
+ "special_type": 0,
+ "patches_info_id": 65,
+ "create_user": "1909067460995813377",
+ "create_dept": "1916401339951845377",
+ "area_code": "360704000000",
+ "update_user": "1909067460995813377",
+ "is_deleted": 0,
+ "is_generated": 0,
+ "patches_name": "自定义图斑",
+ "patches_type": "综合类"
+ },
+ {
+ "id": 518229,
+ "workspace_id": "5d188623-c141-4a89-bb1a-9a191d7fb73c",
+ "dock_sn": "8UUXN5M00A08ZD",
+ "bsm": "fdd2bedf59fd4835bdc97a2bc86c3d60",
+ "dklx": "QT",
+ "dkbh": "新建航线20250922152253",
+ "dkfw": "POLYGON((115.894265 28.706264, 115.886028 28.683945, 115.874846 28.684871, 115.867501 28.697979, 115.874331 28.708741, 115.894265 28.706264, 115.894265 28.706264))",
+ "create_time": 1758525803996,
+ "update_time": 1758525803996,
+ "is_plan": 0,
+ "investigate": 0,
+ "is_push": 0,
+ "user_name": "张含笑",
+ "type": 0,
+ "special_type": 0,
+ "patches_info_id": 65,
+ "create_user": "1909067460995813377",
+ "create_dept": "1916401339951845377",
+ "area_code": "360113000000",
+ "update_user": "1909067460995813377",
+ "is_deleted": 0,
+ "is_generated": 0,
+ "patches_name": "自定义图斑",
+ "patches_type": "综合类"
+ },
+ {
+ "id": 519199,
+ "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
+ "dock_sn": "7CTDM7100BN4J5",
+ "bsm": "a30c349611d546f8b1daa6a5e4c8e2a8",
+ "dklx": "QT",
+ "dkbh": "新建航线20250922162339",
+ "dkfw": "POLYGON((114.823711 25.993143, 114.823074 25.990854, 114.826097 25.990424, 114.826746 25.992621, 114.823711 25.993143, 114.823711 25.993143))",
+ "create_time": 1758529455155,
+ "update_time": 1758529455156,
+ "is_plan": 0,
+ "investigate": 0,
+ "is_push": 0,
+ "user_name": "黄秋雨",
+ "type": 0,
+ "special_type": 0,
+ "patches_info_id": 65,
+ "create_user": "1831880712850235393",
+ "create_dept": "1916401339951845377",
+ "area_code": "360704000000",
+ "update_user": "1831880712850235393",
+ "is_deleted": 0,
+ "is_generated": 0,
+ "patches_name": "自定义图斑",
+ "patches_type": "综合类"
+ },
+ {
+ "id": 519200,
+ "workspace_id": "6566662f-17c5-44f1-89d2-f09b37b81794",
+ "dock_sn": "7CTDM7100BN4J5",
+ "bsm": "d782d9cba4da403f80c4bbd93e2c765e",
+ "dklx": "QT",
+ "dkbh": "新建航线20250924092549",
+ "dkfw": "POLYGON((114.836948 25.983711, 114.841575 25.971469, 114.829782 25.972419, 114.822853 25.978449, 114.826958 25.983154, 114.836948 25.983711, 114.836948 25.983711))",
+ "create_time": 1758677163541,
+ "update_time": 1758677163541,
+ "is_plan": 0,
+ "investigate": 0,
+ "is_push": 0,
+ "user_name": "张含笑",
+ "type": 0,
+ "special_type": 0,
+ "patches_info_id": 65,
+ "create_user": "1909067460995813377",
+ "create_dept": "1916401339951845377",
+ "area_code": "360704000000",
+ "update_user": "1909067460995813377",
+ "is_deleted": 0,
+ "is_generated": 0,
+ "patches_name": "自定义图斑",
+ "patches_type": "综合类"
+ },
+
+
+]
},
- {
- id: 'group2',
- name: '电动车识别',
- children: [
- { id: 'electric1', name: '桃新大道' },
- { id: 'electric2', name: '昌南大道' },
- ],
- },
+
]);
+// 提取图斑坐标
+function polygonWktToTargetArray(wktPolygon, defaultHeight = 140.6) {
+ try {
+ if (!/^POLYGON\(\([\d\s,.]+\)\)$/.test(wktPolygon)) {
+ throw new Error('输入不是有效的 WKT POLYGON 格式')
+ }
+ const coordStr = wktPolygon
+ .replace(/^POLYGON\(\(/, '')
+ .replace(/\)\)$/, '')
+ .trim()
+
+ const coordPairs = coordStr.split(/,\s*/).filter(pair => pair.trim() !== '')
+
+ const result = coordPairs.map(pair => {
+ const [lng, lat] = pair
+ .split(/\s+/)
+ .map(Number)
+ .filter(num => !isNaN(num))
+
+ if (lng === undefined || lat === undefined || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+ throw new Error(`无效的经纬度对：${pair}`)
+ }
+
+ return {
+ lng: lng,
+ lat: lat,
+ longitude: lng, // 与 lng 一致
+ latitude: lat, // 与 lat 一致
+
+ }
+ })
+
+ const uniqueResult = Array.from(new Map(result.map(item => [`${item.lng}-${item.lat}`, item])).values())
+
+ return uniqueResult
+ } catch (error) {
+ return [] // 异常时返回空数组
+ }
+}
const checkedKeys = ref([]); // 存储勾选的节点key
const treeRef = ref(null); // 获取tree实例
@@ -105,9 +293,9 @@
// 获取所有节点的key
const allKeys = treeData.value.flatMap(item => [
item.id,
- ...item.children.map(child => child.id)
+ ...item.children.map(child => child.id),
]);
-
+
if (checkedKeys.value.length === allKeys.length) {
// 如果已经全选，则取消全选
treeRef.value.setCheckedKeys([]);
@@ -116,25 +304,21 @@
// 否则全选
treeRef.value.setCheckedKeys(allKeys);
// 获取所有节点数据
- checkedNodes.value = treeData.value.flatMap(item => [
- item,
- ...item.children
- ]);
- console.log('所有数据',checkedNodes.value);
+ checkedNodes.value = treeData.value.flatMap(item => [item, ...item.children]);
+ console.log('所有数据', checkedNodes.value);
}
}
};
+const coverData = ref()
const handleCheck = (checkedNodesData, checkedKeysData) => {
checkedNodes.value = checkedNodesData.checkedNodes;
-
-// console.log('选中的节点数据:', checkedNodesData);
-// console.log('选中的节点keys:', checkedKeysData);
+coverData.value = checkedNodesData
+ console.log('选中的节点数据:', coverData.value);
+console.log('layerData',layerData.value.selectData);
+
};
-const changeClick =(val)=>{
-
-}
-
+const changeClick = val => {};
</script>
<style scoped lang="scss">
@@ -142,53 +326,23 @@
position: absolute;
top: 0;
left: 0;
- height: 99%;
+ height: 95%;
z-index: 99;
- width: 377px;
- height: 100%;
+ width: 392px;
+
overflow: hidden;
- background: rgba(0, 0, 0, 0.8);
+ background: rgba(0, 0, 0, 0.51);
border-radius: 8px 8px 8px 8px;
- padding: 6px 10px 0 10px 10px 0 10px;
+ padding: 16px 12px;
}
-.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;
+ .inputName {
+ width: 184px;
+height: 32px;
+ }
.searchAndReset {
width: 182px;
display: flex;
@@ -206,7 +360,7 @@
}
.reset {
- margin-right: 7px;
+ margin-left: 12px;
background: #0d2b38;
border-radius: 4px 4px 4px 4px;
border: 1px solid #84cbd3;
@@ -226,7 +380,7 @@
}
}
.btnGroups {
- margin-top: 10px;
+ margin: 12px 0 14px 0;
display: flex;
}
.tableListBox {
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 4a3c0a5..946e9bc 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -1,26 +1,54 @@
<template>
<basic-container>
<div class="layerContainer">
+ <div>
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane v-for="tab in tabData" :key="tab.type" :label="tab.name" :name="tab.type">
+ </el-tab-pane>
+ </el-tabs>
+ </div>
<!-- 地图 -->
- <div id="layMap" class="ztzf-cesium"></div>
- <!-- <div class="draw-control">
- <div @click="startDraw">开始绘制多边形</div>
- </div> -->
- <leftList></leftList>
-
+ <div class="mapContainer">
+ <div id="layMap" class="ztzf-cesium"></div>
+ <leftList></leftList>
+ </div>
</div>
</basic-container>
</template>
<script setup>
-import RightEdit from '@/views/layerManagement/components/rightEdit.vue'
-import leftList from '@/views/layerManagement/components/leftList.vue'
+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';
import _, { cloneDeep, throttle } from 'lodash';
import { ElButton } from 'element-plus';
+const activeName = ref('0');
+const tabData = ref([
+ {
+ name: '电子围栏',
+ type: '0',
+ },
+ {
+ name: '自定义禁飞区',
+ type: '1',
+ },
+ {
+ name: '国土空间规划',
+ type: '2',
+ },
+]);
+const handleClick = tab => {
+ const clickedTab = tabData.value.find(item => item.type === tab.paneName);
+ activeName.value = clickedTab.type;
+ // console.log('Clicked tab data:', clickedTab);
+};
+const layerData = ref({
+ selectData:[],//选中的数据
+})
+provide('layerData', layerData)
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
@@ -82,46 +110,41 @@
};
// 阻止浏览器默认
const preventDefault = event => {
- event.preventDefault()
- return
-}
+ 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)
- }
-}
+ let cesium = document.getElementById('layMap');
+ if (!cesium) return;
+ if (isAdd) {
+ cesium.addEventListener('contextmenu', preventDefault);
+ } else {
+ cesium.removeEventListener('contextmenu', preventDefault);
+ }
+};
onMounted(() => {
initMap();
- cesiumContextMenu()
+ cesiumContextMenu();
});
onBeforeUnmount(() => {
destroyMap();
- cesiumContextMenu(false)
+ cesiumContextMenu(false);
});
</script>
<style scoped lang="scss">
.layerContainer {
+ width: 100%;
+ height: 90vh;
+}
+.mapContainer {
position: relative;
width: 100%;
- height: 90vh;
+ height: 80vh;
#layMap {
width: 100%;
height: 100%;
}
-}
-
-// 绘制控制按钮样式
-.draw-control {
- position: absolute;
- top: 16px;
- left: 16px;
- z-index: 100; // 确保按钮在地图上方
- color: red;
}
</style>
--
Gitblit v1.9.3