时间戳

首页 > 解决方案 > Mapbox GL JS：使用变量锚向标签添加垂直偏移

mapbox-gl-js - Mapbox GL JS：使用变量锚向标签添加垂直偏移

问题描述

我正在尝试创建一个符号层，其中包含类似大头针的图标和在图标旁边显示的标签，如下所示。文本应该有一个可变锚点text-variable-anchor': ['right', 'left']，以便标签在与其他符号碰撞时移动到图标的另一侧。

现在的问题：因为图标是针形，我需要图标锚点位于底部（'icon-anchor': 'bottom'）。文本标签仍将自身定位到原始点，导致标签低于图标，如下所示。使用text-variable-anchor': ['right', 'left']该'text-offset'属性时停止工作，因此在保留变量锚点的同时向上移动标签文本似乎是不可能的。

我也尝试使用text-translate. 这可行，但是碰撞框不会相应地更新，这会导致标签相互碰撞。请注意，使用“圆形”图标不会有这个问题。圆形图标的图标锚点将位于中心，因此文本标签将完美地围绕标签定位。

使用带有 的图标时，有没有办法使用text-variable-anchor和调整标签文本的垂直位置'icon-anchor': 'bottom'？

标签： mapbox-gl-js

解决方案

当使用 text-variable-anchor': ['right', 'left'] 'text-offset' 属性停止工作

如果这是真的，那就是一个错误。这是要修复的：https ://github.com/mapbox/mapbox-gl-js/pull/8642

我也尝试使用文本翻译。这可行，但是碰撞框不会相应地更新，这会导致标签相互碰撞。

据说这也已修复：https ://github.com/mapbox/mapbox-gl-js/issues/8598

请注意，使用“圆形”图标不会有这个问题。圆形图标的图标锚点将位于中心，因此文本标签将完美地围绕标签定位。

您可以考虑的一种解决方法是通过在底部添加空白空间并使用中心锚来使您的图标居中。但是，它会导致标签冲突的其他问题。

推荐阅读