透明度0 修改模型数据路径

wangjuncheng

4 天以前 cf7752d995e09d48eca9a1ca5634a9e71ae46553

 src/components/tools/Tools.vue

@@ -4,84 +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"
        class="popup-menu-see"
      />
      <SlopeAnalysis
        v-show="showSlope"
        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"
      />
      <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";
@@ -92,6 +53,8 @@
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";
import SunAnalysis from "@/components/tools/SunAnalysis.vue";

// 切换展开/收缩状态
function toggleCollapse() {
@@ -108,7 +71,9 @@
const isFlood = ref(false);
const isContourLabel = ref(false);
const showRain = ref(false);
const isSnow = ref(false);
const showSnow = ref(false);
const showAtmosphere = ref(false);
const showSunAnalysis = ref(false);

// 剖面分析弹窗
const topographyShow = ref(false);
@@ -120,9 +85,6 @@

// 坡向箭头弹窗
const showAspect = ref(false);

// 坡度分析弹窗
const showSlope = ref(false);

// 工具列表
const toolList = ref([
@@ -155,8 +117,7 @@
    active: false,
    options: [
      { name: "点位信息提取", icon: "点位信息提取" },
      { name: "坡度分析", icon: "坡度坡向提取" },
      { name: "坡向分析", icon: "坡度坡向提取" },
      { name: "坡度坡向分析", icon: "坡度坡向提取" },
      { name: "剖面提取", icon: "剖面提取" },
      { name: "挖填方计算", icon: "挖填方计算" },
      { name: "等高线分析", icon: "等高线分析" },
@@ -187,56 +148,95 @@
    options: [
      { name: "雨天模式", icon: "雨天模式" },
      { name: "雪天模式", icon: "雪天模式" },
      { name: "清除天气", icon: "清除分析" },
      { name: "大气散射", icon: "大气散射" },
      { name: "日照分析", icon: "大气散射" },
    ],
  },
]);

// 处理工具点击事件
function handleClick(tool, event) {
  console.log(tool.options);
  // 如果工具名称是 "图层管理"
  // 遍历工具列表，更新激活状态
  toolList.value.forEach((item) => {
    item.active = item.name === tool.name && currentToolOptions.value !== tool.options;
  });

  // 定义一个函数用于重置所有状态
  const resetAllStates = () => {
    isPopupVisible.value = false;
    seeAnalyzeShow.value = false;
    topographyShow.value = false;
    echartsShow.value = false;
    showAspect.value = false;
    showRain.value = false;
    showSnow.value = false;
    isContourLabel.value = false;
  };

  // 如果当前工具已经是激活状态，则关闭它
  if (currentToolOptions.value === tool.options) {
    currentToolOptions.value = null; // 清空当前工具选项
    resetAllStates();
    return;
  }

  // 如果工具名称是 "图层管理"，切换图层树显示状态
  if (tool.name === "图层管理") {
    showLayerTree.value = !showLayerTree.value; // 切换图层树的显示状态
    isPopupVisible.value = false; // 隐藏弹窗
    seeAnalyzeShow.value = false; //可视域
    topographyShow.value = false; //剖面
    echartsShow.value = false; //剖面echarts
    showAspect.value = false; //坡向箭头
    showSlope.value = false; //坡向箭头
    showRain.value = false; //雨天
    showLayerTree.value = !showLayerTree.value;
    resetAllStates();
    return;
  }

  // 对于其他工具
  resetAllStates();
  showLayerTree.value = false; // 确保图层树隐藏
  isPopupVisible.value = true; // 显示弹窗
  currentToolOptions.value = tool.options; // 设置当前工具的功能选项
  seeAnalyzeShow.value = false; //可视域
  topographyShow.value = false; //剖面
  echartsShow.value = false; //剖面echarts
  showAspect.value = false; //坡向箭头
  showSlope.value = false; //坡向箭头
  showRain.value = false; //雨天
}

const currentOption = ref(null);

// 处理弹窗选项点击事件
function handleOptionClick(option) {
  isPopupVisible.value = false;
  console.log("Selected option:", option);
  currentOption.value = option.name;
  console.log("Selected option:", currentOption.value);
  const actionMap = {
    显示图层: () => (showLayerTree.value = true),
    隐藏图层: () => (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("没有打开的天气效果");
      }
    },
    大气散射: () => {
      showAtmosphere.value = !showAtmosphere.value
      if (showAtmosphere.value) {
        mapUtils.enableAtmosphere()
      } else {
        mapUtils.disableAtmosphere()
      }
    },
    日照分析: () => {
      window.Viewer = earthCtrl.viewer;
      mapUtils.AnalysisSunshine()
    },

    文字标绘: () => mapUtils.CreateLabel("label", true),
    多段线标绘: () => mapUtils.CreateLabel("polyline", true),
    多边形标绘: () => mapUtils.CreateLabel("polygon", true),
@@ -259,11 +259,16 @@
    剖面提取: () => {
      topographyShow.value = true;
    },
    坡度分析: () => {
      showSlope.value = true;
    },
    坡向分析: () => {
    坡度坡向分析: () => {
      showAspect.value = true;
    },
    等高线分析: () => {
      isContourLabel.value = true;
      // if (isContourLabel.value === false) {
      //   mapUtils.createContourLabel();
      // } else {
      //   mapUtils.closeContourLabel();
      // }
    },
    点位信息提取: () => {
      isPickActive.value = !isPickActive.value;
@@ -283,14 +288,6 @@
        mapUtils.FloodAnalysis("close");
      } else {
        mapUtils.FloodAnalysis();
      }
    },
    等高线分析: () => {
      isContourLabel.value = !isContourLabel.value;
      if (isContourLabel.value === false) {
        mapUtils.createContourLabel();
      } else {
        mapUtils.closeContourLabel();
      }
    },
  };
@@ -355,6 +352,14 @@
  mapUtils.handleClear();
};

// 划分区域
const SlopeArrow = () => {
  mapUtils.hfqy();
};
// 坡度分析
const handleaspect = () => {
  mapUtils.pdfx();
};
//坡度的箭头角度(角度为0~1,范围内的均匀插值)
const angles = [
  0.0, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7,
@@ -382,28 +387,30 @@
  "#F0AD56",
  "#F2CC45",
];

const SlopeArrow = () => {
// 坡向分析
const handleSlope = () => {
  mapUtils.pxjt(colors, angles);
};
// 关闭坡向箭头
// 关闭坡度坡向分析
const SlopeArrowClose = () => {
  mapUtils.gbpxjt();
  mapUtils.clearPreviousAnalysis();
};

// 坡度分析
// 等高线
const formData = reactive({
  terrainRender: 0,
  contourLines: false,
  color: "",
  color: "red",
  spacing: 50,
  lineWidth: 5,
});

// 坡度
const SlopeAnalysiss = () => {
  mapUtils.dgxfx(formData);
};

const onUpdateSlope = (newOption) => {
  Object.assign(formData, newOption);
  mapUtils.pdfx(formData);
  mapUtils.dgxfx(formData);
};

// 雨
@@ -411,11 +418,24 @@
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30 // 雨的密度
});
const onUpdateRain = (newOption) => {
  console.log(newOption, "new");
  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>

@@ -509,6 +529,7 @@
  right: 60px;
  top: -20px;
}

.sectionChars {
  position: absolute;
  top: auto;