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
| <template>
| <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show">
| <div class="mapTool">
| <div class="tool-rotate" @click="flyBack" title="复位">
| <img src="@/assets/img/collection/recover.png" />
| </div>
| </div>
| <div class="mapTool" v-show="test.fwval">
| <div class="tool-rotate" @click="zoomIn" title="放大">
| <img src="@/assets/img/collection/add.png" />
| </div>
| <div class="border"></div>
| <div class="tool-rotate" @click="zoomOut" title="缩小">
| <img src="@/assets/img/collection/reduce.png" />
| </div>
| </div>
| </div>
| </template>
|
| <style scoped>
| .mapTool {
| border-radius: 10px;
| background: #ffffff;
| margin-bottom: 8px;
| }
|
| .border {
| border: 0.5px solid #efecec;
| }
|
| .tool-rotate {
| padding: 8px;
| }
|
| .tool-rotate img {
| width: 20px;
| height: 20px;
| }
| </style>
|
| <script>
| import Bus from "../../js/bus.js";
| import store from "@/utils/store2";
| export default {
| props: ["test"],
| data() {
| return {
| state1:store.mapTools,
| state: store.layerPanel,
| customStyle: {
| position: "absolute",
| bottom: "0.4rem",
| right: "0.1rem",
| },
| };
| },
| mounted() {},
| watch: {
| "state.show": {
| handler(newVal) {
| if (newVal) {
| this.customStyle = {
| position: "absolute",
| top: "2rem",
| right: "0.1rem",
| };
| } else {
| this.customStyle = {
| position: "absolute",
| bottom: "0.4rem",
| right: "0.1rem",
| };
| }
| },
| immediate: true,
| },
| },
| methods: {
| zoomIn() {
| const view = window.mapapi.getView();
| const zoom = view.getZoom();
| window.mapapi.getView().animate({
| // 只设置需要的属性即可
| center: window.mapapi.getView().getCenter(), // 中心点
| zoom: zoom + 1, // 缩放级别
| rotation: undefined, // 缩放完成view视图旋转弧度
| duration: 1000, // 缩放持续时间，默认不需要设置
| });
| },
| zoomOut() {
| const view = window.mapapi.getView();
| const zoom = view.getZoom();
| window.mapapi.getView().animate({
| // 只设置需要的属性即可
| center: window.mapapi.getView().getCenter(), // 中心点
| zoom: zoom - 1, // 缩放级别
| rotation: undefined, // 缩放完成view视图旋转弧度
| duration: 1000, // 缩放持续时间，默认不需要设置
| });
| },
| flyBack() {
| window.mapapi.getView().animate({
| // 只设置需要的属性即可
| center: [116.52217697339846, 39.75979421847914], // 中心点
| zoom: 12, // 缩放级别
| rotation: undefined, // 缩放完成view视图旋转弧度
| duration: 1000, // 缩放持续时间，默认不需要设置
| });
| },
| },
| };
| </script>
|
|
