openlayers - OpenLayers 6 - 覆盖定位不起作用

Question

我在我的 OpenLayers 应用程序中面临以下问题（基于 Angular）：

我有一张仅限于奥地利的地图。我创建了一个按钮，用户可以使用它来更改图层。

该功能工作正常，但模态叠加层总是在我的页面中间，因为它被缩放到所需的国家/地区，所以根本不可见：

我总是必须先缩小才能看到我的模态窗口。

这是我的代码：

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);
    }
}

我给出的 overlay.setPosition() 并不重要，模态总是在屏幕的中间。

<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>


.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);  

但这会将模式定位在给定视图的右下角：

啊，好的。这里的答案是：

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

标签： openlayersopenlayers-6