vue-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">✖</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--color: #fff;
   bottom: -23px;
   left: 50%;
   transform: translateX(-50%);
  }
 }
 / 关闭弹窗按钮 /
 .icon-close {
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 10px;
 }
</style>