站长资源网络编程
vue-openlayers实现地图坐标弹框效果
简介本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码，供大家参考，具体内容如下openlayers这个效果是点击地图，弹出坐标信息。点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。
本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码，供大家参考，具体内容如下
openlayers
这个效果是点击地图，弹出坐标信息。
点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。
<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">"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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码，供大家参考，具体内容如下
openlayers
这个效果是点击地图，弹出坐标信息。
点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。
<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">"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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。