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

Posted 2023-02-16

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

【英文标题】：how to add background color for layer text field in mapbox-gl

【发布时间】：2016-08-14 21:58:30

【问题描述】：

如何为 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"
    
);

【参考方案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
            ,

这是取自他们网站上的this example。

【讨论】：

这正是我想要的。我想很多人都希望在不添加太多代码的情况下放置一个文本并使其突出一点。我用 text-halo-width: 5 进行了尝试，它在文本周围提供了一个漂亮的小白框。谢谢大佬！