From b4fc9cc11229924fd7520f21bf1f2592aa450c8a Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 28 Oct 2025 15:16:13 +0800
Subject: [PATCH] feat:接口获取数据
---
src/views/layerManagement/index.vue | 87 +++++++++++++++++++++----------------------
1 files changed, 43 insertions(+), 44 deletions(-)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index c70ace5..01dd32c 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -2,7 +2,7 @@
<basic-container>
<div class="layerContainer">
<div>
- <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tabs v-model="activeType" @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>
@@ -10,7 +10,7 @@
<!-- 地图 -->
<div class="mapContainer">
<div id="layMap" class="ztzf-cesium"></div>
- <leftList @update:coverData="handleCoverDataUpdate"></leftList>
+ <leftList @update:coverData="handleCoverDataUpdate" :activeName="activeName"></leftList>
</div>
</div>
</basic-container>
@@ -24,7 +24,8 @@
import { PublicCesium } from '@/utils/cesium/publicCesium';
import _, { cloneDeep, throttle } from 'lodash';
import { ElButton } from 'element-plus';
-const activeName = ref('0');
+const activeName = ref('电子围栏');
+const activeType = ref('0');
const tabData = ref([
{
name: '电子围栏',
@@ -42,14 +43,31 @@
const handleClick = tab => {
const clickedTab = tabData.value.find(item => item.type === tab.paneName);
- activeName.value = clickedTab.type;
-
+ activeType.value = clickedTab.type;
+ activeName.value = clickedTab.name;
};
-const layerData = ref({
- selectData:[],//选中的数据
-})
-provide('layerData', layerData)
-const selectDataList = ref([])
+// 解析 geo_data 并转换为 DrawPolygon 所需的坐标格式
+const parseGeoDataToPositions = (geoDataStr, altitude) => {
+ try {
+ // 解析 JSON 字符串为 GeoJSON 对象
+ const geoData = JSON.parse(geoDataStr);
+ // 仅处理 Polygon 类型的地理数据
+ if (geoData.type !== 'Polygon') return [];
+
+ // 提取 coordinates（取第一个面，忽略孔洞），并补充高度
+ const coordinates = geoData.coordinates[0];
+ return coordinates.map(([lng, lat]) => ({
+ lng: Number(lng),
+ lat: Number(lat),
+ height: Number(altitude) || 0, // 高度默认取数据中的 altitude，无则为 0
+ }));
+ } catch (error) {
+ console.error('解析 geo_data 失败：', error);
+ return [];
+ }
+};
+
+const selectDataList = ref([]);
// 提取图斑坐标
function polygonWktToTargetArray(wktPolygon, defaultHeight = 140.6) {
try {
@@ -98,42 +116,30 @@
return []; // 异常时返回空数组
}
}
-
-const handleCoverDataUpdate = (data) => {
+
+const handleCoverDataUpdate = data => {
selectDataList.value = data;
- console.log('从子组件接收到的数据:', selectDataList.value);
-
- // 数据更新后立即加载到地图
+// console.log('获取的',selectDataList.value);
+
if (selectDataList.value.length > 0) {
loadDataToMap(selectDataList.value);
+ } else {
+ drawPolygonExample.removeEntities();
}
};
-// 加载数据到地图
-const loadDataToMap = (dataList) => {
+const loadDataToMap = dataList => {
// 清空之前的绘制内容
drawPolygonExample.removeEntities();
-
- // 遍历数据列表（支持多条数据，此处取第一条示例）
- const targetData = dataList[0];
- if (!targetData || !targetData.dkfw) return; // 检查数据和WKT字段是否存在
+ dataList.forEach(item => {
+ // 转换坐标格式
+ const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
+ if (positions.length < 3) return; // 少于3个点无法构成多边形
- 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 表示可编辑）
- );
+ // 调用 DrawPolygon 的 initPolygon 方法渲染多边形
+ drawPolygonExample.initPolygon(viewer, positions, true);
+ });
};
+
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
@@ -156,13 +162,6 @@
viewInstance.value = publicCesiumInstance;
drawPolygonExample.initHandler(viewer);
};
-
-// // 开启绘制模式（按钮点击触发）
-// const startDraw = () => {
-// // 清除之前的绘制内容，重新开启绘制
-// drawPolygonExample.removeEntities();
-// drawPolygonExample.startDrawing();
-// };
// 处理绘制完成后的多边形坐标（示例）
const loadPlanarRoute = async (positions = null, save = false) => {
--
Gitblit v1.9.3