OpenLayers v6.1.1 中的奇怪溢出行为 ol.Overlay
Strange overflow behaviour in OpenLayers v6.1.1 ol.Overlay
我正在将 OpenLayers 用于学校项目。
在我的地图中，我将 GeoJSON 点特征加载为基础 mapbox 图层之上的 VectorLayer。这些点代表建筑物。单击这些点时，会显示一个 ol.Overlay 工具提示，其中包含建筑物的名称。
当工具提示在屏幕中央生成时，看起来很棒：
当我拖动地图使点靠近屏幕的右边缘时，工具提示防止内容溢出，非常整洁：
然而，当我尝试对屏幕的左边缘执行相同操作时，我没有得到这种行为，而是工具提示内容只是溢出：
假设用户单击靠近屏幕左 边缘的点。如果建筑物的名称很长，生成的工具提示将有一半从屏幕的左边缘溢出，这有点不和谐。
我可以知道我应该在 ol.Overlay 下设置什么属性来解决这个问题吗？
谢谢！
编辑 1：这是一个显示行为的 JSFiddle。尝试拖动地图，使工具提示靠近屏幕的左右两侧。 https://jsfiddle.net/meeps/kosx7w9d/4/
的确，是 CSS 造成的。
问题
当工具提示靠在屏幕右侧时，我们看到它有一个正左值。
这个 "pushes" 它靠在屏幕的右侧，因此当工具提示试图适应 left: 340px 和右侧之间时，文本换行通过减小宽度来缩小屏幕。
工具提示位于 left: 340px 和屏幕右侧之间 "squished"。
现在，我们在屏幕左侧显示了工具提示。请注意，它使用负左值 left: -63px 来实现离开屏幕左侧的外观。有了这个负值 "pulls" 可以说工具提示离开了屏幕。因此它不是 "squished"，甚至被拉到左边，因此它不会缩小宽度，只是离开屏幕。
解决方案
所以我们可以使用一个大的右值 right: 300px 将我们的工具提示推到屏幕的左侧并让它缩小宽度以适应。
您可能希望 JavaScript 检测何时使用 left: 以及何时使用 right: 值在用户拖动地图以获得所需行为时定位工具提示在工具提示上。
:D
我正在将 OpenLayers 用于学校项目。
在我的地图中，我将 GeoJSON 点特征加载为基础 mapbox 图层之上的 VectorLayer。这些点代表建筑物。单击这些点时，会显示一个 ol.Overlay 工具提示，其中包含建筑物的名称。
当工具提示在屏幕中央生成时，看起来很棒：
当我拖动地图使点靠近屏幕的右边缘时，工具提示防止内容溢出，非常整洁：
然而，当我尝试对屏幕的左边缘执行相同操作时，我没有得到这种行为，而是工具提示内容只是溢出：
假设用户单击靠近屏幕左 边缘的点。如果建筑物的名称很长，生成的工具提示将有一半从屏幕的左边缘溢出，这有点不和谐。
我可以知道我应该在 ol.Overlay 下设置什么属性来解决这个问题吗？
谢谢！
编辑 1：这是一个显示行为的 JSFiddle。尝试拖动地图，使工具提示靠近屏幕的左右两侧。 https://jsfiddle.net/meeps/kosx7w9d/4/
的确，是 CSS 造成的。
问题
这个 "pushes" 它靠在屏幕的右侧，因此当工具提示试图适应 left: 340px 和右侧之间时，文本换行通过减小宽度来缩小屏幕。
工具提示位于 left: 340px 和屏幕右侧之间 "squished"。
left: -63px 来实现离开屏幕左侧的外观。有了这个负值 "pulls" 可以说工具提示离开了屏幕。因此它不是 "squished"，甚至被拉到左边，因此它不会缩小宽度，只是离开屏幕。
解决方案
right: 300px 将我们的工具提示推到屏幕的左侧并让它缩小宽度以适应。
您可能希望 JavaScript 检测何时使用 left: 以及何时使用 right: 值在用户拖动地图以获得所需行为时定位工具提示在工具提示上。
:D