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/index.vue | 93 ++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 89 insertions(+), 4 deletions(-)
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