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

時間 2019-11-21

標籤開源方案搭建離線精美矢量切片地圖服務 3.mapbox mapbox 個性化定製入門简体版

原文原文鏈接

系列文章目錄

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

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

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

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

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

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

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

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

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

01：中國地圖：http://test.sharegis.cn/mapbox/html/3china.html

02：德國-德累斯頓市：http://test.sharegis.cn/mapbox/html/6germany.htmljson

1.簡介

mapbox是一家很是牛的公司，好比像特斯拉、DJI大疆創新、孤獨星球、Airbnb、GitHub、Cisco、Snap、飛豬、Keep、Bosch這些在國內外各自領域中響噹噹的企業都是它的客戶。專一於幫助企業打造定製化地圖應用的Mapbox就是這樣一家「你看不見我，但我無處不在」的企業。能夠開發和定製web、android、IOS、VR、無人駕駛、甚至是遊戲地圖場景等。 api

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字體庫的方式。剩下的就是編寫本身的地圖樣式了。