本文实例为大家分享了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