自定义控件与 OpenLayers 3 的相对定位

Question

我用 OpenLayers 3 构建的地图有一些按钮，这些按钮可能可用也可能不可用，具体取决于其他一些因素。所以我想隐藏不可用的按钮，其他人将使用他们的space。可用选项可能会发生变化，因此有时按钮可能会变得（不）可见。

有一些创建教程custom controls with OpenLayers 3。问题是我看到的所有示例都对控件使用绝对定位。需要知道有多少控件是可见的，并在 CSS 中硬编码坐标。或者使用 Javascript 更改坐标。即，从上面 link:

.rotate-north {
  top: 65px;
  left: .5em;
}

我曾尝试使用 position:relative 设置元素，但随后它们出现在地图下方，因为控件是在地图之后添加到页面中的。因此，可以使用负坐标的相对定位，但是如果地图大小发生变化，则必须在 Javascript.

中重写坐标

.ol-control.left-top {
  position: relative;
  top: -400px; /*map height*/
}

有没有一种方法可以优雅地使用 OpenLayers 3 实现相对定位的自定义控件，最好只使用 CSS？

我想我正在尝试获得与 Google Maps API:

中类似的功能

map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlDiv);

Answer 1

虽然 it is not a good solution for my use case, since it is not supported by Android 4.3 and earlier，但可以按照@Jonatas 的建议使用 CSS calc：

html:

<div class="parent">
  <div class="map"></div>
  <div class="control"><button>CONTROL</button></div>
</div>

css:

.map {
  width: 100%;
  height: calc(100vh - 2em);
  background-color: green;
}

.control {
  position: relative;
  left: .5em;
  top: calc(-100vh + 2em + .5em);
}

这可能必须使用视口单位 (also not supported by Android 4.3 and earlier)，因为 calc 只能计算基于父元素的值。

jsfiddle：https://jsfiddle.net/adlerhn/zjt53nmf/

自定义控件与 OpenLayers 3 的相对定位

Relative positioning of custom controls with OpenLayers 3

css-position

custom-controls

dynamic-ui

openlayers-3