我如何在Mapbox GL JS中使用自定义字体?

Question

我正在使用Mapbox GL JS (v2.8.0)以编程方式为我的地图添加样式层，我正在尝试使用一组我通过Mapbox Studio上传到我的地图的字体。

我现在在我的样式层代码中有这个:

const layer = {
id: this.getLayerId(),
type: 'symbol',
layout: {
'text-field': ['get', 'name'],
'text-font': [
"Chakra Petch Italic", // My custom font inside Mapbox
"Arial Unicode MS Regular" // Fallback font
]
},
paint: {
'text-color': '#ffffff',
}
}

然而，当涉及到渲染我的地图，我得到404错误，有关试图获取我的字体。

正在尝试从以下url获取字体:

https://api.mapbox.com/fonts/v1/mapbox/Chakra%20Petch%20Italic,Arial%20Unicode%20MS%20Regular/0-255.pbf?access_token={access_token} 

我认为这里的问题是，而不是/mapbox/，它应该是/{username}/，当我在浏览器中访问以下url时:

https://api.mapbox.com/fonts/v1/{username}/Chakra%20Petch%20Italic,Arial%20Unicode%20MS%20Regular/0-255.pbf?access_token={access_token} 

正确获取.pbf数据

我如何能够指定它应该看我的用户名，而不是公共mapbox用户，在我的样式层json?

---

另外，作为测试，如果我在Mapbox Studio中创建一个简单的图层，并设置一个标签来使用自定义字体，在devtools的Network选项卡中，我可以看到它使用上面的用户名url获取字体。不幸的是，代码检查器在Studio中为这个标签显示了与我在代码中相同的两个字符串数组。

Answer 1

你需要设置你的样式的glyphs属性:

}, glyphs: 'mapbox://fonts/yourusername/{fontstack}/{range}.pbf'
}

更多信息:https://docs.mapbox.com/mapbox-gl-js/style-spec/glyphs/