【vue-openlayers】弹窗

微信订阅号：Rabbit_svip

微信订阅号：Rabbit_svip

这个效果是点击地图，弹出坐标信息。

点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。

<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>

用法请看代码注释，如基础部分不清楚，可以查看【vue-openlayers】Hello Openlayers

点击获取本例源码（可关注码云长期更新）