Question

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

<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(),
    })
 ])
});

最后我有一个样式为div的css文件，还应该将全屏控件移到右下角：

#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地图中的位置

1 个答案: