OpenLayers 6 基于Angular的Overlay定位失效及视口居中实现问题

问题表现 #

基于Angular开发的OpenLayers 6应用中，地图限定展示奥地利区域，开发了图层切换按钮，功能正常，但关联的Overlay模态框存在两个问题：

1. 调用overlay.setPosition()传入任意坐标都不生效，模态框始终固定在屏幕全局中央
2. 当地图缩放至奥地利区域时，模态框不在可视范围内，每次需要缩小地图才能看到弹窗

相关原始代码 #

TypeScript逻辑代码 #

onChangeLayer() {
    this.showLayerModel = true;

    const container = document.getElementById('popup-layer');
    const closer = document.getElementById('popup-closer-layer');

    /**
    * Create an overlay to anchor the popup to the map.
    */
    const overlay = new Overlay({
        element: container,
    });

    overlay.setPosition([14.12456, 47.59397]);

    this.map.addOverlay(overlay);

    var object = (document.getElementById("line") as HTMLTextAreaElement);

    const layerCollection = this.map.getLayers().getArray();

    object.addEventListener("change", function () {
        layerCollection.forEach((e) => {
            e.setVisible(object.value === e.get('title'))
        });
    });

    closer.onclick = function () {
        overlay.setPosition(undefined);
    }
}

HTML代码 #

<button type="button" class="roundedButton" style="margin-top: 20px; margin-left: 20px;" (click)="onChangeLayer()">
    Change layer
</button>
<div [hidden]="!showLayerModel" id="popup-layer" class="modal">
    <a href="#" id="popup-closer-layer" class="ol-popup-closer"></a>
    <div>
        <select id="line">
            <option value="first">First option</option>
            <option value="second">Second option</option>
        </select>
    </div>
</div>

CSS代码 #

.modal {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}

需求及踩坑记录 #

需要实现模态框始终显示在当前地图视口的中心，最初的实现代码如下，运行后模态框仅出现在视口右下角：

var extent = this.map.getView().calculateExtent(this.map.getSize());
    var extent = transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

    console.log(extent);

    overlay.setPosition(fromLonLat(extent)), this.map.getView().getProjection();


    this.map.addOverlay(overlay);  

最终解决方法 #

1. 修复setPosition不生效问题 #

• 坐标投影转换：OpenLayers默认使用EPSG:3857投影，传入的WGS84经纬度坐标需要先转换，修改定位代码为overlay.setPosition(fromLonLat([14.12456, 47.59397]))
• 清理冲突样式：移除CSS中.modal类的bottom: 12px; left: -50px;固定定位配置，如需调整弹窗和锚点的偏移，使用Overlay初始化时的offset参数配置

2. 实现模态框固定在视口中心 #

直接获取当前地图视图的中心坐标赋值给Overlay即可，代码如下：

overlay.setPosition(this.map.getView().getCenter());

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