3、Vue3.0 实现一个简单的气泡弹窗

一、Map

Map是OpenLayers的核心组件。要渲染地图需要一个View，一个或多个layers以及一个目标容器target。

3、Vue3.0实现一个简单的气泡弹窗.png

二、定义Overlay

Overlay是要在地图上显示并附加到单个地图位置的元素。像一样module:ol/control/Control~Control，叠加层是可见的小部件。与“控件”不同，它们不在屏幕上的固定位置，而是绑定到地理坐标，因此平移地图将移动“叠加层”，但不会移动“控件”。

   var overlay = new Overlay({
        element: popupContainer.value,
        autoPan: true,
        autoPanAnimation: {
          duration: 250,
        },
      });

三、添加Overlay

点击地图获取到屏幕坐标e.coordinate，通过 toLonLat将屏幕坐标转换成地理坐标，然后将地理坐标与Overlay绑定，并添加到Map上面。

 map.on("singleclick", function (e) {
        let coordinate = toLonLat(e.coordinate);
        popupContent.value.innerHTML =
          "<p style='font-size:14px;font-weight:bold;'>关注星星编程微信公众号</p><p style='font-size:12px;margin-top:10px;text-align: left;'>当前经度：" +
          coordinate[0] +
          "</p>" +
          "<p style='font-size:12px;text-align: left;'>当前纬度：" +
          coordinate[1] +
          "</p>";
        overlay.setPosition(e.coordinate);
        map.addOverlay(overlay);
      });

四、关闭弹窗

将Overlay绑定的地理坐标置为undefined，popupCloser Dom元素失去焦点，从而达到关闭弹窗的效果。

     popupCloser.value.addEventListener("click", function () {
        overlay.setPosition(undefined);
        popupCloser.value.blur();
        return false;
      });