vue 地圖視覺化 mapbox篇(2)
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 因此只需在業務元件中單獨引入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組成
動作及拓展對地圖檢視和圖表進行操作
複製程式碼效果圖：
待續，文章持續更新修改......
完整專案github地址：github.com/hty7/vue-de…
有不懂的地方，可以在下方留言，或者私聊。對文章感興趣的話，點下贊、收藏和github收集小星星，謝謝大家。