From e92dd671ed1f79243bee0083aecbc5627b5cc7f6 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 10 七月 2025 16:17:52 +0800
Subject: [PATCH] 断面echart清除
---
src/components/menu/CrossSectionalAnalysis.vue | 251 ++++++++++++++++++++++++++++++++++++-------------
1 files changed, 182 insertions(+), 69 deletions(-)
diff --git a/src/components/menu/CrossSectionalAnalysis.vue b/src/components/menu/CrossSectionalAnalysis.vue
index 1a27497..3923cee 100644
--- a/src/components/menu/CrossSectionalAnalysis.vue
+++ b/src/components/menu/CrossSectionalAnalysis.vue
@@ -1,24 +1,89 @@
<template>
<div style="display: flex; justify-content: space-between;">
- <div @click="initPickHandler">
- <img v-if="!isPicking" src="@/assets/img/timeline/鏂潰.png" style="width: 26px;height: 26px;" />
- <img v-else src="@/assets/img/timeline/宸叉柇闈�.png" style="width: 26px;height: 26px;" />
- </div>
- <div @click="confirmPoints">
- <img v-if="!isUploaded" src="@/assets/img/timeline/涓婁紶.png" style="width: 26px;height: 26px;" />
- <img v-else src="@/assets/img/timeline/宸蹭笂浼�.png" style="width: 26px;height: 26px;" />
- </div>
- <div @click="clearPoints">
- <img src="@/assets/img/timeline/娓呴櫎.png" style="width: 26px;height: 26px;" />
- </div>
+ <!-- 绗竴涓寜閽細閫夊彇鏂潰鐐� -->
+ <el-tooltip placement="top" show-after="1000">
+ <template #content>
+ 鏂潰鍒嗘瀽鍔熻兘璇存槑锛�
+ <br /><br />
+ 馃敼 鐐瑰嚮鎸夐挳鍒囨崲鐘舵�侊細
+ <br />
+ - 鐧借壊锛氬叧闂嬀鍙栧姛鑳斤紙涓嶅彲閫夌偣锛�
+ <br />
+ - 榛勮壊锛氬紑鍚嬀鍙栧姛鑳斤紙鍙偣鍑诲湴鍥鹃�夋嫨2涓柇闈㈢偣锛�
+ <br /><br />
+ 馃敼 浣跨敤娴佺▼锛�
+ <br />
+ 1. 鐐瑰嚮鎸夐挳鍒囨崲涓洪粍鑹� 鉃� 寮�濮嬫嬀鍙栧潗鏍囩偣
+ <br />
+ 2. 鍦ㄥ湴鍥句笂鐐瑰嚮閫夋嫨 2 涓柇闈㈢偣锛堝闇�淇敼锛屽彲閲嶆柊鐐瑰嚮锛�
+ <br /><br />
+ 鈿狅笍 娓╅Θ鎻愮ず锛�
+ <br />
+ 姣忔鍙兘鍒嗘瀽涓�鏉℃矡娓犵殑鏂潰锛屽涓柇闈㈠彲鑳藉鑷磋绠楀紓甯革紱
+ <br />
+ 浣跨敤瀹屾瘯璇峰皢鎸夐挳鍒囧洖鐧借壊锛岄伩鍏嶅奖鍝嶅叾浠栧姛鑳姐��
+ </template>
+ <div @click="initPickHandler" :class="{ active: isPicking }">
+ <img v-if="!isPicking" src="@/assets/img/timeline/鏂潰.png" style="width: 26px;height: 26px;" />
+ <img v-else src="@/assets/img/timeline/宸叉柇闈�.png" style="width: 26px;height: 26px;" />
+ </div>
+ </el-tooltip>
+
+ <!-- 绗簩涓寜閽細涓婁紶骞跺垎鏋愭柇闈� -->
+ <el-tooltip placement="top" show-after="1000">
+ <template #content>
+ 涓婁紶骞跺垎鏋愭柇闈㈡暟鎹細
+ <br /><br />
+ 馃搶 鏉′欢闄愬埗锛�
+ <br />
+ 浠呭綋鎴愬姛閫夋嫨 2 涓柇闈㈢偣鍚庢墠鍙偣鍑�
+ <br /><br />
+ 馃攣 鍔熻兘璇存槑锛�
+ <br />
+ 鐐瑰嚮鍚庡皢瀵瑰綋鍓嶆柇闈㈣繘琛屽垎鏋愶紝绋嶇瓑鐗囧埢鍗冲彲鍦ㄥ浘琛ㄥ尯鍩熸煡鐪嬬粨鏋�
+ <br /><br />
+ 鈿狅笍 娉ㄦ剰浜嬮」锛�
+ <br />
+ 璇ュ姛鑳戒粎鏀寔鍗曟潯娌熸笭鍒嗘瀽锛屽涓柇闈㈠彲鑳藉鑷磋绠椾笉绋冲畾鎴栧嚭閿�
+ </template>
+ <div @click="confirmPoints" :class="{ disabled: !isReadyForUpload }">
+ <img v-if="!isUploaded" src="@/assets/img/timeline/涓婁紶.png" style="width: 26px;height: 26px;" />
+ <img v-else src="@/assets/img/timeline/宸蹭笂浼�.png" style="width: 26px;height: 26px;" />
+ </div>
+ </el-tooltip>
+
+ <!-- 绗笁涓寜閽細娓呴櫎鎵�鏈夌偣鍜屽垎鏋愮粨鏋� -->
+ <el-tooltip placement="top" show-after="1000">
+ <template #content>
+ 娓呴櫎鎵�鏈夋柇闈㈢偣鍙婂垎鏋愮粨鏋滐細
+ <br /><br />
+ 馃攣 鍔熻兘璇存槑锛�
+ <br />
+ 鐐瑰嚮鍚庡皢绉婚櫎鍦板浘涓婄殑鎵�鏈夋柇闈㈢偣浠ュ強鐩稿叧鍒嗘瀽鍥捐〃
+ <br /><br />
+ 鈿狅笍 娓╅Θ鎻愮ず锛�
+ <br />
+ 姝ゆ搷浣滀細娓呯┖褰撳墠鍒嗘瀽杩涘害锛岃纭鍚庡啀鎵ц
+ </template>
+ <div @click="clearPoints">
+ <img src="@/assets/img/timeline/娓呴櫎.png" style="width: 26px;height: 26px;" />
+ </div>
+ </el-tooltip>
</div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ref, onMounted, defineExpose } from "vue";
+import { getCrossSection } from '@/api/trApi.js'; // 鍋囪浣犳湁鐪熷疄鎺ュ彛
+import { useSimStore } from '@/store/simulation';
+import { storeToRefs } from 'pinia';
+import { EventBus } from "@/eventBus";
+const simStore = useSimStore();
+const { selectedScheme } = storeToRefs(simStore);
const viewer = window.viewer;
+let selectedSchemeId = selectedScheme.value.id
let pickedPointsCross = ref([]);
let pickHandlerCross = null;
@@ -52,7 +117,13 @@
// 閫夊彇涓や釜鏂潰鐐瑰潗鏍囧苟缁樺埗鏂潰鎴潰
function addPointToViewer(point) {
if (pickedPointsCross.value.length >= 2) {
- clearPoints();
+ for (const id of pickedEntitiesIds.value) {
+ viewer.entities.remove(viewer.entities.getById(id));
+ }
+ pickedPointsCross.value = [];
+ pickedEntitiesIds.value = [];
+ isWallCreated.value = false;
+ isUploaded.value = false;
}
pickedPointsCross.value.push(point);
drawPointOnMap(point);
@@ -72,7 +143,9 @@
color: Cesium.Color.RED,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 2,
- pixelSize: 8 // 鍦嗙偣鍗婂緞澶у皬
+ pixelSize: 8,// 鍦嗙偣鍗婂緞澶у皬
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+
}
});
pickedEntitiesIds.value.push(entity.id); // 璁板綍瀹炰綋ID
@@ -85,6 +158,8 @@
positions: [startPoint.cartesian, endPoint.cartesian],
material: Cesium.Color.YELLOW,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+
}
});
pickedEntitiesIds.value.push(entity.id); // 璁板綍瀹炰綋ID
@@ -94,58 +169,59 @@
// 鏂板锛氱粯鍒舵ā鎷熺偣锛堝渾鏌� + label锛�
function drawSimulationPoint(start, end) {
-// 璁＄畻涓偣锛堢粡绾害骞冲潎鍊硷級
-const midLon = (start.longitude + end.longitude) / 2;
-const midLat = (start.latitude + end.latitude) / 2;
-const terrainHeight = viewer.scene.globe.getHeight(
- Cesium.Cartographic.fromDegrees(midLon, midLat)
-);
-const cylinderBottomHeight = 0;
-const cylinderTopHeight = terrainHeight + 190;
-const cartesianBottom = viewer.scene.globe.ellipsoid.cartographicToCartesian(
- Cesium.Cartographic.fromDegrees(midLon, midLat, cylinderBottomHeight)
-);
-const CrosscylinderEntity = viewer.entities.add({
- position: cartesianBottom,
- cylinder: {
- length: 190.0,
- topRadius: 1.0,
- bottomRadius: 1.0,
- material: Cesium.Color.YELLOW,
- outline: true,
- outlineColor: Cesium.Color.YELLOW,
- slices: 64,
- heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
- distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000)
- }
-});
-const labelHeight = cylinderTopHeight + 10;
-const cartesianLabel = viewer.scene.globe.ellipsoid.cartographicToCartesian(
- Cesium.Cartographic.fromDegrees(midLon, midLat, labelHeight)
-);
+ // 璁＄畻涓偣锛堢粡绾害骞冲潎鍊硷級
+ const midLon = (start.longitude + end.longitude) / 2;
+ const midLat = (start.latitude + end.latitude) / 2;
+ const terrainHeight = viewer.scene.globe.getHeight(
+ Cesium.Cartographic.fromDegrees(midLon, midLat)
+ );
-const CrosslabelEntity = viewer.entities.add({
- position: cartesianLabel,
- label: {
- text: '鏂潰鎴潰妯℃嫙鐐�',
- font: 'bold 14pt monospace',
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
- fillColor: Cesium.Color.YELLOW,
- outlineColor: Cesium.Color.BLACK,
- outlineWidth: 2,
- verticalOrigin: Cesium.VerticalOrigin.CENTER,
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
- backgroundColor: Cesium.Color.fromCssColorString('rgba(0,0,0,0.7)'),
- backgroundPadding: new Cesium.Cartesian2(10, 10),
- showBackground: true,
- scale: 1,
- distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
- pixelOffsetScaleByDistance: new Cesium.NearFarScalar(100, 1.0, 5000, 0.3),
- heightReference: Cesium.HeightReference.NONE // 浣跨敤缁濆楂樺害
- }
-});
-pickedEntitiesIds.value.push(CrosscylinderEntity.id);
-pickedEntitiesIds.value.push(CrosslabelEntity.id);
+ const cylinderBottomHeight = 0;
+ const cylinderTopHeight = terrainHeight + 100;
+ const cartesianBottom = viewer.scene.globe.ellipsoid.cartographicToCartesian(
+ Cesium.Cartographic.fromDegrees(midLon, midLat, cylinderBottomHeight)
+ );
+ const CrosscylinderEntity = viewer.entities.add({
+ position: cartesianBottom,
+ cylinder: {
+ length: 100.0,
+ topRadius: 1.0,
+ bottomRadius: 1.0,
+ material: Cesium.Color.YELLOW,
+ outline: true,
+ outlineColor: Cesium.Color.YELLOW,
+ slices: 64,
+ heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000)
+ }
+ });
+ const labelHeight = cylinderTopHeight + 10;
+ const cartesianLabel = viewer.scene.globe.ellipsoid.cartographicToCartesian(
+ Cesium.Cartographic.fromDegrees(midLon, midLat, labelHeight)
+ );
+
+ const CrosslabelEntity = viewer.entities.add({
+ position: cartesianLabel,
+ label: {
+ text: '鏂潰鎴潰妯℃嫙鐐�',
+ font: 'bold 14pt monospace',
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ fillColor: Cesium.Color.YELLOW,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ verticalOrigin: Cesium.VerticalOrigin.CENTER,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ backgroundColor: Cesium.Color.fromCssColorString('rgba(0,0,0,0.7)'),
+ backgroundPadding: new Cesium.Cartesian2(10, 10),
+ showBackground: true,
+ scale: 1,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+ pixelOffsetScaleByDistance: new Cesium.NearFarScalar(100, 1.0, 5000, 0.3),
+ heightReference: Cesium.HeightReference.NONE // 浣跨敤缁濆楂樺害
+ }
+ });
+ pickedEntitiesIds.value.push(CrosscylinderEntity.id);
+ pickedEntitiesIds.value.push(CrosslabelEntity.id);
}
function clearPoints() {
for (const id of pickedEntitiesIds.value) {
@@ -155,6 +231,15 @@
pickedEntitiesIds.value = [];
isWallCreated.value = false;
isUploaded.value = false;
+ if (pickHandlerCross) {
+ pickHandlerCross.destroy();
+ pickHandlerCross = null;
+ }
+ isPicking.value = false;
+ simStore.crossSection = []
+ EventBus.emit("clear-dM")
+ console.log('杩欓噷鍙戦�佽姹傦紝娓呯┖閮鐨別charts2');
+
}
function initPickHandler() {
if (isPicking.value) {
@@ -163,7 +248,8 @@
pickHandlerCross = null;
}
isPicking.value = false;
- isUploaded.value = false;
+ // isUploaded.value = false;
+
ElMessage.info('宸插叧闂�--鏂潰鎴潰--鎷惧彇鐐瑰潗鏍囧姛鑳斤紒');
return;
}
@@ -185,7 +271,9 @@
pickHandlerCross.setInputAction(clickAction, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
-function confirmPoints() {
+async function confirmPoints() {
+ console.log(selectedSchemeId,'杩欓噷鎷跨殑鏄柟妗堢殑鏁版嵁');
+
if (pickedPointsCross.value.length < 2) {
ElMessage.warning('璇峰厛閫夋嫨涓や釜鐐瑰悗鍐嶈繘琛岀‘璁わ紒');
return;
@@ -193,6 +281,7 @@
const point1 = pickedPointsCross.value[0];
const point2 = pickedPointsCross.value[1];
+console.log(point1,point2);
console.log('绗竴涓偣淇℃伅锛�', {
longitude: point1.longitude,
@@ -205,11 +294,35 @@
latitude: point2.latitude,
cartesian: point2.cartesian
});
-
- isUploaded.value = true;
+ const startPoint = `${point1.longitude},${point1.latitude}`;
+ const endPoint = `${point2.longitude},${point2.latitude}`;
+ const result = await getCrossSectionInfo(startPoint, endPoint);
+ simStore.crossSection = result
+ console.log(result,'杩欓噷鏄儹妤犻渶瑕佺殑鏂潰鏁版嵁');
+
+ isUploaded.value = true;
ElMessage.success('姝ｅ湪杩涜--鏂潰鎴潰--鏁版嵁鍒嗘瀽涓婁紶锛岃绋嶇瓑...');
+
}
-
+ // 鑾峰彇鐪熷疄鏁版嵁
+function getCrossSectionInfo(a, b) {
+ const params = {
+ startPoint: a,
+ endPoint: b,
+ id: selectedSchemeId
+ };
+ return getCrossSection(params).then(data => {
+ if (data && data.code === 200) {
+ return data.data; // 杩斿洖鍘熷鏁版嵁鏁扮粍
+ } else {
+ return [];
+ }
+ }).catch(error => {
+ console.error('鑾峰彇鏁版嵁鏃跺彂鐢熼敊璇�:', error);
+ ElMessage.warning('鏁版嵁鏈夎锛岃鑱旂郴绠＄悊鍛樻垨閲嶆柊杩涜妯℃嫙锛�');
+ return [];
+ });
+}
defineExpose({
clearPoints
});
--
Gitblit v1.9.3