vue 地图可视化 (2)

MapBox

项目中用到MapBox也是偶然的机会，项目中需要采用3D地图，当现有的工具（百度地图）无法满足我们的需求，我们肯定需要更高级开源的地图，无奈谷歌地图无法在国内使用，已是便找到Leafle，一开始惊艳于leafle的开源程度和其与众不同的地图风格，后来顺藤摸瓜，找到一个商业性地图，它便是我们的主角-MapBox

作为国外的一款地图，看到其效果时便一发不可收拾

由于项目主要采用3d GL，国内在这方面的文档不多，只能举起社会主义的镰刀和火炬，一遍遍地看它的官方文档
mapbox gl https://www.mapbox.com/mapbox-gl-js/api/

项目引入Mapbox

CDN模式
在项目html的中直接插入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地址：https://github.com/hty7/vue-demo.git

上一篇文章：vue 地图可视化（1）百度地图篇
有不懂的地方，可以在下方留言，或者私聊。对文章感兴趣的话，点下赞、收藏和github收集小星星，谢谢大家。

vue 地图可视化 (2)相关推荐

vue 地图可视化（1）
百度地图百度地图作为项目中地图可视化最重要的一部分,不止其为国人自己的地图,还因为其完善的技术文档案例和多样化的开源插件(echarts.Mapv等) github上有vue-baidu-map的组 ...
vue + 高德原生 API实现地图可视化
vue + 高德原生 API 由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API: 当前项目环境 vue2.0+: 创建项目时,如果安装 eslint ,建议关闭eslint语法 ...
炫酷，SpringBoot+Echarts实现用户访问地图可视化（附源码）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 SpringBoot+Echarts用户访问地图可视化意义在常 ...
【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
在数据可视化大屏中,地图可视化是常用的高级图表之一. 很多小伙伴们以为地图太高大上了,那么实现起来估计也不容易,说实话,确实不那么容易,直接用echarts是要花些时间研究的,但是我们可以将其二次封装 ...
三维地图前端arcgis_vue地图可视化 ArcGIS篇（3）
ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本,由于版本3与4在API等存在较大区别,就不一一列举,详细区别看官方解释 arc ...
R语言ggplot2进行特定国家或者地区的地图可视化、在地图上标出所有首府城市所在地（plot the locations of the capital cities）
R语言ggplot2进行特定国家或者地区的地图可视化.在地图上标出所有首府城市所在地(plot the locations of the capital cities) 目录
你不曾见过的酷炫地图可视化作品（一）
一.前言前不久在微博上看到一个"世界顶级10,000个学者(h-index最高的学者)过去50年在世界各地的迁移图"(点击查看完整视频),于是打算整理下看过的一些可视化.信息图等 ...
动态更改echarts 高度_EasyShu地图可视化新突破，ECharts图表完美集成
EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...
Python地信专题 | 基于geopandas玩转地图可视化
文章来源于Python大数据分析,作者费弗里本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes[1] ...

vue 地图可视化 (2)

MapBox

vue 地图可视化 (2)相关推荐

最新文章

热门文章