vue-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">✖</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>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。