如何在mapbox-gl中为图层文本字段添加背景颜色

Question

如何在mapbox-gl中为图层文本字段添加背景颜色..或者如何做到这样才能在文本字段上有背景框

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

Answer 1

虽然我也不知道如何绘制背景框，但我们可能正在寻找相同的东西，即遮盖自定义标签下方的任何其他文本，以便它弹出并且更清晰。如果是这样，我确实发现你可以添加一个“光环”来达到预期的效果。

"layout": {
                "icon-image": symbol + "-15",
                "icon-allow-overlap": true,
                "text-field": symbol,
                "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
                "text-size": 11,
                "text-transform": "uppercase",
                "text-letter-spacing": 0.05,
                "text-offset": [0, 1.5]
            },
            "paint": {
                "text-color": "#202",
                "text-halo-color": "#fff",
                "text-halo-width": 2
            },

这取自他们网站上的这个示例。

Answer 2

这已经晚了几年了，但我遇到了同样的问题，发现 Madison Draper 的 Mapbox 风格“Mineral”有这种效果（标签有背景颜色） - 她将光环宽度设置为 30px，模糊设置为 10px，结果是背景颜色（因为 Mapbox 似乎无法处理超出“正常”量的光晕模糊，并且过多的光晕宽度会从文本的边界框中裁剪掉。）

看这个： https://blog.mapbox.com/designing-the-mineral-map-style-cc47e5a980b6 底部有一个复制此样式的链接

（另外）如果您通过代码而不是通过 Studio 进行设置： 另请注意，由于 halo 是一个单独的“Paint”属性 - 请务必也看到这一点：

Mapbox GL JS：当其他属性起作用时未知属性“text-halo-width”