vue 地圖視覺化 mapbox篇(2)

楊健YJohn發表於2018-11-06
Vue地圖視覺化

MapBox

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

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

由於專案主要採用3d GL，國內在這方面的文件不多，只能舉起社會主義的鐮刀和火炬，一遍遍地看它的官方文件
mapbox gl www.mapbox.com/mapbox-gl-j…

  • 專案引入Mapbox

CDN模式
在專案html的<head>中直接插入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運算，專案前期以功能實現為主，後期將著重效能優化)

clipboard.png

效果圖：

clipboard.png

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組成
動作及擴充對地圖檢視和圖表進行操作
複製程式碼

clipboard.png

效果圖：

clipboard.png

clipboard.png

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

完整專案github地址：github.com/hty7/vue-de…

有不懂的地方，可以在下方留言，或者私聊。對文章感興趣的話，點下贊、收藏和github收集小星星，謝謝大家。


相關文章