Vue+Openlayer使用overlay实现弹窗弹出显示与关闭
场景
Vue+Openlayers实现地图上绘制线：
Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基础上实现点击地图，弹窗显示并获取点击处的坐标，并实现坐标转换经纬度。
效果
加载显示地图的流程
Vue中使用Openlayers加载Geoserver发布的TileWMS：
Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的博客-CSDN博客
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、页面上添加弹窗的元素
2、添加弹窗样式
3、导入相关模块
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import { Point,LineString } from "ol/geom";
import Feature from "ol/Feature";
import { Icon,Style,Stroke} from "ol/style";
//导入相关模块
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
import { toStringHDMS } from "ol/coordinate";
import { toLonLat } from "ol/proj";4、声明overlay与容器
overlay: null,
container: null, // 弹框5、在mounted中调用初始化地图的方法
mounted() {
this.initMap();
},在方法中获取到弹窗的节点DOM
// 获取到弹框的节点DOM
var container = document.getElementById("popup");
var content = document.getElementById("popup-content");
var closer = document.getElementById("popup-closer");然后创建一个弹窗Overlay对象
// 创建一个弹窗 Overlay 对象
this.overlay = new Overlay({
element: container, //绑定 Overlay 对象和 DOM 对象的
autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
autoPanAnimation: {
duration: 250 //自动平移效果的动画时间 9毫秒
}
});6、创建弹窗对象并将弹窗添加到地图中
this.map = new Map({
//地图容器ID
target: "map",
//引入地图
layers: [this.layer,this.lightLayer,this.houseLayer,this.lineLayer],
view: new View({
//地图中心点
center: [987777.93778, 213834.81024],
zoom: 12,
minZoom:6, // 地图缩放最小级别
maxZoom:19,
rotation: 0.76
}),
});
// 将弹窗添加到 map 地图中
this.map.addOverlay(this.overlay);7、监听地图的单击事件，在回调函数中获取坐标值并将内容赋值给dom
并且设置弹窗的位置就是当前鼠标点击的位置
// 将弹窗添加到 map 地图中
this.map.addOverlay(this.overlay);
//必须 要重新赋值this,不然再回调函数中指针会变，overlay会undefined
let _that = this;
// 监听singleclick事件
this.map.on('singleclick', function(e) {
let coordinate = e.coordinate
// 点击尺 （这里是尺(米)，并不是经纬度）;
let hdms = toStringHDMS(toLonLat(e.coordinate)); // 转换为经纬度显示
content.innerHTML = `
你点击了这里：
经纬度：
${hdms}
坐标：
X：${coordinate[0]} Y: ${coordinate[1]}`;
_that.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标
console.log(e.coordinate)
})8、这里尤其要注意的是，单击事件的回调方法中要对overplay设置其显示位置
这里不能再直接使用this.overplay.setPosition了，因为在回调函数中指针会变，
此时会提示overlay为undefined。所以先重新赋值再使用
let _that = this;
_that.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标7、设置弹窗关闭事件
将overlay对象的setPosition赋值为undefined即可隐藏。
//弹窗关闭事件
closer.onclick=function(){
_that.overlay.setPosition(undefined);
closer.blur();
return false;
};8、完整示例代码