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
<template>
  <mars-pannel :visible="true" right="10" top="10">
    <div class="f-mb">
      <a-space>
        <span class="mars-pannel-item-label">原始数据:</span>
        <mars-button @click="drawLine">绘制线</mars-button>
        <mars-button @click="clearAll">清除</mars-button>
      </a-space>
    </div>
 
    <div class="f-mb">
      <a-space>
        <span class="mars-pannel-item-label">计算平行线:</span>
        <mars-input-number  v-model:value="value" :min="1" :max="10" />公里
        <mars-button @click="parallelLines">计算</mars-button>
      </a-space>
    </div>
    <div class="f-mb">
      <a-space>
        <span class="mars-pannel-item-label">计算曲线:</span>
        <mars-button @click="calculationCurve">计算</mars-button>
      </a-space>
    </div>
  </mars-pannel>
</template>
 
<script lang="ts" setup>
import { ref } from "vue"
import * as mapWork from "./map.js"
 
const value = ref<number>(5)
 
// 绘制线
const drawLine = () => {
  mapWork.drawLine()
}
 
// 清除
const clearAll = () => {
  mapWork.clearLayer()
}
 
// 绘制平行线
const parallelLines = () => {
  mapWork.parallelLines(value.value)
}
 
// 绘制曲线
const calculationCurve = () => {
  mapWork.calculationCurve()
}
</script>
 
<style scoped>
.mars-pannel-item-label{
  width: 74px;
}
</style>