Mapbox-gl - 如何允许文本/图标重叠而不导致文本混合？

【问题标题】：Mapbox-gl - How can I allow text/icon overlap without causing text mixtures?Mapbox-gl - 如何允许文本/图标重叠而不导致文本混合？
【发布时间】：2022-01-09 21:04:50
【问题描述】：

click here to see the issue with the text overlap

文字相互重叠（点击上面的图片链接）。

"mapbox-gl": "^2.4.1",

层：

{
      type: 'symbol',
      layout: {
        'text-field': '{nextShow}',
        'icon-image':'assets/map/queue-bubble.png',
        'icon-allow-overlap': true,
        'icon-ignore-placement': true,
        'text-allow-overlap': true,
      },
      paint: {
        'icon-translate': [-25, -25],
        'text-translate': [-28, -28],
        'text-color': 'black',
        'text-halo-color': 'white',
        'text-halo-blur': 1,
        'text-halo-width': 5,
      }
    }

谢谢。

【问题讨论】：

标签： mapbox mapbox-gl

【解决方案1】：

您可以将symbol-z-order 的顺序设置为"source"，然后使用您的列表index 用symbol-sort-key 重新排列您的标记

在你的例子中：

{
      type: 'symbol',
      layout: {
        'text-field': '{nextShow}',
        'icon-image':'assets/map/queue-bubble.png',
        'icon-allow-overlap': true,
        'icon-ignore-placement': true,
        'text-allow-overlap': true,
        'symbol-z-order': 'source', // to order by symbol-sort-key
        'symbol-sort-key': ['get', 'index'], //index should be defined in source feature properties
      },
      paint: {
        'icon-translate': [-25, -25],
        'text-translate': [-28, -28],
        'text-color': 'black',
        'text-halo-color': 'white',
        'text-halo-blur': 1,
        'text-halo-width': 5,
      }
    }

【讨论】：