Vue+Openlayer 创建气泡弹窗

import Overlay from "ol/Overlay";
import { toStringHDMS } from "ol/coordinate";

• 首先需要一个HTML元素容器来放置弹窗内容

    <!-- 弹窗元素 -->
    <div class="popup" ref="popup" v-show="displayValue">
      <span class="icon-close" @click="closePopup">关闭</span>
      <div class="content">{{ displayValue }}</div>
    </div>

• 在地图（Map对象）初始化后，添加弹窗

 // 弹窗
      this.elementDialog = new Overlay({
        element: this.$refs.popup, // 弹窗标签，在html里
        autoPan: true, // 如果弹窗在底图边缘时，底图会移动
        autoPanAnimation: {
          // 底图移动动画
          duration: 250
        }
      });

      this.map.addOverlay(this.elementDialog);

• 设置地图点击事件:

mapSingleClick() {
      // 通过 map.on() 监听，singleclick 是单击的意思。也可以用 click 代替 singleclick。
      this.map.on("singleclick", evt => {
        const coordinate = evt.coordinate; // 获取坐标
        const hdms = toStringHDMS(toLonLat(coordinate)); // 转换坐标格式

        this.displayValue = hdms; // 保存坐标点

        setTimeout(() => {
          // 设置弹窗位置
          // 这里要设置定时器，不然弹窗首次出现，底图会跑偏
          this.elementDialog.setPosition(coordinate);
        }, 0);
      });
    },

• CSS：

.popup {
  min-width: 280px;
  position: relative;
  background: rgb(46, 233, 8);;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, calc(-100% - 12px));
}
.icon-close {
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 10px;
}

QQ群（GIS开发交流、数据共享、软件使用）：993836992