MapboxGL加载离线字体
# 前言
# 问题
在工作中，二维地图的图层源是后端提供，前端只需要采用 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"]
}
}
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
在这个例子中，glyphs URL 指定了字体符号的存储位置。text-font 指定了字体堆栈，Mapbox GL 会从这些字体中加载所需的 glyphs。
# 总结
Mapbox GL 中的 glyphs 是实现文本标签渲染的核心机制。它通过按需加载字体符号，并结合矢量切片的优势，实现了高效、灵活的地图文本渲染。通过自定义 glyphs URL 和字体堆栈，开发者可以灵活地控制地图上文本的显示效果。