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
| <template>
| <div class="mapViewer">
| <leftpanel ref="Left" v-show="false" />
| <viewer class="mapViewer" />
| <!-- <img id="headlog" src="@/assets/img/new/logo.png" /> -->
| </div>
| </template>
|
| <script>
| import viewer from "@/components/map/viewer";
| import leftpanel from "@/components/left/index";
| // import bottommenu from "@/components/menu/bottom-menu";
|
| export default {
| name: "index",
| components: {
| viewer,
| leftpanel,
| // bottommenu,
| },
| data() {
| return {
| size: "100%",
| scale: "1",
| offset: "0%",
| tooltipInfo: "请稍后。。。",
| tooltipShow: false,
| };
| },
| mounted() {
| let size = this.detectZoom();
| this.scale = (100 / size).toFixed(2);
| this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
| this.size = size + "%";
| },
|
| watch: {},
| methods: {
| detectZoom() {
| var ratio = 0,
| screen = window.screen,
| ua = navigator.userAgent.toLowerCase();
| if (window.devicePixelRatio !== undefined) {
| ratio = window.devicePixelRatio;
| } else if (~ua.indexOf("msie")) {
| if (screen.deviceXDPI && screen.logicalXDPI) {
| ratio = screen.deviceXDPI / screen.logicalXDPI;
| }
| } else if (
| window.outerWidth !== undefined &&
| window.innerWidth !== undefined
| ) {
| ratio = window.outerWidth / window.innerWidth;
| }
|
| if (ratio) {
| ratio = Math.round(ratio * 100);
| }
| return ratio;
| },
| },
| };
| </script>
| <style scoped>
| .mapViewer {
| height: 100%;
| }
| #headlog {
| width: 500px;
| position: absolute;
| left: 20px;
| top: 20px;
| }
| </style>
|
|
