From 9edf886a263e2d336211c88879226cf6c19de2e7 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期五, 18 四月 2025 14:26:55 +0800
Subject: [PATCH] change
---
src/components/tools/Tools.vue | 150 +++++++++++++++++++++++++++++++++----------------
1 files changed, 100 insertions(+), 50 deletions(-)
diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue
index 53139b3..146a429 100644
--- a/src/components/tools/Tools.vue
+++ b/src/components/tools/Tools.vue
@@ -42,15 +42,18 @@
<div v-show="echartsShow" id="sectionCharts" class="sectionChars">
<div id="echartsView1" style="width: 100%; height: 100%"></div>
</div>
- <!-- 鍧″悜鍒嗘瀽 -->
+ <!-- 鍧″害鍧″悜鍒嗘瀽 -->
<Aspect
v-show="showAspect"
@draw="SlopeArrow"
@clear="SlopeArrowClose"
+ @handleaspect="handleaspect"
+ @handleSlope="handleSlope"
class="popup-menu-see"
/>
<SlopeAnalysis
- v-show="showSlope"
+ @draw="SlopeAnalysiss"
+ v-show="isContourLabel"
class="popup-menu-see"
@update-slope="onUpdateSlope"
/>
@@ -59,6 +62,11 @@
v-show="showRain"
class="popup-menu-see"
@update-rain="onUpdateRain"
+ />
+ <Snow
+ v-show="showSnow"
+ class="popup-menu-see"
+ @update-snow="onUpdateSnow"
/>
</div>
@@ -92,6 +100,7 @@
import SlopeAnalysis from "@/components/tools/SlopeAnalysis.vue";
import mapUtils from "@/utils/tools.js";
import Rain from "@/components/tools/Rain.vue";
+import Snow from "@/components/tools/Snow.vue";
// 鍒囨崲灞曞紑/鏀剁缉鐘舵��
function toggleCollapse() {
@@ -108,7 +117,7 @@
const isFlood = ref(false);
const isContourLabel = ref(false);
const showRain = ref(false);
-const isSnow = ref(false);
+const showSnow = ref(false);
// 鍓栭潰鍒嗘瀽寮圭獥
const topographyShow = ref(false);
@@ -120,9 +129,6 @@
// 鍧″悜绠ご寮圭獥
const showAspect = ref(false);
-
-// 鍧″害鍒嗘瀽寮圭獥
-const showSlope = ref(false);
// 宸ュ叿鍒楄〃
const toolList = ref([
@@ -155,8 +161,7 @@
active: false,
options: [
{ name: "鐐逛綅淇℃伅鎻愬彇", icon: "鐐逛綅淇℃伅鎻愬彇" },
- { name: "鍧″害鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
- { name: "鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
+ { name: "鍧″害鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
{ name: "鍓栭潰鎻愬彇", icon: "鍓栭潰鎻愬彇" },
{ name: "鎸栧～鏂硅绠�", icon: "鎸栧～鏂硅绠�" },
{ name: "绛夐珮绾垮垎鏋�", icon: "绛夐珮绾垮垎鏋�" },
@@ -187,56 +192,81 @@
options: [
{ name: "闆ㄥぉ妯″紡", icon: "闆ㄥぉ妯″紡" },
{ name: "闆ぉ妯″紡", icon: "闆ぉ妯″紡" },
+ { name: "娓呴櫎澶╂皵", icon: "娓呴櫎鍒嗘瀽" },
],
},
]);
// 澶勭悊宸ュ叿鐐瑰嚮浜嬩欢
function handleClick(tool, event) {
- console.log(tool.options);
- // 濡傛灉宸ュ叿鍚嶇О鏄� "鍥惧眰绠＄悊"
+ // 閬嶅巻宸ュ叿鍒楄〃锛屾洿鏂版縺娲荤姸鎬�
+ toolList.value.forEach((item) => {
+ item.active = item.name === tool.name && currentToolOptions.value !== tool.options;
+ });
+
+ // 瀹氫箟涓�涓嚱鏁扮敤浜庨噸缃墍鏈夌姸鎬�
+ const resetAllStates = () => {
+ isPopupVisible.value = false;
+ seeAnalyzeShow.value = false;
+ topographyShow.value = false;
+ echartsShow.value = false;
+ showAspect.value = false;
+ showRain.value = false;
+ showSnow.value = false;
+ isContourLabel.value = false;
+ };
+
+ // 濡傛灉褰撳墠宸ュ叿宸茬粡鏄縺娲荤姸鎬侊紝鍒欏叧闂畠
+ if (currentToolOptions.value === tool.options) {
+ currentToolOptions.value = null; // 娓呯┖褰撳墠宸ュ叿閫夐」
+ resetAllStates();
+ return;
+ }
+
+ // 濡傛灉宸ュ叿鍚嶇О鏄� "鍥惧眰绠＄悊"锛屽垏鎹㈠浘灞傛爲鏄剧ず鐘舵��
if (tool.name === "鍥惧眰绠＄悊") {
- showLayerTree.value = !showLayerTree.value; // 鍒囨崲鍥惧眰鏍戠殑鏄剧ず鐘舵��
- isPopupVisible.value = false; // 闅愯棌寮圭獥
- seeAnalyzeShow.value = false; //鍙鍩�
- topographyShow.value = false; //鍓栭潰
- echartsShow.value = false; //鍓栭潰echarts
- showAspect.value = false; //鍧″悜绠ご
- showSlope.value = false; //鍧″悜绠ご
- showRain.value = false; //闆ㄥぉ
+ showLayerTree.value = !showLayerTree.value;
+ resetAllStates();
return;
}
// 瀵逛簬鍏朵粬宸ュ叿
+ resetAllStates();
showLayerTree.value = false; // 纭繚鍥惧眰鏍戦殣钘�
isPopupVisible.value = true; // 鏄剧ず寮圭獥
currentToolOptions.value = tool.options; // 璁剧疆褰撳墠宸ュ叿鐨勫姛鑳介�夐」
- seeAnalyzeShow.value = false; //鍙鍩�
- topographyShow.value = false; //鍓栭潰
- echartsShow.value = false; //鍓栭潰echarts
- showAspect.value = false; //鍧″悜绠ご
- showSlope.value = false; //鍧″悜绠ご
- showRain.value = false; //闆ㄥぉ
}
+
+const currentOption = ref(null);
// 澶勭悊寮圭獥閫夐」鐐瑰嚮浜嬩欢
function handleOptionClick(option) {
isPopupVisible.value = false;
- console.log("Selected option:", option);
+ currentOption.value = option.name;
+ console.log("Selected option:", currentOption.value);
const actionMap = {
鏄剧ず鍥惧眰: () => (showLayerTree.value = true),
闅愯棌鍥惧眰: () => (showLayerTree.value = false),
闆ㄥぉ妯″紡: () => {
showRain.value = true;
+ onUpdateRain();
},
闆ぉ妯″紡: () => {
- isSnow.value = !isSnow.value;
- if (isSnow.value === false) {
- mapUtils.toggleSnow("snow", false);
+ showSnow.value = true;
+ onUpdateSnow();
+ },
+ 娓呴櫎澶╂皵: () => {
+ if (1) {
+ showRain.value = false;
+ showSnow.value = false;
+ mapUtils.delRain(); // 鍏抽棴闆ㄦ晥鏋�
+ mapUtils.delSnow(); // 鍏抽棴闆晥鏋�
+ console.log("澶╂皵鏁堟灉宸叉竻闄�");
} else {
- mapUtils.toggleSnow("snow", true);
+ console.log("娌℃湁鎵撳紑鐨勫ぉ姘旀晥鏋�");
}
},
+
鏂囧瓧鏍囩粯: () => mapUtils.CreateLabel("label", true),
澶氭绾挎爣缁�: () => mapUtils.CreateLabel("polyline", true),
澶氳竟褰㈡爣缁�: () => mapUtils.CreateLabel("polygon", true),
@@ -259,11 +289,16 @@
鍓栭潰鎻愬彇: () => {
topographyShow.value = true;
},
- 鍧″害鍒嗘瀽: () => {
- showSlope.value = true;
- },
- 鍧″悜鍒嗘瀽: () => {
+ 鍧″害鍧″悜鍒嗘瀽: () => {
showAspect.value = true;
+ },
+ 绛夐珮绾垮垎鏋�: () => {
+ isContourLabel.value = true;
+ // if (isContourLabel.value === false) {
+ // mapUtils.createContourLabel();
+ // } else {
+ // mapUtils.closeContourLabel();
+ // }
},
鐐逛綅淇℃伅鎻愬彇: () => {
isPickActive.value = !isPickActive.value;
@@ -283,14 +318,6 @@
mapUtils.FloodAnalysis("close");
} else {
mapUtils.FloodAnalysis();
- }
- },
- 绛夐珮绾垮垎鏋�: () => {
- isContourLabel.value = !isContourLabel.value;
- if (isContourLabel.value === false) {
- mapUtils.createContourLabel();
- } else {
- mapUtils.closeContourLabel();
}
},
};
@@ -355,6 +382,14 @@
mapUtils.handleClear();
};
+// 鍒掑垎鍖哄煙
+const SlopeArrow = () => {
+ mapUtils.hfqy();
+};
+// 鍧″害鍒嗘瀽
+const handleaspect = () => {
+ mapUtils.pdfx();
+};
//鍧″害鐨勭澶磋搴�(瑙掑害涓�0~1,鑼冨洿鍐呯殑鍧囧寑鎻掑��)
const angles = [
0.0, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7,
@@ -382,28 +417,30 @@
"#F0AD56",
"#F2CC45",
];
-
-const SlopeArrow = () => {
+// 鍧″悜鍒嗘瀽
+const handleSlope = () => {
mapUtils.pxjt(colors, angles);
};
-// 鍏抽棴鍧″悜绠ご
+// 鍏抽棴鍧″害鍧″悜鍒嗘瀽
const SlopeArrowClose = () => {
- mapUtils.gbpxjt();
+ mapUtils.clearPreviousAnalysis();
};
-// 鍧″害鍒嗘瀽
+// 绛夐珮绾�
const formData = reactive({
- terrainRender: 0,
contourLines: false,
- color: "",
+ color: "red",
spacing: 50,
lineWidth: 5,
});
-// 鍧″害
+const SlopeAnalysiss = () => {
+ mapUtils.dgxfx(formData);
+};
+
const onUpdateSlope = (newOption) => {
Object.assign(formData, newOption);
- mapUtils.pdfx(formData);
+ mapUtils.dgxfx(formData);
};
// 闆�
@@ -416,6 +453,18 @@
console.log(newOption, "new");
Object.assign(rainForm, newOption);
mapUtils.toggleRain(rainForm, true);
+};
+// 闆�
+const snowForm = reactive({
+ snowSize: 0.02, // 榛樿闆殑澶у皬
+ snowSpeed: 100, // 榛樿闆殑閫熷害
+ snowColor: "#FFFFFF", // 榛樿闆殑棰滆壊
+});
+
+const onUpdateSnow = (newOption) => {
+ console.log(newOption, "new");
+ Object.assign(snowForm, newOption);
+ mapUtils.toggleSnow(snowForm, true);
};
</script>
@@ -509,6 +558,7 @@
right: 60px;
top: -20px;
}
+
.sectionChars {
position: absolute;
top: auto;
--
Gitblit v1.9.3