避免在 Mapbox GL JS 中对符号进行文本剪辑
Avoid text clipping of symbols in Mapbox GL JS
我已经定义了一些具有文本属性的符号作为其他一些符号的标签。使用文本晕 属性 我试图为文本制作背景。然而，当缩小时，文本开始剪裁并且变得非常不可读。示例如下：
这四个符号的布局定义如下：
'text-font': ['Open Sans Regular'],
'text-field': '{metadata}',
'symbol-placement': 'point',
'text-size': 20,
'text-allow-overlap': true,
'text-offset': [0, -2],
'text-anchor': 'top'
和符号的油漆属性：
'text-halo-color': '#fff',
'text-halo-width': 5
我希望顶部的标签完全覆盖其他标签，就像 CSS 中 z-index 的行为一样。有任何想法吗？我已经尝试了所有可能 属性 值的十几种组合，但似乎找不到任何东西。
如您所见，首先绘制所有光晕，然后绘制文本。所以光晕永远不会覆盖另一层的文本。此行为是有意的，并且已被讨论 here。
明显的解决方法是不使用 text-allow-overlap，并找到一些其他解决方案来解决您试图使用它解决的任何问题。
我已经定义了一些具有文本属性的符号作为其他一些符号的标签。使用文本晕 属性 我试图为文本制作背景。然而，当缩小时，文本开始剪裁并且变得非常不可读。示例如下：
这四个符号的布局定义如下：
'text-font': ['Open Sans Regular'],
'text-field': '{metadata}',
'symbol-placement': 'point',
'text-size': 20,
'text-allow-overlap': true,
'text-offset': [0, -2],
'text-anchor': 'top'
和符号的油漆属性：
'text-halo-color': '#fff',
'text-halo-width': 5
我希望顶部的标签完全覆盖其他标签，就像 CSS 中 z-index 的行为一样。有任何想法吗？我已经尝试了所有可能 属性 值的十几种组合，但似乎找不到任何东西。
如您所见，首先绘制所有光晕，然后绘制文本。所以光晕永远不会覆盖另一层的文本。此行为是有意的，并且已被讨论 here。
明显的解决方法是不使用 text-allow-overlap，并找到一些其他解决方案来解决您试图使用它解决的任何问题。