From 95f7d3b2fa9399514af2d32dbffbc9e4a7c9b197 Mon Sep 17 00:00:00 2001
From: wangyawei <1796609990@qq.com>
Date: 星期五, 18 四月 2025 14:27:44 +0800
Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb
---
src/components/tools/Tools.vue | 179 ++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 122 insertions(+), 57 deletions(-)
diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue
index a1456f9..146a429 100644
--- a/src/components/tools/Tools.vue
+++ b/src/components/tools/Tools.vue
@@ -42,17 +42,31 @@
<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"
+ />
+ <!-- 闆� -->
+ <Rain
+ v-show="showRain"
+ class="popup-menu-see"
+ @update-rain="onUpdateRain"
+ />
+ <Snow
+ v-show="showSnow"
+ class="popup-menu-see"
+ @update-snow="onUpdateSnow"
/>
</div>
@@ -85,14 +99,15 @@
import Aspect from "@/components/tools/Aspect.vue";
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() {
// isCollapsed.value = !isCollapsed.value;
}
-
-const showLayerTree = ref(true);
+const showLayerTree = ref(false);
const isPopupVisible = ref(false); // 鎺у埗寮圭獥鏄惁鍙
const currentToolOptions = ref([]); // 褰撳墠宸ュ叿鐨勫姛鑳介�夐」
@@ -101,8 +116,8 @@
const isflfx = ref(false);
const isFlood = ref(false);
const isContourLabel = ref(false);
-const isRain = ref(false);
-const isSnow = ref(false);
+const showRain = ref(false);
+const showSnow = ref(false);
// 鍓栭潰鍒嗘瀽寮圭獥
const topographyShow = ref(false);
@@ -114,9 +129,6 @@
// 鍧″悜绠ご寮圭獥
const showAspect = ref(false);
-
-// 鍧″害鍒嗘瀽寮圭獥
-const showSlope = ref(false);
// 宸ュ叿鍒楄〃
const toolList = ref([
@@ -149,8 +161,7 @@
active: false,
options: [
{ name: "鐐逛綅淇℃伅鎻愬彇", icon: "鐐逛綅淇℃伅鎻愬彇" },
- { name: "鍧″害鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
- { name: "鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
+ { name: "鍧″害鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
{ name: "鍓栭潰鎻愬彇", icon: "鍓栭潰鎻愬彇" },
{ name: "鎸栧～鏂硅绠�", icon: "鎸栧～鏂硅绠�" },
{ name: "绛夐珮绾垮垎鏋�", icon: "绛夐珮绾垮垎鏋�" },
@@ -181,59 +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; //鍧″悜绠ご
+ 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; //鍧″悜绠ご
}
+
+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),
闆ㄥぉ妯″紡: () => {
- isRain.value = !isRain.value;
- if (isRain.value === false) {
- mapUtils.toggleRain("rain", false);
- } else {
- mapUtils.toggleRain("rain", true);
- }
+ 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),
@@ -256,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;
@@ -280,14 +318,6 @@
mapUtils.FloodAnalysis("close");
} else {
mapUtils.FloodAnalysis();
- }
- },
- 绛夐珮绾垮垎鏋�: () => {
- isContourLabel.value = !isContourLabel.value;
- if (isContourLabel.value === false) {
- mapUtils.createContourLabel();
- } else {
- mapUtils.closeContourLabel();
}
},
};
@@ -352,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,
@@ -379,28 +417,54 @@
"#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);
+};
+
+// 闆�
+const rainForm = reactive({
+ rainSize: 0.5,
+ rainSpeed: 50,
+ rainColor: "#99B3CC",
+});
+const onUpdateRain = (newOption) => {
+ 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>
@@ -494,6 +558,7 @@
right: 60px;
top: -20px;
}
+
.sectionChars {
position: absolute;
top: auto;
--
Gitblit v1.9.3