資訊專欄INFORMATION COLUMN
MapBox
項(xiàng)目中用到MapBox也是偶然的機(jī)會，項(xiàng)目中需要采用3D地圖，當(dāng)現(xiàn)有的工具（百度地圖）無法滿足我們的需求，我們肯定需要更高級開源的地圖，無奈谷歌地圖無法在國內(nèi)使用，已是便找到Leafle，一開始驚艷于leafle的開源程度和其與眾不同的地圖風(fēng)格，后來順藤摸瓜，找到一個商業(yè)性地圖，它便是我們的主角-MapBox
作為國外的一款地圖，看到其效果時便一發(fā)不可收拾
由于項(xiàng)目主要采用3d GL，國內(nèi)在這方面的文檔不多，只能舉起社會主義的鐮刀和火炬，一遍遍地看它的官方文檔
mapbox gl https://www.mapbox.com/mapbox...
項(xiàng)目引入Mapbox
CDN模式
在項(xiàng)目html的
module bundler模式
npm install --save mapbox-gl
// cnpm install --save mapbox-gl
初始化地圖
這里的思路和之前寫的一遍文章[百度地圖組件化][2]一樣，都是將地圖多帶帶抽出來
mapbox.vue
因此只需在業(yè)務(wù)組件中多帶帶引入mapbox.vue就可以加載地圖
效果圖：
mapbox可視化
mapbox原生提供數(shù)據(jù)可視化的接口，但這并沒滿足我們的需求
因此我們選用前端經(jīng)常使用到可視化插件d3.js和echarts，經(jīng)過橫向?qū)Ρ绕湫阅芗巴ㄓ眯?，最后還是選擇了后者
echarts也提供3D繪制的echart-gl，通過利用mapbox強(qiáng)大的地圖服務(wù)和echaers-gl的可視化渲染，達(dá)到我們的前期需求
(3d建模需要消耗大量的GPU運(yùn)算，項(xiàng)目前期以功能實(shí)現(xiàn)為主，后期將著重性能優(yōu)化)
效果圖：
mapbox可視化的組件化
1、地圖配置：echarts-GL內(nèi)封裝mapbox的配置項(xiàng)，通過options的mapbox可以直接進(jìn)行簡單配置（中心點(diǎn)、等級、攝像機(jī)傾斜度、攝像機(jī)高度及光源等）
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進(jìn)行圖表設(shè)置，通過getModel().getComponent("mapbox3D").getMapbox()獲取map對象
series: {
name: "常駐人口",
type: "bar3D",
shading: "realistic",
coordinateSystem: "mapbox",
silent: true,
barSize: 1, // 柱子粗細(xì)
bevelSize: 0.3,
emphasis: {
label: {
show: false
}
},
label: {
show: true,
distance: 0,
formatter: "",
textStyle: {
fontSize: 12
}
},
data: []
}
3、動作及拓展：mapbox通過map API的on屬性和mapboxgl進(jìn)行地圖的操作，如修改地圖樣式、加載圖層、添加導(dǎo)航工具等用戶交互動作
如：添加導(dǎo)航操作：
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組成 動作及拓展對地圖視圖和圖表進(jìn)行操作
效果圖：
待續(xù)，文章持續(xù)更新修改......
上一篇文章： vue 地圖可視化（1） 百度地圖篇
完整項(xiàng)目github地址：https://github.com/hty7/vue-d...
有不懂的地方，可以在下方留言，或者私聊。對文章感興趣的話，點(diǎn)下贊、收藏和github收集小星星，謝謝大家。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94180.html
摘要：百度地圖百度地圖作為項(xiàng)目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因?yàn)槠渫晟频募夹g(shù)文檔案例和多樣化的開源插件等上有的組件可以直接使用，有興趣的同學(xué)可以直接上手這里不采用已經(jīng)封裝好的地圖組件，而是從零開始，采用原生的百度地圖一 百度地圖 百度地圖作為項(xiàng)目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因?yàn)槠渫晟频募夹g(shù)文檔案例和多樣化的開源插件（echarts、Mapv等...
以下為個人目前接觸到的前端技術(shù)，歡迎大家補(bǔ)充。 一、前端技術(shù)框架 1、Vue.js 官網(wǎng)：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鳥教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面應(yīng)用Electron：https:...
摘要：最近在折騰的端的可視化項(xiàng)目，由于相關(guān)業(yè)務(wù)的需要，用到了這一地圖開發(fā)的神器。其技術(shù)奠基于與。分別指縮放級別地面法線偏移角地軸偏移角等，用以確定當(dāng)前視窗所顯示的地圖區(qū)域和空間關(guān)系。個人認(rèn)為其最大的亮點(diǎn)在于即使不了解內(nèi)部實(shí)現(xiàn)，也不影響其使用。 最近在折騰的 web 端的可視化項(xiàng)目，由于相關(guān)業(yè)務(wù)的需要，用到了 Mapbox 這一地圖開發(fā)的神器。在此先奉上一個基于mapbox-gl實(shí)現(xiàn)的demo...
閱讀 2456·2023-04-25 19:27
閱讀 3553·2021-11-24 09:39
閱讀 3965·2021-10-08 10:17
閱讀 3439·2019-08-30 13:48
閱讀 1989·2019-08-29 12:26
閱讀 3165·2019-08-28 17:52
閱讀 3578·2019-08-26 14:01
閱讀 3577·2019-08-26 12:19
