Javascript 如何在Mapbox Gl Js中添加圆内的文本

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

我有两层，一层是圆，一层是文本

我试图通过添加一个文本字段属性来让它工作，但是没有得到任何渲染

这是我的两层，我试图添加文本的那一层是第二层，称为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，也不会抛出任何错误，有什么想法吗？

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

这里有三种可能出错的情况：

• filter:[“has”，“singles\u count”]

  会导致

  false

  每个
  功能，因此未渲染任何符号

• 看来 就像你有一个相当大的圆半径

  “停止”：[5,20]，[15,500]

  。

  singles

  层可能与

  singles count

  层完全重叠，文本实际上正在渲染，但它位于圆圈下方。要解决此问题，需要指定

  addLayer

  函数的

  beforeId

  参数，如：

• 在托管servier的地图分幅上找不到

  [“DIN Offc Pro Medium”，“Arial Unicode MS Bold”]

  的字体图示符。（

  404

  网络选项卡中的错误）

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');