vue中Mapbox的字体本地化部署解决方案

（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知识及问题，

vue中Mapbox的字体本地化部署解决方案相关推荐

VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...
vue中怎么引入字体包（超详细）
vue中怎么引入字体包一.创建文件并添加字体包 1.在src里面的assets文件中创建text文件(没有assets文件可以自己创建一个,也可以不用此命名): 2.把字体包放入text文件,并创建 ...
bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
在vue中如何使用字体图标(阿里巴巴)
在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车. 2.打开购物车,添加至项目. 3.点击生成在线代码 4.点击下载至本地,放入需要文件夹下,可以放入assets下. 5.在sty ...
系列九、vue中css样式字体设置为华文行楷
一.下载华文行楷字体 # 下载地址 https://file.diyiziti.com/front/download/common/download?id=91# 百度网盘分享地址链接:https: ...
vue中替换全局字体
引子:工作中需要搭建一个页面,微软雅黑是不支持商用的,需要全局替换成其他字体. 文章目录一.下载字体二.引入字体 1.在项目资源目录下新建一个font文件夹,引入下载好的字体文件 2.编写css文 ...
【Vue+Mapbox】Vue中mapbox地图的使用（一）
唉,之前写的代码找不到了,码一下,方便自己以后使用. STEP 1(安装mapbox使用包): 官网提示[Module bundler] 在Vue终端执行上述操作,直到出现成功提示. STEP 2(在 ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

vue中Mapbox的字体本地化部署解决方案

vue中Mapbox的字体本地化部署解决方案相关推荐

最新文章

热门文章