資訊專欄INFORMATION COLUMN
MapBox
項目中用到MapBox也是偶然的機會，項目中需要采用3D地圖，當現有的工具（百度地圖）無法滿足我們的需求，我們肯定需要更高級開源的地圖，無奈谷歌地圖無法在國內使用，已是便找到Leafle，一開始驚艷于leafle的開源程度和其與眾不同的地圖風格，后來順藤摸瓜，找到一個商業性地圖，它便是我們的主角-MapBox
作為國外的一款地圖，看到其效果時便一發不可收拾
由于項目主要采用3d GL，國內在這方面的文檔不多，只能舉起社會主義的鐮刀和火炬，一遍遍地看它的官方文檔
mapbox gl https://www.mapbox.com/mapbox...
項目引入Mapbox
CDN模式
在項目html的
module bundler模式
npm install --save mapbox-gl
// cnpm install --save mapbox-gl
初始化地圖
這里的思路和之前寫的一遍文章[百度地圖組件化][2]一樣，都是將地圖多帶帶抽出來
mapbox.vue
因此只需在業務組件中多帶帶引入mapbox.vue就可以加載地圖
效果圖：
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: "",
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地址：https://github.com/hty7/vue-d...
有不懂的地方，可以在下方留言，或者私聊。對文章感興趣的話，點下贊、收藏和github收集小星星，謝謝大家。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94180.html
摘要：百度地圖百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件等上有的組件可以直接使用，有興趣的同學可以直接上手這里不采用已經封裝好的地圖組件，而是從零開始，采用原生的百度地圖一 百度地圖 百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件（echarts、Mapv等...
以下為個人目前接觸到的前端技術，歡迎大家補充。 一、前端技術框架 1、Vue.js 官網：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鳥教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面應用Electron：https:...
摘要：最近在折騰的端的可視化項目，由于相關業務的需要，用到了這一地圖開發的神器。其技術奠基于與。分別指縮放級別地面法線偏移角地軸偏移角等，用以確定當前視窗所顯示的地圖區域和空間關系。個人認為其最大的亮點在于即使不了解內部實現，也不影響其使用。 最近在折騰的 web 端的可視化項目，由于相關業務的需要，用到了 Mapbox 這一地圖開發的神器。在此先奉上一個基于mapbox-gl實現的demo...
閱讀 2361·2023-04-25 19:27
閱讀 3491·2021-11-24 09:39
閱讀 3906·2021-10-08 10:17
閱讀 3397·2019-08-30 13:48
閱讀 1930·2019-08-29 12:26
閱讀 3121·2019-08-28 17:52
閱讀 3537·2019-08-26 14:01
閱讀 3534·2019-08-26 12:19
