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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| <template>
| <mars-pannel :visible="true" right="10" top="10">
| <mars-gui :options="options" labelCol="1" ></mars-gui>
| </mars-pannel>
| </template>
|
| <script setup lang="ts">
| import * as mapWork from "./map.js"
| import { useWidget } from "@mars/widgets/common/store/widget"
| import type { GuiItem } from "@mars/components/mars-ui/mars-gui"
| const { activate, disable } = useWidget()
|
| const options: GuiItem[] = [
| {
| type: "checkbox",
| field: "button",
| label: "按钮",
| value: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
| change(data) {
| chooseButton(data)
| },
| data: [
| {
| label: "POI搜索",
| value: "1"
| },
| {
| label: "视角复位",
| value: "2"
| },
| {
| label: "二三维切换",
| value: "3"
| },
| {
| label: "地图切换",
| value: "4"
| },
| {
| label: "全屏切换",
| value: "5"
| },
| {
| label: "VR模式",
| value: "6"
| },
| {
| label: "帮助",
| value: "7"
| },
| {
| label: "地图缩放",
| value: "8"
| },
| {
| label: "图层控制",
| value: "9"
| }
| ]
| },
| {
| type: "checkbox",
| field: "pannel",
| label: "面板",
| value: ["1", "2", "3", "4", "5"],
| change(data) {
| choosePannel(data)
| },
| data: [
| {
| label: "位置信息状态栏",
| value: "1"
| },
| {
| label: "时钟面板（左下角）",
| value: "2"
| },
| {
| label: "导航球",
| value: "3"
| },
| {
| label: "时间刻度线",
| value: "4"
| },
| {
| label: "比例尺",
| value: "5"
| }
| ]
| }
| ]
|
| // 按钮
| const chooseButton = (data) => {
| mapWork.bindPOI(findValue(data, "1"))
| mapWork.bindView(findValue(data, "2"))
| mapWork.bindSceneModePicker(findValue(data, "3"))
| mapWork.bindBaseLayerPicker(findValue(data, "4"))
| mapWork.bindFullScreen(findValue(data, "5"))
| mapWork.bindVR(findValue(data, "6"))
| mapWork.bindHelpButton(findValue(data, "7"))
| mapWork.bindZoom(findValue(data, "8"))
| onBindLayer(findValue(data, "9"))
| }
|
| // 面板
| const choosePannel = (data) => {
| mapWork.bindLocation(findValue(data, "1"))
| mapWork.bindClock(findValue(data, "2"))
| mapWork.bindNav(findValue(data, "3"))
| mapWork.bindTimeLine(findValue(data, "4"))
| mapWork.bindLegend(findValue(data, "5"))
| }
|
| const findValue = (data, index) => {
| return data.find((item) => {
| return item === index
| })
| }
|
| const onBindLayer = (e) => {
| if (e) {
| activate("tools-button")
| } else {
| disable("tools-button")
| }
| }
| </script>
|
|
