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

hfpjl

4761人浏览 · 2020-09-04 17:23:02

hfpjl · 2020-09-04 17:23:02 发布

（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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^