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
102
103
104
105
106
107
108
109
110
111
112
<template>
  <mars-pannel :visible="true" right="10" top="10" width="280">
    <a-collapse v-model:activeKey="activeKey">
      <!-- 自定义切换图标 -->
      <template #expandIcon>
        <mars-icon icon="down-c" class="icon-vertical-a" />
      </template>
      <a-collapse-panel key="1" header="单个裁剪面">
        <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>
      </a-collapse-panel>
 
      <a-collapse-panel key="2" header="多个裁剪面">
        <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>
      </a-collapse-panel>
 
      <a-collapse-panel key="3" header="裁剪参数">
        <div style="width: 246px">
          <a-form-item label="裁剪距离">
            <a-space>
              <mars-slider @change="rangeDistance" v-model:value="distanceVal" :min="-20" :max="30" :step="1.0" />当前值{{ distanceVal }}
            </a-space>
          </a-form-item>
 
          <a-form-item label="斜切偏移量">
            <a-space>
              <mars-slider @change="rangeNormalZ" v-model:value="normalVal" :min="-10" :max="10" :step="0.1" />当前值{{ normalVal }}
            </a-space>
          </a-form-item>
        </div>
      </a-collapse-panel>
    </a-collapse>
 
    <mars-button @click="clear">清除</mars-button>
  </mars-pannel>
</template>
 
<script setup lang="ts">
import { ref } from "vue"
 
import * as mapWork from "./map.js"
 
const activeKey = ref(["1", "2", "3", "4"])
const distanceVal = ref<number>(0)
const normalVal = ref<number>(0)
 
const clear = () => {
  mapWork.clear()
}
 
// 距离
const rangeDistance = () => {
  mapWork.rangeDistance(distanceVal.value)
}
// 偏移量
const rangeNormalZ = () => {
  mapWork.rangeNormalZ(normalVal.value)
}
 
// 绘制线
const drawLine = () => {
  mapWork.drawLine()
}
 
// 绘制矩形
const drawExtent = () => {
  mapWork.drawExtent()
}
 
// 绘制面
const drawPoly = () => {
  mapWork.drawPoly()
}
 
// 绘制面(外切)
const drawPoly2 = () => {
  mapWork.drawPoly2()
}
</script>
<style scoped lang="less">
.infoView {
  width: 268px;
}
.ant-slider {
  width: 158px;
}
</style>