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