全屏控制 openlayers 地图中的位置

Question

我创建了一个添加了全屏控件的 openlayers 地图。默认情况下，它们位于右上角，但我希望它们位于右下角。我的 html 中的 division 包含具有以下代码的地图：

<div id="map"></div>
<script src="map.js"></script>

它链接到具有以下代码的 javascript 文件（为了便于阅读，我省略了一些代码）：

var map = new ol.Map ({
  target: document.getElementById('map'),
  layers: ...,
  view: ...,
  controls: ...,
    new ol.control.FullScreen(),
    })
 ])
});

最后我有一个 css 文件，它设置了 div 的样式并且还应该将全屏控件移动到右下角：

#map {
  position: fixed;
  height: 100%;
  width: 100%;
}
.ol-full-screen {
  position: absolute;
  right: 10px;
  bottom 0px;
}

在 css 代码片段中，我将 position: fixed 用于地图，并尝试通过为它们分配绝对位置来定位全屏控件，但这不起作用。控件不会对 bottom 位置做出反应，但它们会对 left、right 和 top 位置做出反应。我还尝试将地图设置为相对的，将控件设置为绝对的（对于 div 内的 div 应该是这样工作的），但这也没有带来预期的结果。相反，地图不再填满整个浏览器窗口，控件仍然无法移动到底部。

Answer 1

ol.css中的默认设置是

.ol-full-screen {
  right: .5em;
  top: .5em;
}

所有控制按钮的高度都是 1.375em

因此右下角的顶部锚定按钮将是

.ol-full-screen {
  right: .5em;
  top: calc(100% - 2.375em);
}

全屏控制 openlayers 地图中的位置

Fullscreen controls position in openlayers map

html

css

openlayers