change

wangjuncheng

2025-04-17 2ee0ab96f3edfbf8aefc9e2c5d5f73332411eb99

change

 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>

 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" />
      <!-- å‰–面提取的echarts -->
      <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;

 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) {