基于mapbox搭建可离线的矢量切片地图服务-6.Mapbox之.pbf字体库

作者:ATtuing
出处:http://www.cnblogs.com/ATtuing

最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下。
先不说废话直接上地址:(所有东西都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵)。
01:中国地图:http://test.sharegis.cn/mapbox/html/3china.html
02:德国-德累斯顿市:http://test.sharegis.cn/mapbox/html/6germany.html

1.为什么要使用.pbf格式的字体库

.pbf全称Protocal Buffers,是Google公司开发的一种数据描述语言,类似于XML能够将结构化数据序列化,可用于数据存储、通信协议等方面。简单来说就是结构简单、速度快,我们前面讲到的矢量切片也使用了这种格式。

我们常见的字体库例如微软雅黑的.ttf字体文件大约有15M,一次请求加载15M并且还要解析,对服务端和客户端的压力都大,所以Mapbox使用了.pbf的格式进行分批请求,下面是两种格式的对比。.pbf格式大大的减少了请求压力。
在这里插入图片描述
在这里插入图片描述

2.pbf格式的字体库的生成

我在一些Mapbox群里,大家离线部署Mapbox js遇到最主要的问题就是字体库弄不下来,这里我分享几个常用字体库。

SimSun Regular(宋体):https://pan.baidu.com/s/1lv69EP5QlaUnlKZlH4-qlA

Microsoft YaHei Regular(雅黑):https://pan.baidu.com/s/1-tJr-PpKSFRxlfhWwtc0Kw

Microsoft YaHei Bold:https://pan.baidu.com/s/1Ls1hgLIbcu5impJ086x5DQ

Arial Regular:https://pan.baidu.com/s/102-e8pYKB2CO9bvP3LvWug

4.Mapbox中调用字体

字体引用

style 中添加请求路径,fontstack就是字体文件夹的名称,range就是文件名,这些请求Mapbox会自动给我们完成。

“glyphs”: “…/fonts/{fontstack}/{range}.pbf”,

具体给symbol添加字体的方式

{
     //郊区
     "id": "place-suburb",
     "type": "symbol",
     "source": "germany",
     "source-layer": "gis_osm_places_07_1",
     "minzoom": 10,
     "maxzoom": 16,
     "filter": [
         "==",
         "fclass",
         "suburb"
     ],
     "layout": {
         "text-field": "{name}",
         "text-transform": "uppercase",
         "text-font": [

              //这个就是{fontstack},也就是字体文件夹的名称
             "Microsoft YaHei"
         ],
         "text-letter-spacing": 0.15,
         "text-max-width": 7,
         "text-padding": 3,
         "text-size": {
             "base": 1,
             "stops": [
                 [
                     11,
                     11
                 ],
                 [
                     15,
                     18
                 ]
             ]
         }
     },
     "paint": {
         "text-halo-color": "hsl(0, 0%, 100%)",
         "text-halo-width": 1,
         "text-color": "hsl(230, 29%, 35%)",
         "text-halo-blur": 0.5
     },
     "interactive": true
},

5.总结

本文主要分享了一些适用Mapbox 的.pbf字体库,下篇我们主要讲一下企业级Arcgis Pro 发布矢量切片服务的方法,他会将Mapbox所需的所有离线文件生成。可以借鉴一下企业级服务是如何构建的。

待续。。。。。。。。。。。。。。。。。。。。。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值