From 233e4fc4f35bd00a36ee34a7fbf5e47b41db26db Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 17 Nov 2025 09:54:44 +0800
Subject: [PATCH] feat：更新初始化地形
---
src/views/layerManagement/index.vue | 161 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 105 insertions(+), 56 deletions(-)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index acb2227..9ff0fda 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -9,12 +9,6 @@
</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
@@ -53,12 +47,11 @@
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();
@@ -66,7 +59,7 @@
const areaCode = userInfo.value?.detail?.areaCode || '';
// 红色警告交叉面提示窗
const isShowWaringTip = ref(false);
-const activeName = ref('电子围栏');
+const activeName = ref('自定义识别区');
const activeType = ref('0');
let tbJwdList = [];
const selectDataList = ref([]);
@@ -74,7 +67,7 @@
let curPolygonPosition = [];
const tabData = ref([
{
- name: '电子围栏',
+ name: '自定义识别区',
type: '0',
},
{
@@ -104,6 +97,7 @@
editFolderData: null,
editingIsProhibited: false, //禁止编辑
isDetailShow: false,
+ isSingleLocating:false
});
const handleClick = tab => {
@@ -122,7 +116,7 @@
};
const getdataFolderApi = () => {
let id;
- if (activeName.value === '电子围栏') {
+ if (activeName.value === '自定义识别区') {
id = 1;
} else if (activeName.value === '自定义禁飞区') {
id = 2;
@@ -157,6 +151,7 @@
};
// 编辑文件夹
const handleFolder = val => {
+parentMethod()
layerParams.value.editFolderData = val;
};
// 新增开启绘制
@@ -174,10 +169,9 @@
};
// 点击显示区域
const handleCoverDataUpdate = data => {
-console.log('data',data);
-
selectDataList.value = data;
if (selectDataList.value.length > 0) {
+
loadDataToMap(selectDataList.value);
} else {
viewer.entities.removeAll();
@@ -186,7 +180,7 @@
const loadDataToMap = dataList => {
if (!viewer) return;
viewer.entities.removeAll();
- // 存储所有有效坐标，用于后续定位
+ // 存储所有有效坐标
tbJwdList = [];
dataList.forEach(item => {
let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
@@ -194,11 +188,36 @@
console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
return;
}
+
tbJwdList.push(...positions);
let degreesArray = [];
positions.forEach(pos => {
degreesArray.push(pos.lng, pos.lat, pos.height);
});
+ const colorMap = {
+ 1: Cesium.Color.fromCssColorString('#00ff06').withAlpha(0.5), // 绿色（填充色）
+ 2: Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5), // 红色（填充色）
+ 3: Cesium.Color.fromCssColorString('#00ffea').withAlpha(0.5), // 青色（填充色）
+ // 边框色：去掉透明度，保持纯色
+ border1: Cesium.Color.fromCssColorString('#00ff06'),
+ border2: Cesium.Color.fromCssColorString('#ff0000'),
+ border3: Cesium.Color.fromCssColorString('#00ffea'),
+ };
+ const fillColor = item.category_id === 1
+ ? colorMap[1]
+ : item.category_id === 2
+ ? colorMap[2]
+ : item.category_id === 3
+ ? colorMap[3]
+ : Cesium.Color.YELLOW.withAlpha(0.5);
+
+ const borderColor = item.category_id === 1
+ ? colorMap.border1
+ : item.category_id === 2
+ ? colorMap.border2
+ : item.category_id === 3
+ ? colorMap.border3
+ : Cesium.Color.YELLOW;
viewer.entities.add({
id: `polygon_${item.id}`,
customType: 'fence_polygon',
@@ -207,9 +226,9 @@
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
),
- material: Cesium.Color.YELLOW.withAlpha(0.5), // 填充色
+ material:fillColor, // 填充色
outline: true, // 显示边框
- outlineColor: Cesium.Color.YELLOW, // 边框色
+ outlineColor: borderColor, // 边框色
outlineWidth: 2, // 边框宽度
clampToGround: true, // 贴地显示
},
@@ -217,13 +236,17 @@
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
width: 2,
- material: Cesium.Color.YELLOW,
+ material:borderColor,
clampToGround: true,
},
- zIndex: 99, // 层级，确保在其他图层上方显示
+ zIndex: 99,
});
});
- focusOnAllFeatures();
+
+
+ if (!layerParams.value.isSingleLocating) {
+ focusOnAllFeatures();
+ }
viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
};
const focusOnAllFeatures = () => {
@@ -236,7 +259,7 @@
flyVisual({
positionsData,
viewer,
- multiple: 13, // 缩放倍数
+ multiple:activeName.value == '国土空间规划' ? 13 :4, // 缩放倍数
pitch: -90
});
};
@@ -244,22 +267,31 @@
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;
- const selectedData = selectedEntity.customInfo;
- // viewer.entities.values.forEach(entity => {
+
+if(activeName.value !== '国土空间规划') {
+ const pickedObjects = viewer.scene.drillPick(movement.position, 10);
+ // 遍历所有被点击的实体，找到围栏类型（customType: 'fence_polygon'）
+ let selectedEntity = null;
+ for (let i = 0; i < pickedObjects.length; i++) {
+ const pick = pickedObjects[i];
+ if (Cesium.defined(pick.id) && pick.id?.customType === 'fence_polygon') {
+ selectedEntity = pick.id;
+ break;
+ }
+ }
+ // 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 (selectedEntity) {
+ const selectedData = selectedEntity.customInfo;
if (activeName.value !== '国土空间规划') {
- layerParams.value.editNest = true; // 显示右侧编辑组件
- layerParams.value.decideWhetherToAddOrEdit = 2; // 标记为编辑模式
- // 根据围栏类型设置fenceType
- if (activeName.value === '电子围栏') {
+ layerParams.value.editNest = true;
+ layerParams.value.decideWhetherToAddOrEdit = 2;
+ if (activeName.value === '自定义识别区') {
layerParams.value.fenceType = 1;
} else if (activeName.value === '自定义禁飞区') {
layerParams.value.fenceType = 2;
@@ -269,11 +301,15 @@
layerParams.value.editingIsProhibited = true;
}
}
+}else {
+
+
+}
+
};
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
-const homeViewer = shallowRef(null);
const drawPolygonExample = new DrawPolygon();
// 地图初始化
const initMap = () => {
@@ -281,13 +317,12 @@
dom: 'layMap',
flatMode: false,
terrain: true,
- layerMode: 4,
- contour: false,
+ layerMode: 4, //轮廓线
+ dockOptions:{showDock:true}//机巢
});
-
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
-
+ viewInstance.value?.flyToContour();
const nanChangPosition = Cesium.Cartesian3.fromDegrees(
115.892151, // 经度
28.676493, // 纬度
@@ -328,22 +363,17 @@
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;
}
};
@@ -379,19 +409,48 @@
}
};
provide('layerParams', layerParams);
+// onMounted(() => {
+// initMap();
+// cesiumContextMenu();
+// getdataFolderApi();
+// EventBus.on('deleteMapEntityById', deleteMapEntityById);
+// EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
+
+// });
onMounted(() => {
initMap();
cesiumContextMenu();
getdataFolderApi();
- // 监听单个实体删除事件
+ // 监听定位事件
+ EventBus.on('focusOnNode', (nodeData) => {
+ focusOnNode(nodeData);
+ });
EventBus.on('deleteMapEntityById', deleteMapEntityById);
- // 监听文件夹下所有实体删除事件
EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});
+
+//定位到指定节点
+const focusOnNode = (nodeData) => {
+
+ if (!viewer || !nodeData?.geo_data) return;
+
+ // 解析节点坐标
+ const positions = parseGeoDataToPositions(nodeData.geo_data, nodeData.altitude);
+if (positions.length < 3) {
+
+ return;
+ }
+ flyVisual({
+ positionsData: positions.map(pos => [pos.lng, pos.lat, pos.height || 0]),
+ viewer,
+ multiple:activeName.value == '国土空间规划' ? 13 :7, // 缩放倍数
+ pitch: -90
+ });
+
+};
onBeforeUnmount(() => {
destroyMap();
cesiumContextMenu(false);
- // 移除事件监听
EventBus.off('deleteMapEntityById', deleteMapEntityById);
EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});
@@ -408,7 +467,6 @@
// 删除文件夹下所有地图实体
const deleteMapEntitiesByFolderId = folderId => {
if (!viewer) return;
- // 假设围栏数据中包含 folder_id 字段，根据文件夹ID过滤
const entitiesToDelete = viewer.entities.values.filter(entity => {
return entity.customInfo?.folder_id === folderId;
});
@@ -429,21 +487,11 @@
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%;
+ border-radius: 8px 8px 8px 8px;
+ overflow: hidden;
}
.tool-tip {
display: flex;
@@ -464,5 +512,6 @@
-ms-user-select: none;
user-select: none;
}
+
}
</style>
--
Gitblit v1.9.3