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>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.