OpenLayers 2迁移至6版本全窗口覆盖弹窗实现方案咨询

最优方案为不依赖OpenLayers内置组件，直接创建独立于地图容器的固定定位DOM元素实现，完全不受地图视图坐标变换影响，实现逻辑更简单、效果更稳定。

1. 定义弹窗样式 #

.fullscreen-map-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 9999; /* 数值需高于地图容器默认z-index，OpenLayers默认地图z-index约为100 */
  display: none;
  /* 实现内容水平垂直居中 */
  align-items: center;
  justify-content: center;
  color: #000000;
}

2. 实现调用函数 #

// 初始化弹窗DOM元素
const popupEl = document.createElement('div');
popupEl.className = 'fullscreen-map-popup';
document.body.appendChild(popupEl);

// 显示弹窗函数，供C++侧调用，入参为要展示的文本
function showFullscreenPopup(text) {
  popupEl.innerHTML = `<h1>${text}</h1>`;
  popupEl.style.display = 'flex';
}

// 关闭/销毁弹窗函数，供C++侧调用
function hideFullscreenPopup() {
  popupEl.style.display = 'none';
  // 如需完全销毁元素可取消注释下方代码
  // popupEl.remove();
}

方案说明 #

OpenLayers 6的Overlay组件本质是绑定地理坐标的DOM容器，需要跟随地图视图变换调整位置，不适用于和地图坐标完全无关的全局全屏弹窗场景，使用原生DOM实现是最合理的选择。

内容的提问来源于stack exchange，提问作者appleton