first commit

fuchengshen

2022-07-09 3a25c05b5ab837714f30469cdcb1e2a77d8d7f6c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <mars-pannel :visible="true" right="10" top="10">
    <div class="f-mb">
      <a-space>
        <span>原始数据:</span>
        <mars-button @click="drawPolygon">绘制面</mars-button>
      </a-space>
    </div>
 
    <div class="f-mb">
      <a-space>
        <span>旋转角度:</span>
        <mars-input-number v-model:value="angleValue" />
        <mars-button @click="spinPolygons">旋转面</mars-button>
      </a-space>
    </div>
 
    <div class="f-mb">
      <a-space>
        <span>平移距离:</span>
        <mars-input-number v-model:value="distanceValue" />
        <mars-button @click="translationPolygons">平移面</mars-button>
      </a-space>
    </div>
 
    <div class="f-mb">
      <a-space>
        <span>缩放比例:</span>
        <mars-input-number v-model:value="scaleValue" :min="0" :max="10" />
        <mars-button @click="zoomPolygons">缩放面</mars-button>
      </a-space>
    </div>
  </mars-pannel>
</template>
 
<script lang="ts" setup>
import { ref } from "vue"
import * as mapWork from "./map.js"
 
const angleValue = ref<number>(45) // 旋转的角度
const distanceValue = ref<number>(1) // 平移距离
const scaleValue = ref<number>(2) // 缩放比例
 
// 绘制面
const drawPolygon = () => {
  mapWork.drawPolygon()
}
// 旋转面
const spinPolygons = () => {
  mapWork.spinPolygons(angleValue.value)
}
 
// 平移面
const translationPolygons = () => {
  mapWork.translationPolygons(distanceValue.value)
}
 
// 缩放面
const zoomPolygons = () => {
  mapWork.zoomPolygons(scaleValue.value)
}
</script>