Home.vue
3.18 KB
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
<template>
<div class="home">
<el-button type="primary" class="basicbtn">放大</el-button>
<el-button type="primary" class="basicbtn">缩小</el-button>
<el-button type="primary" class="basicbtn">旋转</el-button>
<el-button type="primary" class="basicbtn">测量</el-button>
<el-button type="primary" class="basicbtn">垂直</el-button>
<el-button type="primary" class="basicbtn">地形</el-button>
<el-button type="primary" class="basicbtn">地面</el-button>
<el-button type="primary" class="analysisbtn">可视域分析</el-button>
<el-button type="primary" class="analysisbtn">淹没分析</el-button>
<el-button type="primary" class="analysisbtn">日照分析</el-button>
<el-button type="primary" class="analysisbtn">等高线分析</el-button>
<el-button type="primary" class="analysisbtn">流向分析</el-button>
<div class="content">
<Map class="map" ref="myMap"></Map>
</div>
</div>
</template>
<script>
import Map from "../components/map/Map";
import maps from "../assets/js/map/mapUtils";
import action from "../assets/js/map/action";
export default {
components: {Map},
data() {
return {
acfunc: ['zoomIn', 'zoomOut', 'rotate', 'measure', 'vertical', 'terrain', 'plane'],
pafunc: ['visual', 'flood', 'sunshine', 'contour', 'flowto']
}
},
methods: {
Initialization() {
Array.prototype.slice.call(document.querySelectorAll(".basicbtn")).forEach((e, i) => {
e.i = i;
e.addEventListener('click', ev => {
this.action(this.acfunc[ev.target.i]);
});
});
Array.prototype.slice.call(document.querySelectorAll(".analysisbtn")).forEach((e, i) => {
e.i = i;
e.addEventListener('click', ev => {
this.panel(this.pafunc[ev.target.i]);
});
});
},
action(i) {
let obj = action.attribute[i], func = obj.func.split("."),
args = obj.args, a = args[0], b = args[1];
args.length > 1 ? maps.sgWorld[func[0]][func[1]](a, b) : maps.sgWorld[func[0]][func[1]](a);
},
panel(a) {
maps.popups[a].ShowCaption = false;
maps.sgWorld.Window.ShowPopup(maps.popups[a]);
}
}
}
</script>
<style scoped lang="scss">
#home {
// width: 100%;
// height: 100%;
// background: url(~Static/img/bg.png) no-repeat center center;
// background-color: #212121;
// background-size: 100% 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow: hidden;
position: relative;
width: 1860px;
height: 870px;
#map {
position: absolute;
top: 4px;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
}
</style>