如何在 Mapbox Gl Js 中的圆圈内添加文本答案

【问题标题】：How to add a text inside a circle in Mapbox Gl Js如何在 Mapbox Gl Js 中的圆圈内添加文本
【发布时间】：2019-11-07 19:04:39
【问题描述】：

我想在一个圆圈内添加一个文本，这是我的标记，但它没有显示任何内容。

我有两层，一层用于圆圈，一层用于文本。

我正在尝试通过添加一个文本字段属性来使其工作，但没有渲染任何内容。

这是我的两层，我尝试添加文本的一层是第二层，称为 singles-count

      map.addLayer({
        id: "singles",
        // type: "symbol",
         type: "circle",
        source: "users",
        filter: ["!has", "point_count"],
        // layout: { 
        //   "icon-image": "custom-marker"
        // },
        paint: {
            'circle-radius': {
                'base': 10,
                'stops': [[5, 20], [15, 500]]
            },
            'circle-color': '#ddffc8',
          }
      });
    });


    map.addLayer({
        id: "singles-count",
        type: "symbol",
        source: "users",
        filter: ["has", "singles_count"],
        layout: {
        "text-field": "XXX",
        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
        "text-size": 12
        }
      });

但是，它不会渲染 XXX，也不会抛出任何错误，有什么想法吗？

【问题讨论】：

标签： javascript mapbox

【解决方案1】：

这里有 3 种可能出错的地方：

filter: ["has", "singles_count"] 的每个结果为 false
功能，因此不会渲染任何符号。
看来就像你有一个很大的圆半径'stops': [[5, 20], [15, 500]]。 singles 层可能与singles-count 层完全重叠，并且文本实际上正在渲染，但它在圆圈下方。要解决此问题，您需要指定addLayer 函数的beforeId 参数，例如this：

map.addLayer({
        id: "singles-count",
        type: "symbol",
        source: "users",
        filter: ["has", "singles_count"],
        layout: {
        "text-field": "XXX",
        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
        "text-size": 12
}, 'singles');

在您的地图图块托管服务器上找不到["DIN Offc Pro Medium", "Arial Unicode MS Bold"] 的字体字形。（404 网络标签中的错误）

【讨论】：

【解决方案2】：

你能用 jsfiddle/codepen 做一个测试用例吗？图层看起来不错，但过滤器可能会过滤掉所有数据。

【讨论】：

【解决方案3】：

派对有点晚了?但是：

如果AddLayer 是矢量图层，SourceLayer 需要一个值
text-field 属性必须是Source 和SourceLayer 上功能的实际属性

【讨论】：