javascript - 如何在 Mapbox Gl Js 中的圆圈内添加文本

Question

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

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

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

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

Answer 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"] 的字体字形无法在您的 map 图 block 托管服务器上找到。 (网络选项卡中出现 404 错误)