划区域坡度分析

guonan

2025-04-17 2b4ddd668550749813c4e02b5d5100842763e23b

划区域坡度分析

 src/components/tools/SlopeAnalysis.vue

@@ -1,39 +1,44 @@
<template>
  <div class="terrain-settings">
    <el-form :model="form" label-width="80px">
      <!-- 地表渲染 -->
      <el-form-item label="地表渲染">
        <el-radio-group v-model="form.terrainRender">
          <el-radio :label="0">无</el-radio>
          <el-radio :label="1">坡度</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 等高线开关 -->
      <el-form-item label="等高线">
        <el-switch
          v-model="form.contourLines"
          inline-prompt
          active-text="开"
          inactive-text="关"
        ></el-switch>
        <el-color-picker v-model="form.color" style="margin-left: 10px" />
      </el-form-item>

      <!-- 间距滑块（根据等高线开关控制显示） -->
      <el-form-item label="间距" v-if="form.contourLines">
        <el-slider v-model="form.spacing" :min="20" :max="500"></el-slider>
      </el-form-item>

      <!-- 线宽滑块（根据等高线开关控制显示） -->
      <el-form-item label="线宽" v-if="form.contourLines">
        <el-slider v-model="form.lineWidth" :min="1" :max="10"></el-slider>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end">
      <el-button @click="handleDraw">绘制区域</el-button>
    </div>
  </div>
  <!-- 坡度分析 -->
  <el-form :model="form" label-width="80px" class="terrain-settings">
    <!-- 地表渲染 -->
    <el-form-item label="地表渲染">
      <el-radio-group v-model="form.terrainRender">
        <el-radio :label="0">无</el-radio>
        <el-radio :label="1">坡度</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 等高线开关 -->
    <el-form-item label="等高线">
      <el-switch
        v-model="form.contourLines"
        inline-prompt
        active-text="开"
        inactive-text="关"
      ></el-switch>
      <el-color-picker v-model="form.color" style="margin-left: 10px" />
    </el-form-item>

    <!-- 间距滑块（根据等高线开关控制显示） -->
    <el-form-item label="间距" v-if="form.contourLines">
      <el-slider v-model="form.spacing" :min="20" :max="500"></el-slider>
    </el-form-item>

    <!-- 线宽滑块（根据等高线开关控制显示） -->
    <el-form-item label="线宽" v-if="form.contourLines">
      <el-slider v-model="form.lineWidth" :min="1" :max="10"></el-slider>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, watch } from "vue";
import { reactive, watch, defineEmits } from "vue";

// 定义 props 和 emit
const props = defineProps({
@@ -61,6 +66,10 @@
  },
  { deep: true } // 深度监听
);
const handleDraw = () => {
  console.log("绘制区域");
  emit("draw");
};
</script>

<style lang="less" scoped>
@@ -77,8 +86,6 @@
  margin-bottom: 20px;
  display: flex;
}



