vue 地图可视化 mapbox篇(2)
栏目: JavaScript · 发布时间: 7年前
内容简介：作为国外的一款地图，看到其效果时便一发不可收拾由于项目主要采用3d GL，国内在这方面的文档不多，只能举起社会主义的镰刀和火炬，一遍遍地看它的官方文档mapbox gl
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运算，项目前期以功能实现为主，后期将着重性能优化)
效果图：
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收集小星星，谢谢大家。
以上所述就是小编给大家介绍的《vue 地图可视化 mapbox篇(2)》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
High Performance Python
Micha Gorelick、Ian Ozsvald / O'Reilly Media / 2014-9-10 / USD 39.99
If you're an experienced Python programmer, High Performance Python will guide you through the various routes of code optimization. You'll learn how to use smarter algorithms and leverage peripheral t......一起来看看 《High Performance Python》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
Markdown 在线编辑器
Markdown 在线编辑器