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
| <template>
| <div class="specialTool">
| <div id="scroll" class="scroll_div">
| <ul>
| <li
| v-for="item in romanOption"
| :key="item.name"
| @click="setRomanFly(item)"
| >
| {{ item.name }}
| </li>
| </ul>
| </div>
| </div>
| </template>
|
| <style scoped>
| .specialTool {
| position: absolute;
| bottom: 60px;
| /* width: 135px; */
| height: 40px;
| color: #fff;
| left: 50%;
| margin-left: -63px;
| z-index: 99999;
| pointer-events: all;
| }
|
| .specialTool i {
| display: inline-block;
| width: 55px;
| height: 55px;
| background: rgba(0, 0, 0, 0.4);
| border-radius: 30px;
| margin-right: 10px;
| text-align: center;
| line-height: 55px;
| font-size: 23px;
| cursor: pointer;
| box-shadow: 0px 0px 5px 3px #fff;
| /* box-shadow: 0px 0px 5px 5px #fff; */
| }
| .specialTool i:hover {
| box-shadow: 0px 0px 5px 3px rgba(0, 168, 255, 0.16);
| }
| .top-btn-active {
| background: #0987ff !important;
| }
| .scroll_div {
| background: rgba(0, 0, 0, 0.4);
| padding: 5px;
| border-radius: 5px;
| bottom: 50px;
| position: absolute;
| right: 0px;
| display: none;
| }
| .scroll_div li {
| padding: 10px;
| }
| .scroll_div li:hover {
| color: #0987ff;
| }
| </style>
|
| <script>
| import { roman } from "../../assets/json/index.js";
| export default {
| components: {},
| name: "bottom-menu",
| data() {
| return {
| romanOption: [
| { name: "核心区" },
| { name: "景观绿地" },
| { name: "政务服务" },
| ],
| showFlag: false,
| };
| },
|
| methods: {
| setRomanFly(result) {
| this.showFlag = false;
| document.getElementById("scroll").style.display = "none";
| var val = roman.filter((res) => {
| if (res.name == result.name) {
| return res;
| }
| });
| var degreesArr = val[0].value;
| sgworld.Creator.getFlyData(degreesArr, (data) => {
| data.showPoint = false;
| data.showLine = true;
| data.mode = 1;
| // 弹窗数据
| window.PathAnimationData = {
| flyData: data,
| };
| window.PathAnimationData.winIndex = layer.open({
| type: 2,
| title: "路径动画",
| shade: false,
| area: ["352px", "690px"],
| offset: "r",
| skin: "other-class",
| content: SmartEarthRootUrl + "Workers/path/Path.html",
| end: function () {
| PathAnimationData.fly && PathAnimationData.fly.exit();
| },
| });
| });
| },
| },
| };
| </script>
|
|
