前言

问题

在工作中，二维地图的图层源是后端提供，前端只需要采用 Mapbox GL 进行地图数据的渲染。有个业务是需要在地图上显示图幅号业务数据，而该图幅是通过addSource等方式添加进行渲染。在内网（不与互联网互通）环境中，无法正确显示图幅号。在局域网环境进行 Mapbox GL 渲染地图需要手动添加字体。

解决步骤

• 在互联网环境，打开控制台，发现字体是如下加载：

• 复制上述链接，下载该字体文件，在项目中根目录public下新建名为Open Sans Regular,Arial Unicode MS Regular的文件夹，将字体文件放入其中

• 编辑Mapbox GL的style文件,如：glyphs: "./fonts/{fontstack}/{range}.pbf",，解决问题。

收获

在 Mapbox GL 中，glyphs 是用于定义地图上文本标签（如地名、道路标签等）所使用的字体符号的资源。Mapbox GL 使用矢量切片（vector tiles）来渲染地图，而文本标签的渲染依赖于字体符号（glyphs）

glyphs的概念

glyphs就是字体符号，它的概念如下：

• glyphs是字体中每个字符的图形表示。例如，字母 "A" 在字体文件中有一个对应的 glyph，表示它的形状。

• 在 Mapbox GL 中，字体符号以 PBF（Protocol Buffer Binary Format 格式存储，这种格式是经过压缩的二进制格式，适合网络传输和高效渲染。

glyphs url

在Mapbox GL的样式中，glyphs字段指定了字体符号的URL模板，如："glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf"

• {fontstack} 是字体堆栈的名称，通常是一个字体族（如 Open Sans Bold）。

• {range} 是字符的 Unicode 范围，通常以十六进制表示（如 0-255 表示前 256 个字符）。

font stack字体堆栈

字体堆栈是指一组字体名称，Mapbox GL 会按照顺序尝试加载这些字体。如果第一个字体中没有某个字符的 glyph，它会尝试下一个字体。 如"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"]：表示优先使用 Open Sans Bold，如果某个字符在该字体中不存在，则使用 Arial Unicode MS Bold。

glyphs的加载

当 Mapbox GL 需要渲染文本标签时，它会根据 glyphs URL 模板和字体堆栈，动态加载所需的字体符号。

例如，如果地图上有一个标签是 "Mapbox"，Mapbox GL 会加载包含这些字符的 glyphs 文件（如 0-255.pbf），并从中提取所需的字符形状。

glyphs的渲染

• 加载的 glyphs 会被转换为纹理（texture），并上传到 GPU 进行渲染。

• Mapbox GL 使用这些纹理来绘制地图上的文本标签。由于 glyphs 是矢量数据，它们可以无损缩放，适应不同的地图缩放级别。

自定义字体

工具如 fontnik (opens new window) 可以将常见的字体文件（如 .ttf 或 .otf）转换为 PBF 格式。

示例

以下是一个 Mapbox GL 样式中 glyphs 配置的示例

{
  "version": 8,
  "glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "road-label",
      "type": "symbol",
      "source": "composite",
      "source-layer": "road",
      "layout": {
        "text-field": "{name}",
        "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"]
      }
    }
  ]
}

在这个例子中，glyphs URL 指定了字体符号的存储位置。text-font 指定了字体堆栈，Mapbox GL 会从这些字体中加载所需的 glyphs。

总结

Mapbox GL 中的 glyphs 是实现文本标签渲染的核心机制。它通过按需加载字体符号，并结合矢量切片的优势，实现了高效、灵活的地图文本渲染。通过自定义 glyphs URL 和字体堆栈，开发者可以灵活地控制地图上文本的显示效果。