From 9bd82b69690a9c9190f61e9bfce9ce6110ca54b5 Mon Sep 17 00:00:00 2001
From: linwei <872216696@qq.com>
Date: Mon, 10 Nov 2025 16:29:48 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/test' into test
---
src/views/layerManagement/components/rightEdit.vue | 2
src/views/layerManagement/components/utils.js | 35 -----------
src/views/layerManagement/components/folderFile.vue | 2
src/views/layerManagement/components/leftList.vue | 27 +++++----
src/views/layerManagement/index.vue | 99 +++++++++++++++-----------------
5 files changed, 65 insertions(+), 100 deletions(-)
diff --git a/src/views/layerManagement/components/folderFile.vue b/src/views/layerManagement/components/folderFile.vue
index 27250ff..2cc12cf 100644
--- a/src/views/layerManagement/components/folderFile.vue
+++ b/src/views/layerManagement/components/folderFile.vue
@@ -228,7 +228,7 @@
position: absolute;
top: 0;
right: 0;
- height: 95%;
+height: calc(100% - 32px);
z-index: 99;
width: 324px;
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index b387d2b..505c737 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -28,13 +28,13 @@
<el-button class="ztzf-button"> 上传 </el-button>
</el-upload>
- <template v-if="activeName === '自定义禁飞区'">
+ <!-- <template v-if="activeName === '自定义禁飞区'">
<template v-if="failuresInfo.length">
<el-button class="ztzf-button" @click="synchronize"> 继续同步 </el-button>
<el-button class="ztzf-button" @click="failuresDel"> 取消同步 </el-button>
</template>
<el-button v-else class="ztzf-button" @click="synchronize"> 同步 </el-button>
- </template>
+ </template> -->
<el-button class="ztzf-button" @click="selectAll">全选</el-button>
</div>
@@ -170,9 +170,9 @@
} else {
// 全选：仅设置 level 3 节点的 id
treeRef.value.setCheckedKeys(allFenceKeys);
- checkedKeys.value = allFenceKeys; // 同步更新 checkedKeys
- checkedNodes.value = allFenceNodes; // 存储 level 3 数据
- coverData.value = allFenceNodes; // 同步 coverData
+ checkedKeys.value = allFenceKeys;
+ checkedNodes.value = allFenceNodes;
+ coverData.value = allFenceNodes;
}
emit('update:coverData', coverData.value);
}
@@ -356,13 +356,13 @@
position: absolute;
top: 0;
left: 0;
- height: 95%;
+height: calc(100% - 32px);
z-index: 99;
- width: 392px;
+ width: 382px;
overflow: hidden;
background: rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
+ padding: 16px 0 16px 12px;
display: flex;
flex-direction: column;
}
@@ -370,6 +370,7 @@
.searchBox {
display: flex;
margin-top: 10px;
+padding-right: 12px;
.inputName {
width: 184px;
height: 32px;
@@ -414,19 +415,21 @@
margin: 12px 0 14px 0;
display: flex;
gap: 0 10px;
-
+padding-right: 12px;
.el-button {
margin: 0 !important;
}
}
.tableListBox {
+ overflow-y: scroll;
+ height: 0;
+ flex-grow: 1;
+ padding-right: 12px;
:deep(.el-tree-node__content) {
height: 38px !important;
line-height: 38px !important;
}
- overflow-y: scroll;
- height: 0;
- flex-grow: 1;
+
.isTheTerritory {
:deep() {
.el-tree-node__expand-icon {
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
index c92ae4b..a2eca93 100644
--- a/src/views/layerManagement/components/rightEdit.vue
+++ b/src/views/layerManagement/components/rightEdit.vue
@@ -331,7 +331,7 @@
position: absolute;
top: 0;
right: 0;
- height: 95%;
+height: calc(100% - 32px);
z-index: 99;
width: 324px;
diff --git a/src/views/layerManagement/components/utils.js b/src/views/layerManagement/components/utils.js
index 65ee603..7001570 100644
--- a/src/views/layerManagement/components/utils.js
+++ b/src/views/layerManagement/components/utils.js
@@ -180,35 +180,7 @@
}
- // 清除不在范围内的点
- removeLastInvalidPoint() {
- const posLen = this.curPolygon.positions.length
- if (posLen === 0) return
- let targetPointId = ''
- let removeCount = 0
-
- if (posLen === 2) {
- removeCount = 2
- targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}0`
- } else if (posLen > 2) {
- removeCount = 1
- const pointIndex = posLen - 2
- targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`
- }
-
- this.curPolygon.positions.splice(posLen - removeCount, removeCount)
-
- const invalidPoint = this.editPolygonPointDataSource.entities.getById(targetPointId)
- if (invalidPoint) {
- this.editPolygonPointDataSource.entities.remove(invalidPoint)
- }
-
- if (this.curPolygon.positions.length === 0 && this.polygonEntity) {
- this.editPolygonDataSource.entities.remove(this.polygonEntity)
- this.polygonEntity = null
- }
- }
// 添加一个点
addPosition(position, isAdd = true) {
// 第一个点要重复压入一次，形成动态绘制效果
@@ -449,12 +421,7 @@
this.notify('getPolygonPositions', [])
this.startDrawing()
}
- // 删除图斑
- delSpot() {
- this.removeEntities()
- this.isPreviewMode = true
- this.startDrawing()
- }
+
// 删除端点
delPoint() {
if (this.curPolygon.positions.length <= 3) {
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 111b74f..a33a2c3 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -53,18 +53,16 @@
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('电子围栏');
@@ -139,37 +137,26 @@
layerParams.value.folderOption = formattedFolderOption;
});
};
-// 编辑围栏区域
-// const handleEdit = val => {
-// console.log('编辑数据',val.geo_data);
-// 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 handleEdit = val => {
viewer.entities.removeAll();
layerParams.value.editDetailData = val;
drawPolygonExample.editThePatch(true);
drawPolygonExample.drawTheArea(true);
- // 移除最后一个点
let geoDataArr = JSON.parse(val.geo_data);
if (geoDataArr.length > 0) {
geoDataArr.pop();
}
const processedGeoData = JSON.stringify(geoDataArr);
- // 使用处理后的 geo_data 解析坐标
+ //geo_data 解析坐标
const positions = parseGeoDataToPositions(processedGeoData, val.altitude);
if (positions.length < 3) return; // 少于3个点无法构成多边形
drawPolygonExample.initPolygon(viewer, positions, true);
};
// 编辑文件夹
const handleFolder = val => {
+parentMethod()
layerParams.value.editFolderData = val;
};
// 新增开启绘制
@@ -197,21 +184,44 @@
const loadDataToMap = dataList => {
if (!viewer) return;
viewer.entities.removeAll();
- // 存储所有有效坐标，用于后续定位
+ // 存储所有有效坐标
tbJwdList = [];
dataList.forEach(item => {
let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
- // positions.push(positions[0]);
if (positions.length < 3) {
console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
return;
}
+
tbJwdList.push(...positions);
- // 转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式
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',
@@ -220,9 +230,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, // 贴地显示
},
@@ -230,31 +240,27 @@
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
width: 2,
- material: Cesium.Color.YELLOW,
+ material:borderColor,
clampToGround: true,
},
- zIndex: 99, // 层级，确保在其他图层上方显示
+ zIndex: 99,
});
});
focusOnAllFeatures();
viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
};
-//计算所有图斑的包围球并定位
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 positionsData = tbJwdList.map(pos => [
+ pos.lng,
+ pos.lat,
+ pos.height || 0
+ ]);
+ flyVisual({
+ positionsData,
+ viewer,
+ multiple: 13, // 缩放倍数
+ pitch: -90
});
};
// 区域点击显示详细信息
@@ -290,9 +296,6 @@
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
-const homeViewer = shallowRef(null);
-
-// 初始化绘制工具实例
const drawPolygonExample = new DrawPolygon();
// 地图初始化
const initMap = () => {
@@ -303,10 +306,8 @@
layerMode: 4,
contour: false,
});
-
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
-
const nanChangPosition = Cesium.Cartesian3.fromDegrees(
115.892151, // 经度
28.676493, // 纬度
@@ -347,22 +348,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;
}
};
@@ -402,15 +398,12 @@
initMap();
cesiumContextMenu();
getdataFolderApi();
- // 监听单个实体删除事件
EventBus.on('deleteMapEntityById', deleteMapEntityById);
- // 监听文件夹下所有实体删除事件
EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});
onBeforeUnmount(() => {
destroyMap();
cesiumContextMenu(false);
- // 移除事件监听
EventBus.off('deleteMapEntityById', deleteMapEntityById);
EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});
@@ -427,7 +420,6 @@
// 删除文件夹下所有地图实体
const deleteMapEntitiesByFolderId = folderId => {
if (!viewer) return;
- // 假设围栏数据中包含 folder_id 字段，根据文件夹ID过滤
const entitiesToDelete = viewer.entities.values.filter(entity => {
return entity.customInfo?.folder_id === folderId;
});
@@ -463,6 +455,8 @@
#layMap {
width: 100%;
height: 100%;
+ border-radius: 8px 8px 8px 8px;
+ overflow: hidden;
}
.tool-tip {
display: flex;
@@ -483,5 +477,6 @@
-ms-user-select: none;
user-select: none;
}
+
}
</style>
--
Gitblit v1.9.3