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

系列文章目錄

開源方案搭建可離線的精美矢量切片地圖服務-1.開篇（附成果演示地址）

開源方案搭建可離線的精美矢量切片地圖服務-2.PostGIS+GeoServer矢量切片 

開源方案搭建可離線的精美矢量切片地圖服務-3.Mapbox個性化地圖定製入門

開源方案搭建可離線的精美矢量切片地圖服務-4.Mapbox樣式設計

開源方案搭建可離線的精美矢量切片地圖服務-5.Mapbox離線項目實現

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

開源方案搭建可離線的精美矢量切片地圖服務-7.Arcgis Pro企業級應用

開源方案搭建可離線的精美矢量切片地圖服務-8.mapbox 之sprite大圖圖標文件生成（附源碼）

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

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

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