From 2784cbc55586099aa59ffb2b1080ac237fc96123 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 28 Oct 2025 11:41:28 +0800
Subject: [PATCH] feat:地图加载
---
src/views/layerManagement/components/utils.js | 2
src/views/layerManagement/components/leftList.vue | 435 +++++++++++++++++++++--------------------------
src/views/layerManagement/index.vue | 93 +++++++++
3 files changed, 288 insertions(+), 242 deletions(-)
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index 0160499..8941928 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -8,8 +8,7 @@
></el-input>
<div class="searchAndReset">
<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>
-
+ <el-button class="ztzf-button" icon="el-icon-refresh" @click="reset">清空</el-button>
</div>
</div>
<div class="btnGroups">
@@ -19,7 +18,7 @@
</div>
<div class="tableListBox">
<el-tree
- class="ztzf-el-tree"
+ class="ztzf-el-tree"
ref="treeRef"
v-model="checkedKeys"
:data="treeData"
@@ -38,7 +37,9 @@
<script setup>
import { ref } from 'vue';
-const layerData = inject('layerData')
+const emit = defineEmits(['update:coverData']);
+const coverData = ref();
+const layerData = inject('layerData');
const formData = {
isPush: undefined,
page: 1,
@@ -54,235 +55,193 @@
id: 'group1',
dkbh: '道路裂缝识别',
children: [
- {
- "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: 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: '综合类',
+ },
+ ],
},
-
]);
-// 提取图斑坐标
-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实例
@@ -309,14 +268,14 @@
}
}
};
-const coverData = ref()
+
const handleCheck = (checkedNodesData, checkedKeysData) => {
checkedNodes.value = checkedNodesData.checkedNodes;
-
-coverData.value = checkedNodesData
- console.log('选中的节点数据:', coverData.value);
-console.log('layerData',layerData.value.selectData);
+ coverData.value = checkedKeysData.checkedNodes;
+ // layerData.value.selectData = checkedKeysData.checkedNodes;
+ emit('update:coverData', coverData.value);
+ // console.log('选中的节点数据:', coverData.value);
};
const changeClick = val => {};
</script>
@@ -329,7 +288,7 @@
height: 95%;
z-index: 99;
width: 392px;
-
+
overflow: hidden;
background: rgba(0, 0, 0, 0.51);
border-radius: 8px 8px 8px 8px;
@@ -340,8 +299,8 @@
display: flex;
margin-top: 10px;
.inputName {
- width: 184px;
-height: 32px;
+ width: 184px;
+ height: 32px;
}
.searchAndReset {
width: 182px;
diff --git a/src/views/layerManagement/components/utils.js b/src/views/layerManagement/components/utils.js
index fbcb033..a80ec1a 100644
--- a/src/views/layerManagement/components/utils.js
+++ b/src/views/layerManagement/components/utils.js
@@ -61,6 +61,8 @@
this.delPoint = this.delPoint.bind(this)
// 外部订阅者
this.listeners = []
+ this.polygons = []; // 存储所有多边形数据 { id, positions, entity, pointsEntity }
+ this.currentPolygonIndex = -1; // 当前操作的多边形索引
}
// 实体命名常量
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 946e9bc..c70ace5 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -10,7 +10,7 @@
<!-- 地图 -->
<div class="mapContainer">
<div id="layMap" class="ztzf-cesium"></div>
- <leftList></leftList>
+ <leftList @update:coverData="handleCoverDataUpdate"></leftList>
</div>
</div>
</basic-container>
@@ -43,12 +43,97 @@
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)
+const selectDataList = ref([])
+// 提取图斑坐标
+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 handleCoverDataUpdate = (data) => {
+ selectDataList.value = data;
+ console.log('从子组件接收到的数据:', selectDataList.value);
+
+ // 数据更新后立即加载到地图
+ if (selectDataList.value.length > 0) {
+ loadDataToMap(selectDataList.value);
+ }
+};
+// 加载数据到地图
+const loadDataToMap = (dataList) => {
+ // 清空之前的绘制内容
+ drawPolygonExample.removeEntities();
+
+ // 遍历数据列表（支持多条数据，此处取第一条示例）
+ const targetData = dataList[0];
+ if (!targetData || !targetData.dkfw) return; // 检查数据和WKT字段是否存在
+
+ const wktPoints = polygonWktToTargetArray(targetData.dkfw);
+ if (wktPoints.length < 3) {
+ console.error("解析后的坐标点不足3个，无法形成多边形");
+ return;
+ }
+ const positionsWithHeight = wktPoints.map(point => ({
+ ...point,
+ height: 140.6
+ }));
+
+
+ drawPolygonExample.initPolygon(
+ viewer, // Cesium viewer 实例
+ positionsWithHeight, // 带高程的经纬度坐标数组
+ false // 是否纯预览模式（false 表示可编辑）
+ );
+};
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
@@ -82,7 +167,7 @@
// 处理绘制完成后的多边形坐标（示例）
const loadPlanarRoute = async (positions = null, save = false) => {
if (!positions || positions.length < 3) return;
- console.log('绘制的多边形顶点坐标（Cartesian3）：', positions);
+ // console.log('绘制的多边形顶点坐标（Cartesian3）：', positions);
//坐标转换
const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions);
const latLngPositions = cartographics.map(cartographic => ({
@@ -90,7 +175,7 @@
lat: Cesium.Math.toDegrees(cartographic.latitude),
height: cartographic.height || 0,
}));
- console.log('转换后的经纬度坐标：', latLngPositions);
+ // console.log('转换后的经纬度坐标：', latLngPositions);
};
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
--
Gitblit v1.9.3