（1）Mapbox示例理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Add a default marker</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiaHpzejIwMjAiLCJhIjoiY2tjdm9pNHZpMDY3NzJ2czM4a2hjdjM1byJ9.Vt6klFZFg08r04OKYTQvrw'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", center: [12.550343, 55.665957], zoom: 8 }); var marker = new mapboxgl.Marker() .setLngLat([12.550343, 55.665957]) .addTo(map); </script> </body> </html>效果图如下：
代码部分：部分待解决的参数说明如下：
sprite：mapbox地图使用的图标。glyphs：mapbox地图使用的标注字体。将mapbox离线本地化时，在显示图标问题上需要解决图标和字体的本地化。在图标离线本地化方面，mapbox使用了一个png图片和一个json位置描述信息json文件来展示图标的方法策略，这里先不展开，感兴趣的小伙伴可以交流。本文主要解决标注字体可视化的问题。
（2）pbf字体格式转换
mapbox中使用的字体pbf格式的，Mapbox GL JS加载字体是采用的分段式加载的，而不是整个字体库加载，这样做是为了降低加载时间过长的问题。根据字符编码范围进行分段，Unicode字符采用2个字节编码，所以字符的编码的范围是[0, 65535]，Mapbox GL JS按照每段长度256的方式，平均分为若干段。注意，每一段字体请求的命名方式为start-end.pbf。比如第一段则是0-255.pbf，以此类推。mapbox/node-fontnik工具可以把otf和ttf字体转换为Mapbox GL使用的protobuf格式的SDF字体，感兴趣的可以参考这篇文章https://www.jianshu.com/p/23634e54487e ，转换工具代码可以去我上传的资源中免积分下载。
我这里使用的是转化好的pbf字体库，里面包含了需要的字体，索性直接用了。
字体链接及提取码在这里了，直接用即可，可以免去很多麻烦：
链接：https://pan.baidu.com/s/1zAeaG8DXaBhiPxqyr3GKeQ 提取码：6dyr
（3）vue中引入pbf字体
在上面代码段中将style中的glyphs参数修改为以下样式即可，
glyphs: "../../../../../static/glyphs/mapbox/{fontstack}/{range}.pbf"
注意引入的路径，不然会报404
我在实际操作的过程中由于vue版本的问题遇到了一些坑，主要是pbf字体存放位置的问题，应该放置在static目录下，然而在vue-cli 3版本没有static文件夹，本地文件应放在哪儿，如何引用呢？参考此文，解决了这个问题。建立一个与src同级的目录static文件，然后把静态资源放入该文件夹下，字体显示！字体本地化部署完成了。
参考博文：https://www.jianshu.com/p/43ce4591c621
https://www.jianshu.com/p/693f38ec5730
https://www.cnblogs.com/huangqiao/p/7798887.html
希望与大家一起交流学习关于vue和mapboxgl相关gis知识及问题，
