From 5dc1eb8074f52b2fdc03216b62ae4e2d82acbe0f Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 03 Nov 2025 08:45:21 +0800
Subject: [PATCH] Merge branch 'refs/heads/feature/v7.0/7.0.4' into 图层管理
---
src/views/layerManagement/index.vue | 438 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 307 insertions(+), 131 deletions(-)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 8690df9..6a43cb5 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -9,25 +9,70 @@
</div>
<!-- 地图 -->
<div class="mapContainer">
+ <!-- <div class="tool-tip warning" v-show="isShowWaringTip">
+ <span class="icon">
+ <el-icon><WarningFilled /></el-icon>
+ </span>
+ <span>测区不支持交叉面，无法生成航线</span>
+ </div> -->
+ <div class="tool-tip" v-if="layerParams.addNest">点击地图生成测绘区域</div>
<div id="layMap" class="ztzf-cesium"></div>
- <leftList @update:coverData="handleCoverDataUpdate" :activeName="activeName"></leftList>
- <rightEdit></rightEdit>
+ <leftList
+ v-if="
+ !layerParams.addNest &&
+ !layerParams.editNest &&
+ !layerParams.addFolder &&
+ !layerParams.editFolder
+ "
+ @update:coverData="handleCoverDataUpdate"
+ @update:deitData="handleEdit"
+ @update:editFolder="handleFolder"
+ :activeName="activeName"
+ @newFencesMethods="newFencesMethods"
+ ></leftList>
+ <rightEdit
+ v-if="layerParams.addNest || layerParams.editNest"
+ @callParentMethod="parentMethod"
+ ></rightEdit>
+ <folderFile
+ @refreshMethod="refreshMethod"
+ :activeName="activeName"
+ v-if="layerParams.addFolder || layerParams.editFolder"
+ ></folderFile>
</div>
</div>
</basic-container>
</template>
<script setup>
-import { flyVisual } from '@/utils/cesium/mapUtil'
+import EventBus from '@/utils/eventBus';
+import * as turf from '@turf/turf';
+import { dataFolderApi } from '@/api/layer/index';
+import folderFile from '@/views/layerManagement/components/folderFile.vue';
+import { parseGeoDataToPositions } from '@/utils/geoParseUtil';
+import { flyVisual } from '@/utils/cesium/mapUtil';
import rightEdit from '@/views/layerManagement/components/rightEdit.vue';
import leftList from '@/views/layerManagement/components/leftList.vue';
+import nationalSpatialPlanning from '@/views/layerManagement/components/nationalSpatialPlanning.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';
+import { provide } from 'vue';
+import { useStore } from 'vuex';
+const store = useStore();
+const userInfo = computed(() => store.getters.userInfo);
+const areaCode = userInfo.value?.detail?.areaCode || '';
+// console.log('用户信息',areaCode);
+// 红色警告交叉面提示窗
+const isShowWaringTip = ref(false);
const activeName = ref('电子围栏');
const activeType = ref('0');
+let tbJwdList = [];
+const selectDataList = ref([]);
+// 当前面位置信息
+let curPolygonPosition = [];
const tabData = ref([
{
name: '电子围栏',
@@ -42,116 +87,111 @@
type: '2',
},
]);
+const layerParams = ref({
+ addNest: false,
+ editNest: false,
+ editDetailData: null,
+ total_count: 0,
+ total_area: 0,
+ polygonPosition: null,
+ decideWhetherToAddOrEdit: null, //新增or编辑围栏
+ addAnEditingFolder: null, //新增or编辑文件夹
+ addFolder: false,
+ editFolder: false,
+ folderOption: [], //文件夹选项
+ fenceType: 1,
+ fenceArea: 0, //围栏面积
+ fileType: 1, //文件夹类型
+ editFolderData: null,
+ editingIsProhibited: false, //禁止编辑
+ isDetailShow: false,
+});
const handleClick = tab => {
const clickedTab = tabData.value.find(item => item.type === tab.paneName);
activeType.value = clickedTab.type;
activeName.value = clickedTab.name;
+ getdataFolderApi();
+ parentMethod();
};
-// 解析 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
+const refreshMethod = () => {
+ getdataFolderApi();
+};
+const getdataFolderApi = () => {
+ let id;
+ if (activeName.value === '电子围栏') {
+ id = 1;
+ } else if (activeName.value === '自定义禁飞区') {
+ id = 2;
+ } else {
+ id = 3;
+ }
+ dataFolderApi(id).then(res => {
+ const originalFolderList = res.data.data || [];
+ const formattedFolderOption = originalFolderList.map(folder => ({
+ label: folder.name,
+ value: folder.id.toString(),
}));
- } catch (error) {
- console.error('解析 geo_data 失败：', error);
- return [];
- }
+ layerParams.value.folderOption = formattedFolderOption;
+ });
};
-
-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 => {
+ viewer.entities.removeAll();
+ layerParams.value.editDetailData = val;
+ drawPolygonExample.editThePatch(true);
+ drawPolygonExample.drawTheArea(true);
+ const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
+ if (positions.length < 3) return; // 少于3个点无法构成多边形
+ drawPolygonExample.initPolygon(viewer, positions, true);
+};
+// 编辑文件夹
+const handleFolder = val => {
+ layerParams.value.editFolderData = val;
+};
+// 新增开启绘制
+const newFencesMethods = () => {
+ viewer.entities.removeAll();
+ drawPolygonExample.initHandler(viewer);
+ drawPolygonExample.drawTheArea(true);
+ drawPolygonExample.startDrawing();
+};
+// 清除地图数据
+const parentMethod = () => {
+ drawPolygonExample.delPolygon();
+ drawPolygonExample.drawTheArea(false);
+ viewer.entities.removeAll();
+};
+// 点击显示区域
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);
+ let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
+ positions.push(positions[0]);
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 +202,8 @@
outlineColor: Cesium.Color.YELLOW, // 边框色
outlineWidth: 2, // 边框宽度
clampToGround: true, // 贴地显示
-
},
-
+
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
width: 2,
@@ -174,36 +213,55 @@
zIndex: 99, // 层级，确保在其他图层上方显示
});
});
-
- // 添加点击事件（参考 entitiesAddSpot 的 spotHighlighting 逻辑）
- // 移除已有点击事件，避免重复绑定
- // viewInstance.value?.removeLeftClickEvent('fenceHighlighting');
- // 绑定新的点击事件，用于高亮选中的围栏
- // viewInstance.value?.addLeftClickEvent(null, handleFenceClick, 'fenceHighlighting');
+ focusOnAllFeatures();
+ viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
};
-// 围栏点击处理函数（高亮选中项 + 可联动右侧编辑组件）
-const handleFenceClick = (movement) => {
- if (!viewer) return;
+//计算所有图斑的包围球并定位
+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 => {
+ if (!viewer) return;
+ layerParams.value.editDetailData = null;
const pickedObject = viewer.scene.pick(movement.position);
if (Cesium.defined(pickedObject) && pickedObject.id?.customType === 'fence_polygon') {
const selectedEntity = pickedObject.id;
- console.log('选中的围栏数据：', selectedEntity.customInfo);
-
- // 1. 高亮处理（清除其他实体高亮，仅高亮当前选中）
- 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); // 未选中恢复默认
+ const selectedData = selectedEntity.customInfo;
+ // viewer.entities.values.forEach(entity => {
+ // if (entity.customType === 'fence_polygon') {
+ // entity.polygon.material = entity === selectedEntity
+ // ? Cesium.Color.RED.withAlpha(0.5)
+ // : Cesium.Color.YELLOW.withAlpha(0.5);
+ // }
+ // });
+ if (activeName.value !== '国土空间规划') {
+ layerParams.value.editNest = true; // 显示右侧编辑组件
+ layerParams.value.decideWhetherToAddOrEdit = 2; // 标记为编辑模式
+ // 根据围栏类型设置fenceType
+ if (activeName.value === '电子围栏') {
+ layerParams.value.fenceType = 1;
+ } else if (activeName.value === '自定义禁飞区') {
+ layerParams.value.fenceType = 2;
}
- });
-
- // 2. 联动右侧编辑组件（假设 rightEdit 有接收数据的方法）
- // 例如：通过 ref 调用 rightEdit 的 setData 方法
- // rightEditRef.value?.setData(selectedEntity.customInfo);
+ layerParams.value.editDetailData = selectedData;
+ layerParams.value.fenceArea = selectedData.area;
+ layerParams.value.editingIsProhibited = true;
+ }
}
};
let publicCesiumInstance = null;
@@ -213,7 +271,6 @@
// 初始化绘制工具实例
const drawPolygonExample = new DrawPolygon();
-
// 地图初始化
const initMap = () => {
publicCesiumInstance = new PublicCesium({
@@ -226,34 +283,76 @@
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
- drawPolygonExample.initHandler(viewer);
+
+ const nanChangPosition = Cesium.Cartesian3.fromDegrees(
+ 115.892151, // 经度
+ 28.676493, // 纬度
+ 15000 // 相机高度
+ );
+
+ // 执行相机飞行
+ viewer.camera.flyTo({
+ destination: nanChangPosition,
+ duration: 0,
+ orientation: {
+ heading: Cesium.Math.toRadians(0),
+ pitch: Cesium.Math.toRadians(-90),
+ roll: 0,
+ },
+ });
};
-// 处理绘制完成后的多边形坐标（示例）
+// 编辑/绘制
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);
-};
+ isShowWaringTip.value = false;
+ 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]);
+ let polygonString = JSON.stringify(polygon);
+ layerParams.value.polygonPosition = polygon.length > 0 ? polygonString : null;
+ if (polygon.length >= 3) {
+ // 确保多边形闭合：最后一个点与第一个点一致（避免计算偏差）
+ const firstPoint = polygon[0];
+ const lastPoint = polygon[polygon.length - 1];
+ const isClosed =
+ _.round(firstPoint[0], 6) === _.round(lastPoint[0], 6) &&
+ _.round(firstPoint[1], 6) === _.round(lastPoint[1], 6);
+ // 若未闭合，手动添加闭合点
+ const closedPolygon = isClosed ? polygon : [...polygon, firstPoint];
+ // 转换为 turf 支持的 GeoJSON 格式（Polygon 类型需外层嵌套数组）
+ const turfPolygon = turf.polygon([closedPolygon]);
+ // 计算面积（turf.area() 返回平方米，保留2位小数）
+ const area = _.round(turf.area(turfPolygon), 2);
+ // 赋值给 layerParams，
+ layerParams.value.fenceArea = area;
+ } else {
+ // 坐标点不足3个时，清空面积
+ layerParams.value.fenceArea = 0;
+ }
+};
+drawPolygonExample.subscribe('getShowWaringTip', data => {
+ isShowWaringTip.value = data;
+});
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
-console.log('绘制的数据',data);
-
throttleLoadPlanarRoute(data);
});
// 地图销毁
const destroyMap = () => {
drawPolygonExample.destroy();
-
if (viewer) {
viewer.destroy();
viewer = null;
@@ -274,15 +373,61 @@
cesium.removeEventListener('contextmenu', preventDefault);
}
};
+provide('layerParams', layerParams);
+// onMounted(() => {
+// initMap();
+// cesiumContextMenu();
+// getdataFolderApi();
+// });
+
+// onBeforeUnmount(() => {
+// destroyMap();
+// cesiumContextMenu(false);
+// });
onMounted(() => {
initMap();
cesiumContextMenu();
+ getdataFolderApi();
+
+ // 监听单个实体删除事件
+ EventBus.on('deleteMapEntityById', deleteMapEntityById);
+ // 监听文件夹下所有实体删除事件
+ EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});
onBeforeUnmount(() => {
destroyMap();
cesiumContextMenu(false);
+
+ // 移除事件监听
+ EventBus.off('deleteMapEntityById', deleteMapEntityById);
+ EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});
+
+// 删除单个地图实体
+const deleteMapEntityById = entityId => {
+ if (!viewer) return;
+ const entity = viewer.entities.getById(`polygon_${entityId}`);
+ if (entity) {
+ viewer.entities.remove(entity);
+ }
+ // 更新选中数据列表
+ selectDataList.value = selectDataList.value.filter(item => item.id !== entityId);
+};
+
+// 删除文件夹下所有地图实体
+const deleteMapEntitiesByFolderId = folderId => {
+ if (!viewer) return;
+ // 假设围栏数据中包含 folder_id 字段，根据文件夹ID过滤
+ const entitiesToDelete = viewer.entities.values.filter(entity => {
+ return entity.customInfo?.folder_id === folderId;
+ });
+ entitiesToDelete.forEach(entity => {
+ viewer.entities.remove(entity);
+ });
+ // 更新选中数据列表
+ selectDataList.value = selectDataList.value.filter(item => item.folder_id !== folderId);
+};
</script>
<style scoped lang="scss">
@@ -294,9 +439,40 @@
position: relative;
width: 100%;
height: 80vh;
+ .warning {
+ position: absolute;
+ top: 234px;
+ color: #fff;
+ background: rgba(140, 0, 0, 0.4);
+
+ .icon {
+ display: flex;
+ align-items: center;
+ color: #ff1f1f;
+ }
+ }
#layMap {
width: 100%;
height: 100%;
}
+ .tool-tip {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ width: 800px;
+ height: 64px;
+ right: 430px;
+ top: 60px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-size: 18px;
+ color: #ffffff;
+
+ background: rgba(11, 31, 58, 0.7);
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
}
</style>
--
Gitblit v1.9.3