关于OpenLayers地图弹窗滚动globe一周后消失的技术咨询

这不是OpenLayers的既定规范，属于实现时未处理跨180度经线的坐标循环逻辑导致的问题。

问题原因 #

OpenLayers的矢量要素（你提到的图标）会自动重复渲染到视图可见的全球范围内，但Popup本质是ol.Overlay组件，它的定位依赖于视图的投影坐标。当你向右滚动地图绕 globe 一周后，视图中心的经度会偏移360度，而Popup的原始经度坐标未做循环调整，导致它的位置超出了当前视图的可见范围判断，因此被隐藏，但矢量要素因为地理坐标的循环渲染特性仍能正常显示。

解决方法 #

你需要手动监听视图的位置变化，调整Popup的经度坐标（加减360度），让它始终处于当前视图的可见范围内。示例代码如下：

// 假设已初始化Popup对应的Overlay实例
const overlay = new ol.Overlay({
  element: document.getElementById('popup'),
  positioning: 'bottom-center',
  offset: [0, -25]
});

// 监听视图中心变化事件，自动调整Popup坐标
map.getView().on('propertychange', (evt) => {
  if (evt.key !== 'center') return;
  
  const popupPos = overlay.getPosition();
  if (!popupPos) return;

  const [lon, lat] = popupPos;
  const [centerLon] = map.getView().getCenter();
  const lonDiff = lon - centerLon;

  // 根据经度差判断是否需要循环调整坐标
  if (lonDiff > 180) {
    overlay.setPosition([lon - 360, lat]);
  } else if (lonDiff < -180) {
    overlay.setPosition([lon + 360, lat]);
  }
});

补充说明 #

官方popup示例是点击触发显示，每次点击都会基于当前视图的坐标设置Popup位置，因此不会出现该问题。但如果是固定显示的Popup，就必须处理跨经线的坐标循环问题，确保Popup位置始终与当前视图范围匹配。

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