123

wangjuncheng

2025-06-16 4b7b8185bdce4272cd5f256fcc777056f54add6d

 src/components/tools/Tools.vue

@@ -4,92 +4,45 @@
    <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"
        @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" />
      <SunAnalysis v-show="showSunAnalysis" class="popup-menu-see"></SunAnalysis>
    </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>
  </div>
</template>


<script setup>
import { reactive, ref } from "vue";
@@ -101,6 +54,7 @@
import mapUtils from "@/utils/tools.js";
import Rain from "@/components/tools/Rain.vue";
import Snow from "@/components/tools/Snow.vue";
import SunAnalysis from "@/components/tools/SunAnalysis.vue";

// 切换展开/收缩状态
function toggleCollapse() {
@@ -118,6 +72,8 @@
const isContourLabel = ref(false);
const showRain = ref(false);
const showSnow = ref(false);
const showAtmosphere = ref(false);
const showSunAnalysis = ref(false);

// 剖面分析弹窗
const topographyShow = ref(false);
@@ -193,6 +149,8 @@
      { name: "雨天模式", icon: "雨天模式" },
      { name: "雪天模式", icon: "雪天模式" },
      { name: "清除天气", icon: "清除分析" },
      { name: "大气散射", icon: "大气散射" },
      { name: "日照分析", icon: "大气散射" },
    ],
  },
]);
@@ -265,6 +223,18 @@
      } else {
        console.log("没有打开的天气效果");
      }
    },
    大气散射: () => {
      showAtmosphere.value = !showAtmosphere.value
      if (showAtmosphere.value) {
        mapUtils.enableAtmosphere()
      } else {
        mapUtils.disableAtmosphere()
      }
    },
    日照分析: () => {
      window.Viewer = earthCtrl.viewer;
      mapUtils.AnalysisSunshine()
    },

    文字标绘: () => mapUtils.CreateLabel("label", true),
@@ -448,6 +418,7 @@
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30 // 雨的密度
});
const onUpdateRain = (newOption) => {
  console.log(newOption, "new");