【vue-openlayers】弹窗

<template>
  <div class="vm">
    <div class="map-x" ref="map"></div>
  </div>
</template>
<script>
import 'ol/ol.css' // 引入ol提供的基础样式
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ' // 引入XYZ地图格式
import Overlay from 'ol/Overlay' // ol提供的弹窗所需要素
import { toStringHDMS } from 'ol/coordinate'
import { toLonLat } from 'ol/proj'
  
export default {
  name: 'Popup',
  data() {
    return {
      map: null,
      overlay: null,
      currentCoordinate: ''
    }
  },
  methods: {
    initMap() {
      // 弹窗要素
      this.overlay = new Overlay({
        element: this.$refs.popup, // 弹窗标签，在html里
        autoPan: true, // 如果弹窗在底图边缘时，底图会移动
        autoPanAnimation: { // 底图移动动画
          duration: 250
        }
      })
      // 实例化地图
      this.map = new Map({
        target: this.$refs.map, // 选中目标元素
        layers: [ // 渲染图层
          new Tile({
            name: 'defaultLayer',
            source: new XYZ({
              url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        overlays: [this.overlay], // 把弹窗加入地图
        view: new View({
          projection: 'EPSG:4326', // 投影系
          center: [113.1206, 23.034996], // 初始化中心点
          zoom: 12 // 地图缩放级别（打开页面时默认级别）
        })
      })
      this.mapClick()
    },
    // 地图点击事件
    mapClick() {
      // 给地图绑定一个单击事件
      this.map.on("singleclick", evt => {
        const coordinate = evt.coordinate // 获取坐标
        const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式
        this.currentCoordinate = hdms // 保存坐标点
        this.overlay.setPosition(coordinate) // 设置弹窗
      })
    },
    // 关闭弹窗
    closePopup () {
      this.overlay.setPosition(undefined)
      this.currentCoordinate = null
    }
  },
  mounted () {
    this.initMap()
  }
}
</script>
<style lang="scss" scoped></style>