From f2f661253c3b04fc3361238b3006069b64d8be0b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 20 Sep 2025 10:59:34 +0800
Subject: [PATCH] feat:编辑不刷新
---
src/views/resource/components/spotDetails.vue | 145 +++++++++++++++++++++---------------------------
src/views/resource/components/DrawPolygon.vue | 5 +
2 files changed, 66 insertions(+), 84 deletions(-)
diff --git a/src/views/resource/components/DrawPolygon.vue b/src/views/resource/components/DrawPolygon.vue
index 81728eb..59428dd 100644
--- a/src/views/resource/components/DrawPolygon.vue
+++ b/src/views/resource/components/DrawPolygon.vue
@@ -214,7 +214,7 @@
viewInstance.value.removeMouseHandler('drawCustomPolygon');
}
-const emit = defineEmits(['upDateDrawState']);
+const emit = defineEmits(['upDateDrawState',]);
function updatePolygon() {
let polygon = savePolygonPosition.reduce((pre, cur) => {
@@ -222,7 +222,7 @@
return pre;
}, []);
polygon.push(polygon[0]);
- console.log('绘制', `POLYGON((${polygon.join(',')}))`);
+
// 接口
sdfwUpdate({
ids: selectionIds.value,
@@ -244,6 +244,7 @@
})
}
+
function cancel() {
remove();
removeMenuPanel();
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index 57ae968..d0f2656 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -65,7 +65,7 @@
:row-class-name="tableRowClassName"
:data="tableData"
@row-click="handleLocationPolygon"
- @current-change="handleTableRowChange"
+
>
<el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
<template #default="{ $index }">
@@ -102,6 +102,7 @@
ref="drawPolygonRef"
v-if="isEditing"
@upDateDrawState="handleUpDateDrawState"
+
/>
<!-- 完成/取消 -->
<div class="btnGroups" v-if="props.title === '图斑编辑'">
@@ -239,6 +240,7 @@
page: 1,
pageSize: 10,
});
+const isInit = ref(true);
// 图斑管理表格
const getTableList = () => {
const requestParams = {
@@ -262,6 +264,7 @@
};
+
// 地图
const initMap = () => {
if (!document.getElementById('spotMap')) {
@@ -280,35 +283,52 @@
viewer.scene.globe.depthTestAgainstTerrain = true;
viewInstance.value.switchContour(true);
};
+// 仅弹框初始化时执行的定位逻辑
+const initMapLocation = () => {
+ if (tbJwdList.length === 0 || !homeViewer.value) return;
+
+ // 计算所有图斑的包围球（用于初始化定位）
+ const allPositions = tbJwdList.flatMap(item =>
+ Cesium.Cartesian3.fromDegreesArray(item.grouped)
+ );
+ const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
+
+ // 初始化定位（仅执行一次）
+ homeViewer.value.camera.flyToBoundingSphere(boundingSphere, {
+ duration: 0,
+ offset: new Cesium.HeadingPitchRange(
+ Cesium.Math.toRadians(0),
+ Cesium.Math.toRadians(-90)
+ ),
+ });
+};
// 初始化所有图斑
const entitiesAddSpot = () => {
viewer?.entities.removeAll();
+ tbJwdList = []; // 重置经纬度列表
+
tableData.value.forEach(item => {
- // 取出当中经纬度
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
if (!numbersWithCommas) return;
- // 绘制图斑
- const grouped = numbersWithCommas.map(item => Number(item));
- // 为框选存储对比值
- tbJwdList.push({
- ...item,
- grouped: grouped,
- });
- viewInstance.value.removeById('polygon_dk' + item.id);
- // 根据 is_exception 设置颜色
- const color =
- item.is_exception == 2 ? Cesium.Color.RED.withAlpha(0.5) : Cesium.Color.YELLOW.withAlpha(0.5);
- const outlineColor = item.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
+
+ const grouped = numbersWithCommas.map(Number);
+ tbJwdList.push({ ...item, grouped }); // 存储经纬度用于后续操作
+
+ // 绘制图斑（保留原有逻辑，仅移除定位相关代码）
+ const fillColor = item.is_exception === 2
+ ? Cesium.Color.RED.withAlpha(0.5)
+ : Cesium.Color.YELLOW.withAlpha(0.5);
+ const outlineColor = item.is_exception === 2
+ ? Cesium.Color.RED
+ : Cesium.Color.YELLOW;
homeViewer.value?.entities?.add({
- id: 'polygon_dk' + item.id,
+ id: `polygon_dk${item.id}`,
customType: 'pattern_spot_polygon',
- customInfo: {
- ...item,
- },
+ customInfo: item,
polygon: {
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
- material: color,
+ material: fillColor,
outline: true,
outlineColor: outlineColor,
outlineWidth: 2,
@@ -318,23 +338,22 @@
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(grouped),
width: 2,
- material: color,
+ material: outlineColor,
clampToGround: true,
},
zIndex: 99,
});
-
- if (tbJwdList.length > 0) {
- const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
- const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
- homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
- duration: 0,
- offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90)),
- });
- }
- viewInstance.value?.removeLeftClickEvent('spotHighlighting');
- viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
});
+
+ // 仅在初始化阶段执行定位（关键：通过isInit控制）
+ if (isInit.value) {
+ initMapLocation();
+ isInit.value = false; // 初始化完成，后续不再执行定位
+ }
+
+ // 保留图斑点击高亮事件（原有逻辑不变）
+ viewInstance.value?.removeLeftClickEvent('spotHighlighting');
+ viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
};
// 高亮当前选中图斑，并定位
@@ -397,51 +416,6 @@
updateMapSpotInfo(nowEntity);
}
-
-// 更新上一个和这一个信息
-// function updateMapSpotInfo(nowEntity) {
-// const nowData = nowEntity.customInfo;
-// if (!nowEntity) return;
-// if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return;
-// // 设置新的
-// nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0);
-// nowEntity.polyline.material = Cesium.Color.RED;
-// // 重置上一个
-// if (lastEntity) {
-// const lastData = lastEntity.customInfo;
-// const originalFillColor =
-// lastData.is_exception === 2
-// ? Cesium.Color.RED.withAlpha(0.5)
-// : Cesium.Color.YELLOW.withAlpha(0.5);
-// const originalOutlineColor =
-// lastData.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
-
-// lastEntity.polygon.material = originalFillColor;
-// lastEntity.polygon.outlineColor = originalOutlineColor;
-// lastEntity.polyline.material = originalOutlineColor;
-// }
-// lastEntity = nowEntity;
-// const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
-// if (numbersWithCommas) {
-// // 解析经纬度数组
-// const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
-// if (index % 2 === 0) acc.push(src.slice(index, index + 2));
-// return acc;
-// }, []);
-
-// const polygonCenter = getCenterPoint(groupedArr);
-// // 相机定位
-// homeViewer.value.scene.camera.setView({
-// destination: Cesium.Cartesian3.fromDegrees(
-// Number(polygonCenter.lng),
-// Number(polygonCenter.lat),
-// 1500
-// ),
-
-// });
-// }
-
-// }
function updateMapSpotInfo(nowEntity) {
const nowData = nowEntity.customInfo;
if (!nowEntity) return;
@@ -474,7 +448,7 @@
positionsData: positionsData,
viewer: homeViewer.value,
multiple: 15,
- // pitch: -90
+
});
}
}
@@ -494,12 +468,13 @@
if (isEditing.value) {
//当前已编辑 → 取消编辑（关闭绘制、重置状态）
isEditing.value = false;
- handleUpDateDrawState(false); // 通知DrawPolygon取消绘制
+ handleUpDateDrawState(false); //取消绘制
} else {
// 当前未编辑 → 开启编辑（仅异常图斑可编辑）
if (row.is_exception === 2 && curRowIsSelect) {
isEditing.value = true;
- handleUpDateDrawState(true); // 通知DrawPolygon开启绘制
+ handleUpDateDrawState(true); //开启绘制
+
} else {
ElMessage.warning('仅异常图斑支持编辑绘制');
isEditing.value = false;
@@ -548,6 +523,7 @@
});
});
};
+
// 保存
const handleSave = () => {
const fileNameItem = infoList.value.find(item => item.name === '文件名称');
@@ -612,18 +588,23 @@
publicCesiumInstance = null;
};
+
watch(uploadPatchDialog, newVal => {
if (newVal) {
- setTimeout(() => {
- initMap();
- getTableList();
+ isInit.value = true;
+ setTimeout(() => {
+ initMap();
+ getTableList();
getspotManagementTableApi();
}, 0);
} else {
+
isEditing.value = false;
handleUpDateDrawState(false);
destroyMap();
+ isInit.value = false;
+ clearSelect();
}
refreshonload();
});
--
Gitblit v1.9.3