From cf55e57ac8e892c321cc9eeb79e14b39e7d80e82 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 28 Nov 2025 16:34:19 +0800
Subject: [PATCH] Merge branch 'feature/v8.0/8.0.3' into prod
---
src/views/layerManagement/index.vue | 111 +++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 78 insertions(+), 33 deletions(-)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index c014986..506055e 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -8,8 +8,18 @@
</el-tabs>
</div>
<!-- 地图 -->
- <div class="mapContainer">
- <div class="tool-tip" v-if="layerParams.addNest">点击地图生成测绘区域</div>
+ <div class="mapContainer" v-loading="isPageLoading"
+ element-loading-background="rgba(0, 0, 0, 0.5)"
+ element-loading-text="加载中...">
+ <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="!isShowWaringTip && layerParams.addNest">
+ {{ showToolTipText }}
+ </div>
<div id="layMap" class="ztzf-cesium"></div>
<leftList
v-if="
@@ -23,15 +33,17 @@
@update:editFolder="handleFolder"
:activeName="activeName"
@newFencesMethods="newFencesMethods"
- :reset-check="resetCheck"
+ :reset-check="resetCheck"
></leftList>
<rightEdit
v-if="layerParams.addNest || layerParams.editNest"
@callParentMethod="parentMethod"
+ @update:loading="handleLoadingChange"
></rightEdit>
<folderFile
@refreshMethod="refreshMethod"
:activeName="activeName"
+ @callParentMethod="parentMethod"
v-if="layerParams.addFolder || layerParams.editFolder"
></folderFile>
</div>
@@ -52,12 +64,14 @@
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import _, { cloneDeep, throttle } from 'lodash';
-const isProd = import.meta.env.VITE_APP_ENV === 'production'
+
import { provide } from 'vue';
import { useStore } from 'vuex';
+const isProd = import.meta.env.VITE_APP_ENV === 'production'
const store = useStore();
const userInfo = computed(() => store.getters.userInfo);
const areaCode = userInfo.value?.detail?.areaCode || '';
+const showToolTipText = ref('点击地图生成测绘区域')
// 红色警告交叉面提示窗
const isShowWaringTip = ref(false);
const activeName = ref('自定义识别区');
@@ -81,6 +95,7 @@
type: '2',
},
];
+
// 如果是生产环境，只返回自定义识别区
if (isProd) {
return allTabs.filter(tab => tab.type === '0');
@@ -107,6 +122,7 @@
isDetailShow: false,
isSingleLocating:false , //是否是单个定位
currentLocationFolderId:null,
+ crossSurface:false,//是否交叉面
});
const resetCheck = ref(false);
const handleClick = tab => {
@@ -121,7 +137,7 @@
layerParams.value.addFolder = false
layerParams.value.editFolder = false
resetCheck.value = !resetCheck.value;
-
+
};
const refreshMethod = () => {
getdataFolderApi();
@@ -150,7 +166,7 @@
viewer.entities.removeAll();
layerParams.value.editDetailData = val;
drawPolygonExample.editThePatch(true);
- drawPolygonExample.drawTheArea(true);
+ drawPolygonExample.drawTheArea(true);
let geoDataArr = JSON.parse(val.geo_data);
if (geoDataArr.length > 0) {
geoDataArr.pop();
@@ -164,6 +180,12 @@
// 编辑文件夹
const handleFolder = val => {
parentMethod()
+ selectDataList.value = val.children;
+ if (selectDataList.value?.length > 0) {
+ loadDataToMap(selectDataList.value);
+ } else {
+ viewer.entities.removeAll();
+ }
layerParams.value.editFolderData = val;
};
// 新增开启绘制
@@ -199,7 +221,7 @@
console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
return;
}
-
+
tbJwdList.push(...positions);
let degreesArray = [];
positions.forEach(pos => {
@@ -214,20 +236,20 @@
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]
+ 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
+
+ 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}`,
@@ -250,17 +272,17 @@
material:borderColor,
clampToGround: true,
},
- zIndex: 99,
+ zIndex: 99,
});
- });
+ });
if (!layerParams.value.isSingleLocating) {
- focusOnAllFeatures();
+ focusOnAllFeatures();
}
viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
};
const focusOnAllFeatures = () => {
if (tbJwdList.length === 0 || !viewer) return;
-
+
// 判断是否有指定定位的文件夹
if (layerParams.value.currentLocationFolderId) {
// 筛选当前文件夹下的所有子节点坐标
@@ -270,7 +292,7 @@
const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
return positions.length >= 3 ? positions : [];
});
-
+
if (targetFolderPositions.length > 0) {
const positionsData = targetFolderPositions.map(pos => [
pos.lng,
@@ -304,16 +326,16 @@
const handleFenceClick = movement => {
if (!viewer) return;
layerParams.value.editDetailData = null;
-
+
if(activeName.value !== '国土空间规划') {
- const pickedObjects = viewer.scene.drillPick(movement.position, 10);
+ 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;
+ break;
}
}
// viewer.entities.values.forEach(entity => {
@@ -338,9 +360,6 @@
layerParams.value.editingIsProhibited = true;
}
}
-}else {
-
-
}
};
@@ -379,13 +398,12 @@
};
// 编辑/绘制
const loadPlanarRoute = async (positions = null, save = false) => {
- 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); //高度
+ let height = Cesium.Math.toDegrees(cartographic.height); //高度
return {
lng: _.round(lng, 6),
lat: _.round(lat, 6),
@@ -394,6 +412,15 @@
});
}
let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
+ if(polygon.length ===0){
+ isShowWaringTip.value = false
+ }
+ if(polygon.length > 0 && !isShowWaringTip.value){
+ showToolTipText.value = '测绘区域已绘制完成'
+ }else {
+ showToolTipText.value = '点击地图生成测绘区域'
+ }
+
if(polygon.length > 0){
polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat])
}
@@ -416,6 +443,7 @@
};
drawPolygonExample.subscribe('getShowWaringTip', data => {
isShowWaringTip.value = data;
+ layerParams.value.crossSurface = data
});
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
@@ -444,6 +472,11 @@
} else {
cesium.removeEventListener('contextmenu', preventDefault);
}
+};
+// 添加loading
+const isPageLoading = ref(false);
+const handleLoadingChange = (status) => {
+ isPageLoading.value = status;
};
provide('layerParams', layerParams);
onMounted(() => {
@@ -517,6 +550,18 @@
position: relative;
width: 100%;
height: 80vh;
+ .warning {
+ position: absolute;
+ top: 234px;
+ color: #fff;
+ background: rgba(140, 0, 0, 0.4) !important;
+
+ .icon {
+ display: flex;
+ align-items: center;
+ color: #ff1f1f;
+ }
+ }
#layMap {
width: 100%;
height: 100%;
--
Gitblit v1.9.3