MapBox

專案中用到MapBox也是偶然的機會，專案中需要採用3D地圖，當現有的工具（百度地圖）無法滿足我們的需求，我們肯定需要更高階開源的地圖，無奈谷歌地圖無法在國內使用，已是便找到Leafle，一開始驚豔於leafle的開源程度和其與眾不同的地圖風格，後來順藤摸瓜，找到一個商業性地圖，它便是我們的主角-MapBox

作為國外的一款地圖，看到其效果時便一發不可收拾

• 專案引入Mapbox

CDN模式
在專案html的中直接插入mapbox

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'
 
></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />

module bundler模式

npm install --save mapbox-gl
// cnpm install --save mapbox-gl

• 初始化地圖

這裡的思路和之前寫的一遍文章[百度地圖元件化][2]一樣，都是將地圖單獨抽出來

mapbox.vue

    <template>
      <div
 
 style="height:100%;width:100%;text-align:left;">
        <div ref="basicMapbox" :style="mapSize"></div>
      </div>
    </template>
    <script>
    import mapboxgl from 'mapbox-gl'
    export default {
      props: {
        mapWidth: {
          type: String
        },
        mapHeight: {
          type: String
 

        }
      },
      data () {
        return {
        }
      },
      mounted () {
        this.init()
      },
      methods: {
        // 初始化
        init () {
          mapboxgl.accessToken = 'your AK'
          const map = new mapboxgl.Map({
            container: this.$refs.basicMapbox,
            style: 'mapbox://styles/mapbox/streets-v9'
          })
          console.log(map)
        }
      },
      computed: {
        mapSize () {
          let styleObj = {
            width: this.mapWidth,
            height: this.mapHeight
          }
          return styleObj
        }
      }
    }
    </script>
    <style>
    @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
    </style>

因此只需在業務元件中單獨引入mapbox.vue就可以載入地圖

<mapbox-map mapWidth="100%" mapHeight="600px"></mapbox-map>

效果圖：

• mapbox視覺化

mapbox原生提供資料視覺化的介面，但這並沒滿足我們的需求
因此我們選用前端經常使用到視覺化外掛d3.js和echarts，經過橫向對比其效能及通用性，最後還是選擇了後者
echarts也提供3D繪製的echart-gl，通過利用mapbox強大的地圖服務和echaers-gl的視覺化渲染，達到我們的前期需求
(3d建模需要消耗大量的GPU運算，專案前期以功能實現為主，後期將著重效能優化)
這裡寫圖片描述

效果圖：

mapbox視覺化的元件化
1、地圖配置：echarts-GL內封裝mapbox的配置項，通過options的mapbox可以直接進行簡單配置（中心點、等級、攝像機傾斜度、攝像機高度及光源等）

    mapbox: {
          center: [113.206456, 23.072519],
          zoom: 6.2,
          pitch: 60,
          bearing: 0,
          style: 'mapbox://styles/mapbox/dark-v9',
          boxHeight: 20,
          light: {
            main: {
              intensity: 1,
              shadow: true,
              shadowQuality: 'high'
            },
            ambient: {
              intensity: 0.2
            }
          }
        }

2、視覺化工具：echarts-Gl options的series進行圖表設定，通過getModel().getComponent(‘mapbox3D’).getMapbox()獲取map物件

series: {
      name: '常駐人口',
      type: 'bar3D',
      shading: 'realistic',
      coordinateSystem: 'mapbox',
      silent: true,
      barSize: 1, // 柱子粗細
      bevelSize: 0.3,
      emphasis: {
        label: {
          show: false
        }
      },
      label: {
        show: true,
        distance: 0,
        formatter: '{b}',
        textStyle: {
          fontSize: 12
        }
      },
      data: []
    }

3、動作及拓展：mapbox通過map API的on屬性和mapboxgl進行地圖的操作，如修改地圖樣式、載入圖層、新增導航工具等使用者互動動作
如：新增導航操作：

        this.nav = new mapboxgl.NavigationControl()
        map.addControl(this.nav)

新增Geojson圖層

     map.addSource('states', {
            'type': 'geojson',
            'data': gdData
          })
        map.addLayer({
            'id': 'state-fills',
            'type': 'fill',
            'source': 'states',
            'layout': {},
            'paint': {
              'fill-color': '#627BC1',
              'fill-opacity': 0.1
            }
        })

思路彙總：通過上面三步走的思路，我們可以把元件粗略分成三部分
核心的mapbox.vue是地圖檢視
視覺化圖表由echarts-gl組成
動作及拓展對地圖檢視和圖表進行操作

效果圖：

待續，文章持續更新修改……

上一篇文章：vue 地圖視覺化（1）百度地圖篇
有不懂的地方，可以在下方留言，或者私聊。對文章感興趣的話，點下贊、收藏和github收集小星星，謝謝大家。