開源方案搭建可離線的精美矢量切片地圖服務-6.Mapbox之.pbf字體庫

項目成果展示（所有項目文件都在阿里雲的共享雲虛擬主機上，訪問地圖可以會有點慢，請多多包涵）。

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格式的字體庫的生成

1.使用node-fontnik工具進行轉換，具體參考https://www.jianshu.com/p/23634e54487e這篇文章。

2.使用Arcgis pro進行轉換，Arcgis pro包含基於Mapbox企業級的矢量切片方案，要收費，但是有20天試用，大家可以試一下，我會在下篇進行詳細分析。我自己使用的自己就是通過這種方式獲取的。

3.分享一些常用.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所需的所有離線文件生成。可以借鑑一下企業級服務是如何構建的。

待續。。。。。。。。。。。。。。。。。。。。。

作者：ATtuing

出處：http://www.cnblogs.com/ATtuing

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。