场景

Vue+Openlayer使用overlay实现弹窗弹出显示与关闭：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121268946

实现弹窗的效果可以参考上面。

要实现的效果是点击某个元素弹窗显示，并且弹窗随着元素的移动而移动。

实现元素移动的效果可以参考如下：

Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118635362

结合以上两个的效果

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、实现弹窗的代码基本同上，不同的是添加了一个布尔变量，控制是否显示弹窗

        var isShowDialog = false;
        let _that = this;
        map.on('singleclick', function (evt) {
            let coordinate = evt.coordinate
            // 点击尺 （这里是尺(米)，并不是经纬度）;
            var feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => {
                return feature;
            });
            if (feature) { //捕捉到要素
                content.innerHTML = `
                    
公众号：
                    
霸道的程序猿
`;
                _that.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标
                isShowDialog = true;
            } else {
                console.log("没有元素");
            }
        });

布尔变量的默认值为false，在地图的点击事件中，捕获到元素之后，将其设置为true。

2、然后定时器一直监测

            setTimeout(() => {
                if (isShowDialog) {
                    this.overlay.setPosition([Number(item.x), Number(item.y)]);
                }
            }, 0);

当布尔变量为true时，将overlay弹窗显示在当前坐标位置上。

这里的item.x是通过定时器模拟获取的后台坐标数据。

3、在弹窗的关闭事件中再将布尔变量设置为false

        //弹窗关闭事件
        closer.onclick = function () {
            _that.overlay.setPosition(undefined);
            closer.blur();
            isShowDialog = false;
            return false;
        };

4、完整示例代码

"en">


    "UTF-8">
    
    "stylesheet" href="lib/ol65/ol.css" type="text/css">
    



    
"map">
    
"popup" class="ol-popup">
        "#" id="popup-closer" class="ol-popup-closer">X
        
"popup-content" class="popup-content">