解决Mapbox GL JS自定义字体中文还是使用默认字体的问题

在学习给Mapbox GL JS添加自定义字体时,我发现许多文章都提到使用自定义字体瓦片无法显示中文。我亲自进行了测试,发现确实存在这个问题。

然而,经过仔细思考,我意识到Mapbox GL JS自带的字体渲染能够显示中文，自定义字体的SDF理论也可以成功。于是我开始对源码进行调试,发现Mapbox GL JS大部分配置下默认使用本地字体渲染表意文字。如果设置对localFontFamily和localIdeographFontFamily这两个配置项,它就可以使用默认字体进行渲染。

根据这一发现,我参考源码的逻辑,将这两个配置项设置为undefined。结果发现,中文字符成功显示出来了。

具体的解决方法如下:

//地图配置
{
  accessToken: "",
  style: {
    glyphs: "http://127.0.0.1:3000/{fontstack}/{range}.pbf",
    // ...
  },
  // ...
  localFontFamily: undefined,
  localIdeographFontFamily: undefined,
}