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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
  <mars-pannel :visible="true" right="10" top="10">
    <p class="f-mb">单个裁剪面</p>
    <div class="f-mb">
      <a-space>
        <mars-button @click="drawLine">按绘制线裁剪</mars-button>
      </a-space>
    </div>
    <div class="f-mb">
      <a-space>
        <mars-button @click="mapWork.clippingType('ZR')">切顶部</mars-button>
        <mars-button @click="mapWork.clippingType('Z')">切底部</mars-button>
        <mars-button @click="mapWork.clippingType('XR')">切东向</mars-button>
      </a-space>
    </div>
    <div class="f-mb">
      <a-space>
        <mars-button @click="mapWork.clippingType('X')">切西向</mars-button>
        <mars-button @click="mapWork.clippingType('Y')">切南向</mars-button>
        <mars-button @click="mapWork.clippingType('YR')">切北向</mars-button>
      </a-space>
    </div>
 
    <p class="f-mb">多个裁剪面</p>
    <div class="f-mb">
      <a-space>
        <mars-button @click="drawExtent">绘制矩形</mars-button>
        <mars-button @click="drawPoly">绘制面</mars-button>
        <mars-button @click="drawPoly2">绘制面(外切）</mars-button>
      </a-space>
    </div>
 
    <p>裁剪面参数</p>
    <div class="f-mb">
      <a-space>
        <span class="mars-pannel-item-label">裁剪距离</span>
        <mars-slider @change="distance" v-model:value="distanceValue" :min="-100" :max="100" />
        <mars-input-number @change="txtDistance" v-model:value="distanceValue" :min="-100" :max="100" />米
      </a-space>
    </div>
    <div class="f-mb">
      <a-space>
        <span class="mars-pannel-item-label">斜切偏移量</span>
        <mars-slider @change="deviation" v-model:value="deviationValue" :min="-10" :max="10" />
        <mars-input-number @change="txtDeviation" v-model:value="deviationValue" :min="-10" :max="10" />米
      </a-space>
    </div>
 
    <div class="f-tac"><mars-button @click="clear">清除</mars-button></div>
  </mars-pannel>
</template>
 
<script setup lang="ts">
import { ref } from "vue"
import * as mapWork from "./map.js"
 
const distanceValue = ref<number>(0)
const deviationValue = ref<number>(0)
 
// 绘制线
const drawLine = () => {
  mapWork.drawLine()
}
// 绘制矩形
const drawExtent = () => {
  mapWork.drawExtent()
}
// 绘制面
const drawPoly = () => {
  mapWork.drawPoly()
}
// 绘制面(外切)
const drawPoly2 = () => {
  mapWork.drawPoly2()
}
 
const distance = () => {
  mapWork.rangeDistance(distanceValue.value)
}
const txtDistance = () => {
  mapWork.rangeDistance(distanceValue.value)
}
 
const deviation = () => {
  mapWork.rangeNormalZ(deviationValue.value)
}
const txtDeviation = () => {
  mapWork.rangeNormalZ(deviationValue.value)
}
const clear = () => {
  mapWork.clear()
}
</script>
<style scoped lang="less">
.ant-slider {
  width: 100px;
}
.ant-input-number {
  width: 60px;
}
</style>