From d95ca015de7641aba381e1c61de9dbdada085d4e Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 29 Oct 2025 14:02:56 +0800
Subject: [PATCH] feat:清除编辑地图数据
---
src/views/layerManagement/index.vue | 204 +++++++++++++++++++++++++++------------------------
1 files changed, 108 insertions(+), 96 deletions(-)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 8690df9..0d02526 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -10,15 +10,23 @@
<!-- 地图 -->
<div class="mapContainer">
<div id="layMap" class="ztzf-cesium"></div>
- <leftList @update:coverData="handleCoverDataUpdate" :activeName="activeName"></leftList>
- <rightEdit></rightEdit>
+ <leftList
+ v-if="!layerParams.addNest && !layerParams.editNest"
+ @update:coverData="handleCoverDataUpdate"
+ @update:deitData="handleEdit"
+ :activeName="activeName"
+ ></leftList>
+ <rightEdit
+ v-if="layerParams.addNest || layerParams.editNest"
+ @callParentMethod="parentMethod"
+ ></rightEdit>
</div>
</div>
</basic-container>
</template>
<script setup>
-import { flyVisual } from '@/utils/cesium/mapUtil'
+import { flyVisual } from '@/utils/cesium/mapUtil';
import rightEdit from '@/views/layerManagement/components/rightEdit.vue';
import leftList from '@/views/layerManagement/components/leftList.vue';
import { DrawPolygon } from '@/views/layerManagement/components/utils';
@@ -26,8 +34,11 @@
import { PublicCesium } from '@/utils/cesium/publicCesium';
import _, { cloneDeep, throttle } from 'lodash';
import { ElButton } from 'element-plus';
+import { provide } from 'vue';
const activeName = ref('电子围栏');
const activeType = ref('0');
+// 当前面位置信息
+let curPolygonPosition = [];
const tabData = ref([
{
name: '电子围栏',
@@ -42,116 +53,94 @@
type: '2',
},
]);
-
+const layerParams = ref({
+ addNest: false,
+ editNest: false,
+ editDetailData: null,
+ total_count: 0,
+ total_area: 0,
+});
+provide('layerParams', layerParams);
const handleClick = tab => {
const clickedTab = tabData.value.find(item => item.type === tab.paneName);
activeType.value = clickedTab.type;
activeName.value = clickedTab.name;
};
-// 解析 geo_data 并转换为 DrawPolygon 所需的坐标格式
+
+// 解析 geo_data 并转换为坐标格式（兼容 Polygon 和 LineString）
const parseGeoDataToPositions = (geoDataStr, altitude) => {
try {
- // 解析 JSON 字符串为 GeoJSON 对象
const geoData = JSON.parse(geoDataStr);
- // 仅处理 Polygon 类型的地理数据
- if (geoData.type !== 'Polygon') return [];
+ let coordinates = [];
- // 提取 coordinates（取第一个面，忽略孔洞），并补充高度
- const coordinates = geoData.coordinates[0];
+ if (geoData.type === 'Polygon') {
+ // Polygon 坐标格式：[[[lng, lat], ...]] → 取第一个多边形的顶点
+ coordinates = geoData.coordinates[0] || [];
+ } else if (geoData.type === 'LineString') {
+ // LineString 坐标格式：[[lng, lat], ...] → 直接取顶点
+ coordinates = geoData.coordinates || [];
+ } else {
+ console.warn(`不支持的地理数据类型：${geoData.type}`);
+ return [];
+ }
+
+ // 转换为 {lng, lat, height} 格式
return coordinates.map(([lng, lat]) => ({
lng: Number(lng),
lat: Number(lat),
- height: Number(altitude) || 0, // 高度默认取数据中的 altitude，无则为 0
+ height: Number(altitude) || 0,
}));
} catch (error) {
console.error('解析 geo_data 失败：', error);
return [];
}
};
-
+let tbJwdList = [];
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 handleEdit = val => {
+ console.log('编辑数据', val);
+ layerParams.value.editDetailData = val;
+ drawPolygonExample.editThePatch(true);
+ const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
+ if (positions.length < 3) return; // 少于3个点无法构成多边形
+ drawPolygonExample.initPolygon(viewer, positions, true);
+};
+// 清除地图数据
+const parentMethod = () => {
+drawPolygonExample.delPolygon()
+};
+// 点击显示区域
const handleCoverDataUpdate = data => {
selectDataList.value = data;
-console.log('获取的',selectDataList.value);
if (selectDataList.value.length > 0) {
loadDataToMap(selectDataList.value);
} else {
- drawPolygonExample.removeEntities();
+ viewer.entities.removeAll();
}
};
-const loadDataToMap = (dataList) => {
- if (!viewer) return;
+const loadDataToMap = dataList => {
+ if (!viewer) return;
viewer.entities.removeAll();
- // 存储所有有效坐标，用于后续定位
- const allCoordinates = [];
+ // 存储所有有效坐标，用于后续定位
+ tbJwdList = [];
dataList.forEach(item => {
- // 解析 geo_data 为经纬度坐标数组（使用已有的 parseGeoDataToPositions 方法）
const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
if (positions.length < 3) {
console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
return;
}
-console.log('positions',positions);
+ tbJwdList.push(...positions);
// 转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式
let degreesArray = [];
positions.forEach(pos => {
- degreesArray.push(pos.lng, pos.lat, pos.height);
-
- });
+ degreesArray.push(pos.lng, pos.lat, pos.height);
+ });
viewer.entities.add({
- id: `polygon_${item.id}`,
- customType: 'fence_polygon',
+ id: `polygon_${item.id}`,
+ customType: 'fence_polygon',
customInfo: item,
polygon: {
hierarchy: new Cesium.PolygonHierarchy(
@@ -162,9 +151,8 @@
outlineColor: Cesium.Color.YELLOW, // 边框色
outlineWidth: 2, // 边框宽度
clampToGround: true, // 贴地显示
-
},
-
+
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
width: 2,
@@ -174,15 +162,33 @@
zIndex: 99, // 层级，确保在其他图层上方显示
});
});
-
+ focusOnAllFeatures();
// 添加点击事件（参考 entitiesAddSpot 的 spotHighlighting 逻辑）
// 移除已有点击事件，避免重复绑定
// viewInstance.value?.removeLeftClickEvent('fenceHighlighting');
// 绑定新的点击事件，用于高亮选中的围栏
// viewInstance.value?.addLeftClickEvent(null, handleFenceClick, 'fenceHighlighting');
};
+//计算所有图斑的包围球并定位
+const focusOnAllFeatures = () => {
+ if (tbJwdList.length === 0 || !viewer) return;
+
+ // 转换所有经纬度坐标为Cartesian3
+ const allPositions = tbJwdList.flatMap(pos =>
+ Cesium.Cartesian3.fromDegrees(pos.lng, pos.lat, pos.height || 0)
+ );
+ if (allPositions.length === 0) return;
+ const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
+ viewer.camera.flyToBoundingSphere(boundingSphere, {
+ duration: 0, // 飞行时间（秒）
+ offset: new Cesium.HeadingPitchRange(
+ Cesium.Math.toRadians(0), // 方向角
+ Cesium.Math.toRadians(-90) // 俯仰角
+ ),
+ });
+};
// 围栏点击处理函数（高亮选中项 + 可联动右侧编辑组件）
-const handleFenceClick = (movement) => {
+const handleFenceClick = movement => {
if (!viewer) return;
// 拾取点击的实体
@@ -195,9 +201,10 @@
viewer.entities.values.forEach(entity => {
if (entity.customType === 'fence_polygon') {
// 恢复默认样式
- entity.polygon.material = entity === selectedEntity
- ? selectedEntity.polygon.material.color.withAlpha(0.8) // 选中时加深透明度
- : selectedEntity.polygon.material.color.withAlpha(0.5); // 未选中恢复默认
+ entity.polygon.material =
+ entity === selectedEntity
+ ? selectedEntity.polygon.material.color.withAlpha(0.8) // 选中时加深透明度
+ : selectedEntity.polygon.material.color.withAlpha(0.5); // 未选中恢复默认
}
});
@@ -226,27 +233,32 @@
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
- drawPolygonExample.initHandler(viewer);
+ // drawPolygonExample.initHandler(viewer);
};
-// 处理绘制完成后的多边形坐标（示例）
+// 编辑/绘制
const loadPlanarRoute = async (positions = null, save = false) => {
- if (!positions || positions.length < 3) return;
- // console.log('绘制的多边形顶点坐标（Cartesian3）：', positions);
- //坐标转换
- const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions);
- const latLngPositions = cartographics.map(cartographic => ({
- lng: Cesium.Math.toDegrees(cartographic.longitude),
- lat: Cesium.Math.toDegrees(cartographic.latitude),
- height: cartographic.height || 0,
- }));
- // console.log('转换后的经纬度坐标：', latLngPositions);
-};
+ if (positions) {
+ curPolygonPosition = positions.map(item => {
+ let cartographic = Cesium.Cartographic.fromCartesian(item);
+ let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
+ let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
+ let height = Cesium.Math.toDegrees(cartographic.height); //高度
+ return {
+ lng: _.round(lng, 6),
+ lat: _.round(lat, 6),
+ height: _.round(height, 6),
+ };
+ });
+ }
+ let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
+ polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat]);
+ console.log('绘制的多边形顶点坐标（Cartesian3）：', polygon);
+ console.log('转换后的经纬度坐标：', curPolygonPosition);
+};
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
-console.log('绘制的数据',data);
-
throttleLoadPlanarRoute(data);
});
--
Gitblit v1.9.3