guonan
2025-04-18 1dbf51ab46b6a96daa4b75afa58eb9d1c9570a54
src/components/tools/Aspect.vue
@@ -1,14 +1,20 @@
// 坡向分析
<template>
  <div class="aspect">
    <div>
    <el-button @click="handleDraw">绘制区域</el-button>
    <el-button @click="handleClear">关闭坡度</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-button @click="handleaspect">坡度分析</el-button>
      <el-button @click="handleSlope">坡向分析</el-button>
    </div>
  </div>
</template>
<script setup>
import { reactive, defineEmits } from "vue";
// 定义 emit 方法
const emit = defineEmits(["draw", "clear"]);
const emit = defineEmits(["draw", "clear", "handleaspect", "handleSlope"]);
const handleDraw = () => {
  console.log("绘制区域");
  emit("draw");
@@ -17,11 +23,19 @@
  console.log("关闭坡度");
  emit("clear");
};
const handleaspect = () => {
  console.log("坡度分析");
  emit("handleaspect");
};
const handleSlope = () => {
  console.log("坡向分析");
  emit("handleSlope");
};
</script>
<style lang="less" scoped>
.aspect {
  width: 215px;
  height: 50px;
  // height: 50px;
  background: url("@/assets/img/tools/plotting_new.png") no-repeat;
  filter: opacity(83%);
  background-size: 100% 100%;