openlayers - OpenLayers v6.1.1 ol.Overlay 中的奇怪溢出行为

Question

我正在将 OpenLayers 用于学校项目。

在我的 map 中，我将 GeoJSON 点要素作为 VectorLayer 加载到基础 mapbox 图层之上。这些点代表建筑物。单击这些点时，会显示一个 ol.Overlay 工具提示，其中包含建筑物的名称。

当工具提示在屏幕中央生成时，看起来很棒:

当我拖动 map ，使该点靠近屏幕的右边缘时，工具提示会防止内容溢出，这非常简洁:

但是，当我尝试对屏幕的左边缘执行相同操作时，我没有得到此行为，而是工具提示内容只是溢出:

假设用户要单击靠近屏幕左边缘的点。如果建筑物的名称很长，则生成的工具提示将有一半溢出屏幕的左边缘，这有点刺耳。

我可以知道应该在 ol.Overlay 下设置哪些属性来解决此问题吗？

谢谢!

编辑 1:这是一个显示行为的 JSFiddle。尝试拖动 map ，使工具提示位于屏幕的右侧和左侧附近。 https://jsfiddle.net/meeps/kosx7w9d/4/

Answer 1

确实，这是 CSS 造成的。

问题

当工具提示位于屏幕右侧时，我们看到它有一个正的左值。

这“推”它靠在屏幕的右侧，因此当工具提示试图适应left:340px和屏幕右侧之间时，文本会换行。通过减小宽度来屏幕。

工具提示被“挤压”在 left: 340px 和屏幕右侧之间。

现在，我们的工具提示位于屏幕左侧。请注意，它使用负左值 left: -63px 来实现离开屏幕左侧的外观。可以说，有了这个负值就会“拉”工具提示离开屏幕。因此，它不会被“压扁”，甚至会被拉到左侧，因此它不会缩小其宽度，只是会离开屏幕。

解决方案

因此，我们可以使用较大的右侧值 right: 300px 将工具提示插入屏幕左侧，并使其宽度缩小以适应。

您希望让 JavaScript 检测何时使用 left: 以及何时使用 right: 值，以便在用户拖动 map 以获取工具提示时定位工具提示。工具提示上所需的行为。

:D