/deep/ .el-switch.is-checked .el-switch__core {
  background-color: #009688;

 src/components/tools/Tools.vue

@@ -4,36 +4,85 @@
    <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"
        class="popup-menu-see"
      />
      <SlopeAnalysis
        @draw="SlopeAnalysiss"
        v-show="showSlope"
        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>
@@ -189,11 +238,11 @@
    隐藏图层: () => (showLayerTree.value = false),
    雨天模式: () => {
      showRain.value = true;
      onUpdateRain()
      onUpdateRain();
    },
    雪天模式: () => {
      showSnow.value = true
      onUpdateSnow()
      showSnow.value = true;
      onUpdateSnow();
    },
    清除天气: () => {
      if (1) {
@@ -358,18 +407,23 @@
};
// 关闭坡向箭头
const SlopeArrowClose = () => {
  mapUtils.gbpxjt();
  mapUtils.cleanupAnalysisTools();
};

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

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


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

 src/utils/tools.js

@@ -23,6 +23,8 @@
  elevationTool: null,
  rainEffect: null,
  snowEffect: null, // 新增雪效果实例
  regionTerrain: null,
  polygonPosition: [],

  init(earthCtrl) {
    this.earthCtrl = earthCtrl;
@@ -36,13 +38,13 @@
    return new Cesium.Color(r, g, b, 1.0);
  },
  // 清除天气特效
  delRain(){
  delRain() {
    if (this.rainEffect) {
      this.rainEffect.destroy()
      this.rainEffect = null
    }
  },
  delSnow(){
  delSnow() {
    if (this.snowEffect) {
      this.snowEffect.destroy();
      this.snowEffect = null;
@@ -87,8 +89,57 @@
      this.snowEffect.show(show);
    }
  },
  // 区域划分工具
  hfqy() {
    // 初始化区域地形
    this.regionTerrain = earthCtrl.factory.createRegionTerrain({});
    this.polygonPosition = [];

    // 创建绘制工具
    const drawTool = earthCtrl.shapeTool.createDrawShapeTool((e) => {
      try {
        if (!e || !e.result) {
          throw new Error('Invalid drawing result');
        }

        // 转换坐标并存储
        const polygonI = [];
        for (const point of e.result) {
          const cartographic = earthCtrl.coreMap.scene.globe.ellipsoid.cartesianToCartographic(point);
          const lon = Cesium.Math.toDegrees(cartographic.longitude);
          const lat = Cesium.Math.toDegrees(cartographic.latitude);

          polygonI.push(lon, lat, 0);
          this.polygonPosition.push(lon, lat);
        }

        // 设置区域地形
        this.regionTerrain.setPositions(this.polygonPosition);
        this.regionTerrain.setRegionEnabled(true);

        // 清除绘制工具
        drawTool.removeFromMap();
      } catch (error) {
        console.error('Error during region drawing:', error);
        drawTool.removeFromMap();
      }
    });

    return drawTool;
  },
  // 坡向箭头
  pxjt(colors, angles) {
    this.hfqy()
    this.slopeArrow = earthCtrl.factory.createSlopeArrow({});
    this.slopeArrow.setColorsAndAngles(colors, angles);
    this.regionTerrain.setPositions(this.polygonPosition);
    this.regionTerrain.setRegionEnabled(true);
    this.slopeArrow.setSlopeType(1);
  },

  // 坡度分析
  pdfx(option) {
    this.hfqy()
    this.elevationTool = new SmartEarth.ElevationTool(earthCtrl)
    if (option.terrainRender == '1') {
      this.elevationTool.type = 'slope'
@@ -100,46 +151,21 @@
    this.elevationTool.setWidth(option.lineWidth)
    this.elevationTool.setContourColor(option.color);
    this.elevationTool.render();
    console.log(this.elevationTool, 'eleelelelelelelel')
  },
  // 坡向箭头
  pxjt(colors, angles) {
    this.slopeArrow = earthCtrl.factory.createSlopeArrow({});
    this.slopeArrow.setColorsAndAngles(colors, angles);

    // 创建绘制工具
    const drawTool = earthCtrl.shapeTool.createDrawShapeTool((e) => {
      const polygonI = [];
      const polygonPosition = [];
      for (const i of e.result) {
        const ellipsoid = earthCtrl.coreMap.scene.globe.ellipsoid;
        const cartographic = ellipsoid.cartesianToCartographic(i);

        const lon = Cesium.Math.toDegrees(cartographic.longitude);
        const lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
        polygonI.push(lon, lat, 0);
        polygonPosition.push(lon, lat);
      }
      const PolygonArr = [];
      PolygonArr.push({
        id: earthCtrl.factory.createUUID(),
        polygon: polygonI,
      });

      // 清除绘制工具
      drawTool.removeFromMap();
      // 设置坡度箭头的位置和类型
      this.slopeArrow.setPositions(polygonPosition);
      this.slopeArrow.setSlopeType(1);
      this.slopeArrow.setRegionEnabled(true);
      console.log(this.slopeArrow, 'slope')
    });
  },
  // 关闭坡向箭头
  gbpxjt() {
  // 清理所有分析工具
  cleanupAnalysisTools() {
    // 坡向箭头
    if (this.slopeArrow) {
      this.slopeArrow.setSlopeType(0);
      this.slopeArrow = null;
    }
    // 选择区域
    if (this.regionTerrain) {
      this.regionTerrain.setRegionEnabled(false);
      this.regionTerrain = null;
    }
    this.polygonPosition = [];
  },
  // 标绘
  CreateLabel(pic, show) {