修复等高线弹窗

guonan

2025-04-18 b4c175393c4000a1e86a2655362a22444b9e65a9

 src/components/tools/Tools.vue

@@ -42,16 +42,18 @@
      <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="showSlope"
        v-show="isContourLabel"
        class="popup-menu-see"
        @update-slope="onUpdateSlope"
      />
@@ -128,9 +130,6 @@
// 坡向箭头弹窗
const showAspect = ref(false);

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

// 工具列表
const toolList = ref([
  {
@@ -162,8 +161,7 @@
    active: false,
    options: [
      { name: "点位信息提取", icon: "点位信息提取" },
      { name: "坡度分析", icon: "坡度坡向提取" },
      { name: "坡向分析", icon: "坡度坡向提取" },
      { name: "坡度坡向分析", icon: "坡度坡向提取" },
      { name: "剖面提取", icon: "剖面提取" },
      { name: "挖填方计算", icon: "挖填方计算" },
      { name: "等高线分析", icon: "等高线分析" },
@@ -201,7 +199,24 @@

// 处理工具点击事件
function handleClick(tool, event) {
  toolList.value.forEach((item) => {
    item.active =
      item.name === tool.name && currentToolOptions.value !== tool.options;
  });
  console.log(tool.options);
  // 如果当前工具已经是激活状态，则关闭它
  if (currentToolOptions.value === tool.options) {
    currentToolOptions.value = null; // 清空当前工具选项
    isPopupVisible.value = false; // 隐藏弹窗
    seeAnalyzeShow.value = false; // 可视域
    topographyShow.value = false; // 剖面
    echartsShow.value = false; // 剖面echarts
    showAspect.value = false; // 坡度坡向分析
    showRain.value = false; // 雨天
    showSnow.value = false; // 雪天
    isContourLabel.value = false;
    return;
  }
  // 如果工具名称是 "图层管理"
  if (tool.name === "图层管理") {
    showLayerTree.value = !showLayerTree.value; // 切换图层树的显示状态
@@ -210,9 +225,10 @@
    topographyShow.value = false; //剖面
    echartsShow.value = false; //剖面echarts
    showAspect.value = false; //坡向箭头
    showSlope.value = false; //坡向箭头
    showRain.value = false; //雨天
    showSnow.value = false; //雨天
    isContourLabel.value = false;

    return;
  }

@@ -224,15 +240,18 @@
  topographyShow.value = false; //剖面
  echartsShow.value = false; //剖面echarts
  showAspect.value = false; //坡向箭头
  showSlope.value = false; //坡向箭头
  showRain.value = false; //雨天
  showSnow.value = false; //雨天
  isContourLabel.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),
@@ -278,11 +297,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;
@@ -302,14 +326,6 @@
        mapUtils.FloodAnalysis("close");
      } else {
        mapUtils.FloodAnalysis();
      }
    },
    等高线分析: () => {
      isContourLabel.value = !isContourLabel.value;
      if (isContourLabel.value === false) {
        mapUtils.createContourLabel();
      } else {
        mapUtils.closeContourLabel();
      }
    },
  };
@@ -374,6 +390,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,
@@ -401,18 +425,17 @@
  "#F0AD56",
  "#F2CC45",
];

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

// 坡度分析
// 等高线
const formData = reactive({
  terrainRender: 0,
  contourLines: false,
  color: "red",
  spacing: 50,
@@ -420,14 +443,12 @@
});

const SlopeAnalysiss = () => {
  mapUtils.pdfx(formData);
  mapUtils.dgxfx(formData);
};


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

// 雨