From 2ee0ab96f3edfbf8aefc9e2c5d5f73332411eb99 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 17 四月 2025 16:30:09 +0800
Subject: [PATCH] change
---
src/components/tools/Snow.vue | 66 ++++++++++++++++
src/utils/tools.js | 57 ++++++++++----
src/components/tools/Tools.vue | 105 +++++++++++---------------
3 files changed, 150 insertions(+), 78 deletions(-)
diff --git a/src/components/tools/Snow.vue b/src/components/tools/Snow.vue
new file mode 100644
index 0000000..2013088
--- /dev/null
+++ b/src/components/tools/Snow.vue
@@ -0,0 +1,66 @@
+<template>
+ <el-form :model="form" label-width="80px" class="terrain-settings">
+ <el-form-item label="澶у皬">
+ <el-slider
+ :step="0.01"
+ v-model="form.snowSize"
+ :min="0.01"
+ :max="0.1"
+ ></el-slider>
+ </el-form-item>
+ <el-form-item label="閫熷害">
+ <el-slider v-model="reversedSnowSpeed" :min="50" :max="200"></el-slider>
+ </el-form-item>
+ <el-form-item label="棰滆壊">
+ <el-color-picker v-model="form.snowColor" />
+ </el-form-item>
+ </el-form>
+ </template>
+
+ <script setup>
+ import { reactive, watch ,computed} from "vue";
+
+ // 瀹氫箟琛ㄥ崟鏁版嵁
+ const form = reactive({
+ snowSize: 0.02, // 榛樿闆殑澶у皬
+ snowSpeed: 100, // 榛樿闆殑閫熷害
+ snowColor: "#FFFFFF", // 榛樿闆殑棰滆壊
+ });
+
+ // 瀹氫箟 props 鍜� emit
+ const props = defineProps({
+ modelValue: {
+ type: Object,
+ default: () => ({}),
+ },
+ });
+ const emit = defineEmits(["update-snow"]);
+ // 璁＄畻灞炴�ф潵鍙嶈浆婊戝潡鐨勫��
+const reversedSnowSpeed = computed({
+ get() {
+ return 250 - form.snowSpeed; // 鍋囪鏈�澶у�间负200锛屾渶灏忓�间负50
+ },
+ set(value) {
+ form.snowSpeed = 250 - value;
+ }
+});
+ // 鐩戝惉 form 鐨勫彉鍖栵紝骞跺皢鏈�鏂板�间紶閫掔粰鐖剁粍浠�
+ watch(
+ () => ({ ...form }), // 娣辨嫹璐濅互纭繚鍝嶅簲寮忚Е鍙�
+ (newVal) => {
+ emit("update-snow", newVal);
+ },
+ { deep: true } // 娣卞害鐩戝惉
+ );
+ </script>
+
+ <style lang="less" scoped>
+ .terrain-settings {
+ padding: 20px;
+ width: 290px;
+ background: url("@/assets/img/tools/plotting_new.png") no-repeat;
+ filter: opacity(83%);
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ }
+ </style>
\ No newline at end of file
diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue
index 53139b3..e0fdbd5 100644
--- a/src/components/tools/Tools.vue
+++ b/src/components/tools/Tools.vue
@@ -4,79 +4,36 @@
<div class="tools-title" @click="toggleCollapse">
宸ュ叿鏍�
<div class="popup-menu" v-if="isPopupVisible">
- <div
- class="popup-item"
- v-for="(option, idx) in currentToolOptions"
- :key="idx"
- @click="handleOptionClick(option)"
- >
- <img
- class="popup-icon"
- :src="
- require(`../../assets/img/tools/tools_second/${option.icon}.png`)
- "
- :alt="option.name"
- />
+ <div class="popup-item" v-for="(option, idx) in currentToolOptions" :key="idx"
+ @click="handleOptionClick(option)">
+ <img class="popup-icon" :src="require(`../../assets/img/tools/tools_second/${option.icon}.png`)
+ " :alt="option.name" />
{{ option.name }}
</div>
</div>
<LayerTree class="popup-menu" v-show="showLayerTree" />
<!-- 鍙鍩熷垎鏋� -->
- <seeAnalyze
- :option="option"
- v-show="seeAnalyzeShow"
- @update:showConeLine="handleUpdateShowConeLine"
- @update-option="onUpdateOption"
- @draw="onDraw"
- @clear="onClear"
- class="popup-menu-see"
- />
+ <seeAnalyze :option="option" v-show="seeAnalyzeShow" @update:showConeLine="handleUpdateShowConeLine"
+ @update-option="onUpdateOption" @draw="onDraw" @clear="onClear" class="popup-menu-see" />
<!-- 鍓栭潰鎻愬彇 -->
- <TopographyDia
- @draw="handleDraw"
- @clear="handleClear"
- class="popup-menu-see"
- v-show="topographyShow"
- />
+ <TopographyDia @draw="handleDraw" @clear="handleClear" class="popup-menu-see" v-show="topographyShow" />
<!-- 鍓栭潰鎻愬彇鐨別charts -->
<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"
- class="popup-menu-see"
- />
- <SlopeAnalysis
- v-show="showSlope"
- class="popup-menu-see"
- @update-slope="onUpdateSlope"
- />
+ <Aspect v-show="showAspect" @draw="SlopeArrow" @clear="SlopeArrowClose" class="popup-menu-see" />
+ <SlopeAnalysis v-show="showSlope" class="popup-menu-see" @update-slope="onUpdateSlope" />
<!-- 闆� -->
- <Rain
- v-show="showRain"
- class="popup-menu-see"
- @update-rain="onUpdateRain"
- />
+ <Rain v-show="showRain" class="popup-menu-see" @update-rain="onUpdateRain" />
+ <Snow v-show="showSnow" class="popup-menu-see" @update-snow="onUpdateSnow" />
</div>
<!-- 宸ュ叿鏍忓唴瀹� -->
<transition name="fade">
<div v-if="!isCollapsed" class="tools-content">
- <div
- class="tools-item"
- v-for="(item, index) in toolList"
- :key="index"
- @click.stop="handleClick(item)"
- >
- <img
- class="icon"
- :src="require(`../../assets/img/tools/${item.icon}.png`)"
- :title="item.name"
- alt=""
- />
+ <div class="tools-item" v-for="(item, index) in toolList" :key="index" @click.stop="handleClick(item)">
+ <img class="icon" :src="require(`../../assets/img/tools/${item.icon}.png`)" :title="item.name" alt="" />
</div>
</div>
</transition>
@@ -92,6 +49,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 +66,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);
@@ -187,6 +145,7 @@
options: [
{ name: "闆ㄥぉ妯″紡", icon: "闆ㄥぉ妯″紡" },
{ name: "闆ぉ妯″紡", icon: "闆ぉ妯″紡" },
+ { name: "娓呴櫎澶╂皵", icon: "娓呴櫎鍒嗘瀽" },
],
},
]);
@@ -204,6 +163,7 @@
showAspect.value = false; //鍧″悜绠ご
showSlope.value = false; //鍧″悜绠ご
showRain.value = false; //闆ㄥぉ
+ showSnow.value = false; //闆ㄥぉ
return;
}
@@ -217,6 +177,7 @@
showAspect.value = false; //鍧″悜绠ご
showSlope.value = false; //鍧″悜绠ご
showRain.value = false; //闆ㄥぉ
+ showSnow.value = false; //闆ㄥぉ
}
// 澶勭悊寮圭獥閫夐」鐐瑰嚮浜嬩欢
@@ -228,15 +189,24 @@
闅愯棌鍥惧眰: () => (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),
@@ -417,6 +387,18 @@
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>
<style lang="less" scoped>
@@ -509,6 +491,7 @@
right: 60px;
top: -20px;
}
+
.sectionChars {
position: absolute;
top: auto;
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 6604c70..6f0a779 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -3,6 +3,7 @@
// import cameraIconSel from "../assets/images/base/瑙嗛娴嬬偣sel.png"
import { ElLoading, ElMessage } from "element-plus";
import RainEffect from './rain'
+import SnowEffect from './snow'
let layerIsOpen = false;
const Cesium = SmartEarth.Cesium;
const colorAll = {
@@ -21,6 +22,7 @@
slopeArrow: null,
elevationTool: null,
rainEffect: null,
+ snowEffect: null, // 鏂板闆晥鏋滃疄渚�
init(earthCtrl) {
this.earthCtrl = earthCtrl;
@@ -33,7 +35,20 @@
const b = parseInt(hex.substring(4, 6), 16) / 255;
return new Cesium.Color(r, g, b, 1.0);
},
- // 澶╂皵
+ // 娓呴櫎澶╂皵鐗规晥
+ delRain(){
+ if (this.rainEffect) {
+ this.rainEffect.destroy()
+ this.rainEffect = null
+ }
+ },
+ delSnow(){
+ if (this.snowEffect) {
+ this.snowEffect.destroy();
+ this.snowEffect = null;
+ }
+ },
+ // 闆ㄥぉ妯℃嫙
toggleRain(option, show) {
console.log(option, 'option')
// 鍏堥攢姣佹棫瀹炰緥
@@ -47,6 +62,30 @@
rainSpeed: option.rainSpeed, // 闆ㄧ殑閫熷害
color: this.hexToColor(option.rainColor) // 闆ㄧ殑棰滆壊
})
+ },
+ // 闆ぉ妯℃嫙
+ toggleSnow(option = {}, show = true) {
+ console.log(option, 'option');
+ const defaultOption = {
+ snowSize: 0.02, // 榛樿闆殑澶у皬
+ snowSpeed: 100.0, // 榛樿闆殑閫熷害
+ snowColor: "#ffffff", // 榛樿棰滆壊锛氱櫧鑹�
+ };
+ option = { ...defaultOption, ...option };
+ if (this.snowEffect) {
+ this.snowEffect.destroy();
+ this.snowEffect = null;
+ }
+ this.snowEffect = new SnowEffect(earthCtrl.viewer, {
+ snowSize: option.snowSize, // 闆殑澶у皬
+ snowSpeed: option.snowSpeed, // 闆殑閫熷害
+ snowColor: this.hexToColor(option.snowColor), // 闆殑棰滆壊
+ });
+
+ // 鎺у埗鏄剧ず/闅愯棌
+ if (this.snowEffect) {
+ this.snowEffect.show(show);
+ }
},
// 鍧″害鍒嗘瀽
pdfx(option) {
@@ -102,22 +141,6 @@
this.slopeArrow.setSlopeType(0);
}
},
-
-
- toggleSnow(weather = "snow", show) {
- if (show) {
- earthCtrl.environment.showEffect(weather);
- } else {
- let snowValue = {
- test1: 2,
- test2: 1.0,
- test3: 0.5,
- test4: 0.5,
- };
- earthCtrl.environment.disableEffect(weather);
- }
- },
-
// 鏍囩粯
CreateLabel(pic, show) {
if (show) {
--
Gitblit v1.9.3