Mapbox GL JS Cookbook

ThreeJS

3D 文本标注

Mapbox GL 默认文本标注图层不支持高度属性，这里使用 ThreeJS 来实现有高度的文本标注。

该方法需要引入字体文件，ThreeJS 官方案例中提供了几种英文字体的 json 文件，如果想要显示中文，可以下载相关字体的 ttf 格式文件，在 Facetype.js在新页面打开 网站生成 json 文件，即可使用。

但是一个完整的中文字体文件会很大，可通过 Google 开源项目 sfntly在新页面打开 中的 sfnttool 工具提取指定的文字。

字体提取步骤：

  1. 下载 sfnttool 工具（直接下载在新页面打开 或 从源码 sfntly在新页面打开 编译）
  2. 提取指定文字，输出 ttf 文件（需要 java 环境）
java -jar sfnttool.jar -s '茶牛奶咖啡' 庞门正道标题体2.0增强版.ttf PangMenZhengDao_Regular.ttf
  1. 在 Facetype.js在新页面打开 网站生成 json 文件
  2. 使用
const loader = new THREE.FontLoader()
loader.load('PangMenZhengDao_Regular.json', (font) => {
  const textBufferGeometry = new THREE.TextBufferGeometry('牛奶', {
    font,
  })
})