本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码，供大家参考，具体内容如下
这个效果是点击地图，弹出坐标信息。
点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。
|
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
|
<template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="map-x"></div> <!-- 弹窗元素 --> <div class="popup" ref="popup" v-show="currentCoordinate" > <span class="icon-close" @click="closePopup">✖</span> <div class="content">{{currentCoordinate}}</div> </div> </div></template> <script>import 'ol/ol.css'import { Map, View } from 'ol'import Tile from 'ol/layer/Tile'import OSM from 'ol/source/OSM'import { toStringHDMS } from 'ol/coordinate'import { toLonLat } from 'ol/proj'import Overlay from 'ol/Overlay' export default { name: 'Popup', data () { return { map: null, currentCoordinate: null, // 弹窗坐标数据 overlay: null } }, methods: { initMap () { // 弹窗 this.overlay = new Overlay({ element: this.$refs.popup, // 弹窗标签，在html里 autoPan: true, // 如果弹窗在底图边缘时，底图会移动 autoPanAnimation: { // 底图移动动画 duration: 250 } }) // 实例化地图 this.map = new Map({ target: 'map', layers: [ new Tile({ source: new OSM() // 使用OSM底图 }) ], overlays: [this.overlay], // 把弹窗加入地图 view: new View({ center: [-27118403.38733027, 4852488.79124965], // 北京坐标 zoom: 12 // 地图缩放级别（打开页面时默认级别） }) }) this.mapClick() // 初始化地图成功后，给地图添加点击事件 }, mapClick () { // 地图点击事件 // 通过 map.on() 监听，singleclick 是单击的意思。也可以用 click 代替 singleclick。 this.map.on('singleclick', evt => { const coordinate = evt.coordinate // 获取坐标 const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式 this.currentCoordinate = hdms // 保存坐标点 setTimeout(() => { // 设置弹窗位置 // 这里要设置定时器，不然弹窗首次出现，底图会跑偏 this.overlay.setPosition(coordinate) }, 0) }) }, // 关闭弹窗 closePopup () { // 把弹窗位置设置为undefined，并清空坐标数据 this.overlay.setPosition(undefined) this.currentCoordinate = null } }, mounted () { this.initMap() }}</script> <style lang="scss" scoped> /* 弹窗样式 */ .popup { min-width: 280px; position: relative; background: #fff; padding: 8px 16px; display: flex; flex-direction: column; transform: translate(-50%, calc(-100% - 12px)); /* 弹窗下方的小三角形 */ &::after { display: block; content: ''; width: 0; height: 0; position: absolute; border: 12px solid transparent; border-top-color: #fff; bottom: -23px; left: 50%; transform: translateX(-50%); } } /* 关闭弹窗按钮 */ .icon-close { cursor: pointer; align-self: flex-end; margin-bottom: 10px; }</style> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/ANNENBERG/article/details/107199318
