修改雨的效果

wangyawei

2025-04-18 21b66bda2968cd73b370e826ee1154acdc6e3569

 src/components/tools/Tools.vue

@@ -4,87 +4,35 @@
    <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="
        <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"
          />
            " :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"
        @handleaspect="handleaspect"
        @handleSlope="handleSlope"
        class="popup-menu-see"
      />
      <SlopeAnalysis
        @draw="SlopeAnalysiss"
        v-show="isContourLabel"
        class="popup-menu-see"
        @update-slope="onUpdateSlope"
      />
      <Aspect v-show="showAspect" @draw="SlopeArrow" @clear="SlopeArrowClose" @handleaspect="handleaspect" @handleSlope="handleSlope" class="popup-menu-see" />
      <SlopeAnalysis @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"
      />
      <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>
@@ -103,7 +51,7 @@
import Snow from "@/components/tools/Snow.vue";

// 切换展开/收缩状态
function toggleCollapse() {
function toggleCollapse () {
  // isCollapsed.value = !isCollapsed.value;
}

@@ -198,7 +146,7 @@
]);

// 处理工具点击事件
function handleClick(tool, event) {
function handleClick (tool, event) {
  // 遍历工具列表，更新激活状态
  toolList.value.forEach((item) => {
    item.active = item.name === tool.name && currentToolOptions.value !== tool.options;
@@ -240,7 +188,7 @@
const currentOption = ref(null);

// 处理弹窗选项点击事件
function handleOptionClick(option) {
function handleOptionClick (option) {
  isPopupVisible.value = false;
  currentOption.value = option.name;
  console.log("Selected option:", currentOption.value);
@@ -344,13 +292,13 @@
};

// 处理子组件传来的可视域显示锥线的值
function handleUpdateShowConeLine(value) {
function handleUpdateShowConeLine (value) {
  showConeLine.value = value;
  mapUtils.showSyfxViewCone(showConeLine.value);
}

// 鼠标绘制可视域
function onDraw() {
function onDraw () {
  // 定义回调函数，用于接收 res 并更新 option
  const callback = (res) => {
    option.heading = res.heading;
@@ -361,7 +309,7 @@
}

// 清除可视域
function onClear() {
function onClear () {
  mapUtils.syfxqc(option);
}

@@ -448,6 +396,7 @@
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30 // 雨的密度
});
const onUpdateRain = (newOption) => {
  console.log(newOption, "new");