系列文章目錄
開源方案搭建可離線的精美矢量切片地圖服務-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.簡介
mapbox是一家非常牛的公司，比如像特斯拉、DJI大疆創新、孤獨星球、Airbnb、GitHub、Cisco、Snap、飛豬、Keep、Bosch這些在國內外各自領域中響噹噹的企業都是它的客戶。專注於幫助企業打造定製化地圖應用的Mapbox就是這樣一家“你看不見我，但我無處不在”的企業。可以開發和定製web、android、IOS、VR、無人駕駛、甚至是遊戲地圖場景等。
mapbox-gl是Mapbox一款開源Web地圖服務解決方案，用於搭建精美的地圖服務，可以免費創建並定製個性化地圖的網站。他最大的優點就是可以使用類似於css的樣式來描述地圖，並提供類似於photoshop的圖像界面來設計和生成精美的樣式。我們本篇主要講一下Mapbox在Web地圖中的應用。
2.Mapbox入門
1.打開向導頁：https://www.mapbox.com/install/，選擇開發平臺SDK,
2.選擇Mapbox GL js 方式，第一種爲CDN在線模式，類似於引用jquery一樣，我們也可以下載下來。第二種爲模塊化js搭建，可使用webpack等模塊化工具搭建。
3.搭建第一個頁面。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> html, body { padding: 0; margin: 0; height: 100%; overflow: hidden; } #map { height: 100%; z-index: 0; } </style> <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' /> </head> <body> <div id='map'></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiYXR0dWluZyIsImEiOiJjamNham4ycTgwZzVkMndzM2lzYTJtN2VjIn0.kB9yWdGNuo7_oi3brXX4-A'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v10' }); </script> </body> </html>
配色非常舒服的地圖界面，通過js代碼分析可以看出最核心的代碼就是 style: 'mapbox://styles/mapbox/streets-v10'，他包含了所有的地圖樣式。
3.Mapbox進階
入門例子中style樣式都封裝到了一起，下面這個例子展示如何將style分解，爲後面離線部署提供解決方案,具體可以查看一下style api.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> html, body { padding: 0; margin: 0; height: 100%; overflow: hidden; } #map { height: 100%; z-index: 0; } </style> <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' /> </head> <body> <div id='map'></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiYXR0dWluZyIsImEiOiJjamNham4ycTgwZzVkMndzM2lzYTJtN2VjIn0.kB9yWdGNuo7_oi3brXX4-A'; var map = new mapboxgl.Map({ container: 'map', style: { "version": 8, "name": "Mapbox Streets", "sprite": "mapbox://sprites/mapbox/streets-v8", "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", "sources": { "mapbox-streets": { "type": "vector", "url": "mapbox://mapbox.mapbox-streets-v6" } }, "layers": [ { "id": "water", "source": "mapbox-streets", "source-layer": "water", "type": "fill", "paint": { "fill-color": "#00ffff" } } ] } }); </script> </body> </html>
api解析：
1.version：這個JS SDK對應版本必須爲8。
2.name：樣式的命名。
3.sprite：將一個地圖涉及到的所有零星圖標圖片都包含到一張大圖中去，我們看一下streets-v8的sprite圖片。
4.glyphs：.pbf格式的字體樣式，例如微軟雅黑等字體庫。
5.sources：圖層的資源文件，可以支持矢量切片、柵格、dem柵格、圖片、geojson、視頻等格式。
6.layers：是對每個圖層樣式的描述，這裏就是對地圖樣式渲染的關鍵，可以做很多精美的設計。
寫到這裏我們還有一個疑問 mapboxgl.accessToken 這個accessToken 是幹什麼的？其實Mapbox提供了在線樣式的編輯，以及矢量數據上傳，圖標的整合等，這個accessToken 其實是爲了與你上傳到他們服務器的數據做關聯，如果我們不依賴他的在線資源，我們完全可以不使用這個accessToken 。
4.Mapbox離線部署
通過上面的分析，mapbox-gl.js、mapbox-gl.css下載到本地就行。離線部署現在主要的問題是首先有自己的矢量切片文件，上一節我們講過如何發佈矢量切片服務，其次有個glyphs字體文件，後面文章我會提供一個微軟雅黑的.pbf格式的字體庫，以及我獲取.pbf字體庫的方式。剩下的就是編寫自己的地圖樣式了。
5.總結
這一篇主要講了一下Mapbox的基礎，以及對離線部署的分析，下一篇講一下我們之前提到的項目實現。
待續。。。。。。。。。。。。。。。。。。。。。
作者：ATtuing
出處：http://www.cnblogs.com/ATtuing
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。