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
| <template>
| <el-dropdown
| class="fy-container dropdown-wrap"
| trigger="click"
| size="small"
| @command="handleCommand"
| >
| <el-button type="primary" class="el-button-custom">
| <el-icon class="el-icon--left"><TakeawayBox /></el-icon>
| 地图工具箱
| <el-icon class="el-icon--right"><arrow-down /></el-icon>
| </el-button>
| <template #dropdown>
| <el-dropdown-menu>
| <el-dropdown-item v-for="(item, index) in toolItem" :key="index" :command="index">
| <el-button :type="item.value ? 'primary' : 'info'" plain size="default">
| <font-awesome-icon :icon="item.icon" class="m-r-4" />
| {{ item.label + ': ' + (item.value ? '开' : '关') }}
| </el-button>
| </el-dropdown-item>
| </el-dropdown-menu>
| </template>
| </el-dropdown>
| </template>
|
| <script>
| import toolbox from '@/utils/map/toolbox';
| export default {
| data() {
| return {
| toolItem: [
| {
| icon: 'fa fa-map-signs',
| label: '地物标注',
| value: false,
| click: function () {
| this.value = !this.value;
| toolbox.toggleFeatures(this.value);
| }
| },
| {
| icon: 'fa fa-globe',
| label: '卫星地图',
| value: true,
| click: function () {
| this.value = !this.value;
| toolbox.toggleSatellite(this.value);
| }
| },
| {
| icon: 'fa fa-compass',
| label: '控制罗盘',
| value: true,
| click: function () {
| this.value = !this.value;
| toolbox.toggleControlbar(this.value);
| }
| },
| {
| icon: 'fa fa-compass',
| label: '坐标拾取',
| value: false,
| click: function () {
| this.value = !this.value;
| toolbox.toggleCoorPicking(this.value);
| }
| },
| {
| icon: 'fa fa-compass',
| label: '数据标记',
| value: true,
| click: function () {
| this.value = !this.value;
| // todo 数据标记
| }
| },
| {
| icon: 'fa fa-compass',
| label: '数据弹框',
| value: true,
| click: function () {
| this.value = !this.value;
| // todo 数据弹框
| }
| }
| ]
| };
| },
| methods: {
| handleCommand(command) {
| this.toolItem[command].click();
| }
| }
| };
| </script>
|
| <style scoped>
| .dropdown-wrap {
| position: absolute;
| top: 10px;
| left: 2px;
| }
|
|
|
| .el-button {
| margin: initial !important;
| }
| </style>
|
|
