如何修改OpenLayers视图的overflow属性以避免控件被裁剪？

问题现象 #

我给地图添加的控件被裁剪了，效果如下：

如果增加地图高度，控件就能完整显示：

我想要实现的是控件超出地图范围也能完整显示，效果如下：

控件被裁剪的核心原因是包裹所有地图元素的ol-viewport元素默认设置了overflow: hidden;。我查了OpenLayers的API和配置项，没找到官方提供的修改入口。虽然知道可以手动改样式，但不确定这个属性设为hidden的必要性，也怕改了之后影响地图功能，同时不清楚具体怎么操作。

代码示例 #

JavaScript #

const myControl = document.getElementById("my-control");
const osm = new ol.source.OSM();
osm.setTileGridForProjection(
  "EPSG:4326",
  ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);
const tileLayer = new ol.layer.Tile({ source: osm });
const map = new ol.Map({
  target: "map",
  layers: [tileLayer],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [-77.0231007567732604, 38.902979974562264],
    zoom: 3
  }),
  controls: ol.control.defaults.defaults({ attribution: false, zoom: false }),
});
ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);
const control = new ol.control.Control({ element: myControl })
map.getControls().extend([control])

CSS #

#map {
  height: 128px;
  width: 256px;
}
.control {
  top: 10px;
  left: 10px;
  width: 100px;
  height: 150px;
  background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(8,8,8,1) 80%, rgba(35,12,7,1) 80%, rgba(255,42,0,1) 90%, rgba(237,6,216,1) 90%);
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.5.2/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.5.2/dist/ol.min.js"></script>
<div id="map">
  <div id="my-control" class="ol-unselectable ol-control control">
    <div> H </div>
  </div>
</div>

解决方案 #

1. 为什么ol-viewport默认是overflow: hidden？ #

OpenLayers把这个属性设为hidden是为了限制地图的瓦片、矢量图形等内容只在地图容器内显示，避免地图交互（拖拽、缩放）时内容跑出容器，出现滚动条或者视觉混乱，保证地图的交互体验和视觉一致性。

2. 两种可行解决方式 #

方式一：把控件移到地图容器外（推荐）

直接把控件元素从#map容器里拿出来，放在同级的包裹容器中，用绝对定位关联到地图位置，这样完全不受ol-viewport的overflow限制，也不会影响地图功能。

修改后的完整代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.5.2/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.5.2/dist/ol.min.js"></script>
<!-- 添加包裹容器 -->
<div class="map-container">
  <div id="map"></div>
  <div id="my-control" class="ol-unselectable ol-control control">
    <div> H </div>
  </div>
</div>

.map-container {
  position: relative; /* 作为控件定位的参考 */
  width: 256px;
  height: 128px;
}
#map {
  width: 100%;
  height: 100%;
}
.control {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 150px;
  background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(8,8,8,1) 80%, rgba(35,12,7,1) 80%, rgba(255,42,0,1) 90%, rgba(237,6,216,1) 90%);
}

const myControl = document.getElementById("my-control");
const osm = new ol.source.OSM();
osm.setTileGridForProjection(
  "EPSG:4326",
  ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);
const tileLayer = new ol.layer.Tile({ source: osm });
const map = new ol.Map({
  target: "map",
  layers: [tileLayer],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [-77.0231007567732604, 38.902979974562264],
    zoom: 3
  }),
  controls: ol.control.defaults.defaults({ attribution: false, zoom: false }),
});
ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);
// 不需要再将控件添加到地图controls集合里

方式二：强制修改ol-viewport的样式

如果一定要在地图控件体系内实现，可以通过CSS强制覆盖ol-viewport的overflow属性，但要注意测试地图的交互功能：

.ol-viewport {
  overflow: visible !important;
}

这种方式可能导致地图瓦片在缩放、拖拽时超出容器范围，需要根据实际场景判断是否能接受。

内容的提问来源于stack exchange，提问作者Eric G