Openlayers地图宽度非100%时Overlay autopan失效如何解决

OpenLayers v6版本中Overlay组件的autoPan逻辑存在边界计算bug：判断弹窗是否溢出地图可视区域时，默认将浏览器窗口的视口宽度作为地图容器宽度参与计算，没有读取地图实际挂载DOM节点的真实渲染宽度。
当地图容器宽度小于视口宽度（比如设置为60%宽）时，组件会错误判定弹窗右侧没有超出地图边界，不会触发地图平移动作，最终导致弹窗超出地图容器部分被截断。只有当地图宽度100%匹配视口宽度时，计算值和实际值一致，autoPan才能正常工作。

方案1：覆写panIntoView逻辑（无侵入，推荐） #

在弹窗Overlay初始化完成后，替换它的平移动作触发逻辑，计算边界前强制读取地图容器的真实宽高，替换默认的视口尺寸取值，不需要修改OpenLayers源码：

/**
 * 修复非满屏地图下Overlay autoPan失效问题
 * @param {ol.Overlay} overlay 弹窗实例
 * @param {ol.Map} map 地图实例
 */
const fixOverlayAutopan = (overlay, map) => {
  const originalPanMethod = overlay.panIntoView;
  overlay.panIntoView = function(panOptions = {}) {
    // 获取地图容器真实渲染尺寸
    const mapContainer = map.getTargetElement();
    const { width: realMapWidth, height: realMapHeight } = mapContainer.getBoundingClientRect();
    // 临时替换地图尺寸返回值为真实容器尺寸
    const originalGetSize = map.getSize.bind(map);
    map.getSize = () => [realMapWidth, realMapHeight];
    // 执行原有的平移逻辑
    originalPanMethod.call(this, {
      animation: { duration: 250 },
      margin: 16,
      ...panOptions
    });
    // 恢复原方法避免影响其他地图逻辑
    map.getSize = originalGetSize;
  }
};

// 初始化弹窗后调用修复方法即可
// fixOverlayAutopan(yourPopupOverlay, yourMapInstance)

方案2：配置固定padding兜底 #

如果不想修改实例方法，可以在初始化Overlay时，给autoPan配置右侧内边距，提前预留弹窗宽度对应的偏移量，触发平移时就会提前留出弹窗展示空间。该方案需要根据自身弹窗的实际宽度调整参数，适配灵活性较差：

const popupOverlay = new ol.Overlay({
  element: document.getElementById('popup'),
  autoPan: {
    animation: { duration: 250 },
    margin: 16,
    // 右侧padding设置为自身弹窗宽度+预留边距，例如弹窗宽300px可设置为320
    padding: [0, 320, 0, 0]
  }
});

将地图容器宽度设置为任意小于视口的比例，点击地图最右侧区域的点位触发弹窗时，地图会自动向左侧平移对应距离，保证弹窗完整展示在地图容器可视范围内，不会出现内容截断问题。

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