vue 地图可视化 mapbox篇(2)
栏目: JavaScript · 发布时间: 6年前
内容简介:作为国外的一款地图,看到其效果时便一发不可收拾由于项目主要采用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)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Linux命令行大全
绍茨 (William E.Shotts) / 郭光伟、郝记生 / 人民邮电出版社 / 2013-3-1 / 69.00元
《Linux命令行大全》主要介绍Linux命令行的使用,循序渐进,深入浅出,引导读者全面掌握命令行的使用方法。 《Linux命令行大全》分为四部分。第一部分开始了对命令行基本语言的学习之旅,包括命令结构、文件系统的导引、命令行的编辑以及关于命令的帮助系统和使用手册。第二部分主要讲述配置文件的编辑,用于计算机操作的命令行控制。第三部分讲述了从命令行开始执行的常规任务。类UNIX操作系统,比如L......一起来看看 《Linux命令行大全》 这本书的介绍吧!