1

wangjuncheng

2025-06-06 fd855df19dfadabf14c34ba91e8dfc2421227bf1

 src/components/tools/Tools.vue

@@ -4,16 +4,17 @@
    <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`)
        <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" />
      <!-- 剖面提取的echarts -->
@@ -21,11 +22,14 @@
        <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" />
      <SunAnalysis v-show="showSunAnalysis" class="popup-menu-see"></SunAnalysis>
    </div>

    <!-- 工具栏内容 -->
@@ -49,9 +53,10 @@
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 () {
function toggleCollapse() {
  // isCollapsed.value = !isCollapsed.value;
}

@@ -66,6 +71,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);
@@ -141,12 +148,14 @@
      { name: "雨天模式", icon: "雨天模式" },
      { name: "雪天模式", icon: "雪天模式" },
      { name: "清除天气", icon: "清除分析" },
      { name: "大气散射", icon: "大气散射" },
      { name: "日照分析", icon: "大气散射" },
    ],
  },
]);

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

// 处理弹窗选项点击事件
function handleOptionClick (option) {
function handleOptionClick(option) {
  isPopupVisible.value = false;
  currentOption.value = option.name;
  console.log("Selected option:", currentOption.value);
@@ -212,6 +221,22 @@
        console.log("天气效果已清除");
      } else {
        console.log("没有打开的天气效果");
      }
    },
    大气散射: () => {
      showAtmosphere.value = !showAtmosphere.value
      if (showAtmosphere.value) {
        mapUtils.enableAtmosphere()
      } else {
        mapUtils.disableAtmosphere()
      }
    },
    日照分析: () => {
      showSunAnalysis.value = !showSunAnalysis.value
      if (showSunAnalysis.value) {
        // mapUtils.AnalysisSunshine()
      } else {
        // mapUtils.disableAtmosphere()
      }
    },

@@ -292,13 +317,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;
@@ -309,7 +334,7 @@
}

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