vue 地圖可視化（2）mapbox篇

時間 2019-11-08

標籤 vue 地圖可視化 mapbox 简体版

原文原文鏈接

MapBox

項目中用到MapBox也是偶然的機會，項目中須要採用3D地圖，當現有的工具（百度地圖）沒法知足咱們的需求，咱們確定須要更高級開源的地圖，無奈谷歌地圖沒法在國內使用，已經是便找到Leafle，一開始驚豔於leafle的開源程度和其不同凡響的地圖風格，後來順藤摸瓜，找到一個商業性地圖，它即是咱們的主角-MapBox
javascript

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

因爲項目主要採用3d GL，國內在這方面的文檔很少，只能舉起社會主義的鐮刀和火炬，一遍遍地看它的官方文檔
mapbox gl www.mapbox.com/mapbox-gl-j…html

項目引入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-glvue

初始化地圖

這裏的思路和以前寫的一遍文章[百度地圖組件化][2]同樣，都是將地圖單獨抽出來java

mapbox.vuegit

<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就能夠加載地圖github

<mapbox-map mapWidth="100%" mapHeight="600px"></mapbox-map>
複製代碼

效果圖：
npm

mapbox可視化

mapbox原生提供數據可視化的接口，但這並沒知足咱們的需求
所以咱們選用前端常常使用到可視化插件d3.js和echarts，通過橫向對比其性能及通用性，最後仍是選擇了後者
echarts也提供3D繪製的echart-gl，經過利用mapbox強大的地圖服務和echaers-gl的可視化渲染，達到咱們的前期需求
(3d建模須要消耗大量的GPU運算，項目前期以功能實現爲主，後期將着重性能優化)json

效果圖：

mapbox可視化的組件化
一、地圖配置：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
        }
      }
    }複製代碼

二、可視化工具：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: []
    }複製代碼

三、動做及拓展：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組成
動做及拓展對地圖視圖和圖表進行操做
複製代碼

效果圖：

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

完整項目github地址：github.com/hty7/vue-de…

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。