场景

Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合：

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

在上面实现聚合效果之后，如果要实现点击聚合要素与单个要素时弹出不同的弹窗。

 注：

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

实现

1、首先实现点击要素弹窗的实现

可以参考如下

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

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

2、关键就是监听地图的单击事件并根据要素的个数分别弹窗显示不同的内容

        map.on('singleclick', function (evt) {
            if (feature) { //捕捉到要素
                if (feature.values_.features && feature.values_.features.length == 1) { //只有一个要素
                    console.log("进入单元素聚合");
                } else { //有多个要素                                                  
                    console.log("有多个要素");
                }
            } else {
                console.log("没有元素");
            }
        });

3、添加弹窗的标签

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

4、设置窗体的样式

5、获取到弹窗的节点DOM

        // 获取到弹框的节点DOM
        var container = document.getElementById("popup");
        var content = document.getElementById("popup-content");
        var closer = document.getElementById("popup-closer");

6、弹窗关闭事件

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

7、创建overlay对象并添加到地图

        // 创建一个弹窗 Overlay 对象
        var overlay = new ol.Overlay({
            element: container, //绑定 Overlay 对象和 DOM 对象的
            autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
            autoPanAnimation: {
                duration: 250 //自动平移效果的动画时间 9毫秒
            }
        });
        map.addOverlay(overlay);

8、其他都是加载离线瓦片地图的代码，完整示例代码

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