3

我使用 OpenLayers 3 构建的地图有一些按钮，这些按钮可能可用也可能不可用，具体取决于其他一些事情。所以我想隐藏不可用的按钮，其他人会使用他们的空间。可用选项可能会更改，因此有时按钮可能会变得（不）可见。

有一些使用 OpenLayers 3 创建自定义控件的教程。问题是我见过的所有样本都使用绝对定位来控制控件。需要知道有多少控件是可见的，并在 CSS 中对坐标进行硬编码。或使用 Javascript 更改坐标。即，从上面的链接：

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

1 回答 1

2

尽管对于我的用例来说这不是一个好的解决方案，因为它不受 Android 4.3 及更早版本的支持，但可以按照@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);
}

这可能必须使用视口单位（Android 4.3 及更早版本也不支持），因为 calc 只能根据父元素计算值。

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

于 2016-06-20T11:45:33.007 回答