<template>
 <div class="vm">
  <h3 class="h-title">彈窗 popup</h3>
  <div id="map" class="map-x"></div>
  
  <!-- 彈窗元素 -->
  <div
   class="popup"
   ref="popup"
   v-show="currentCoordinate"
  >
   <span class="icon-close" @click="closePopup">&#10006;</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>