阅读 2165

vue 地图可视化(2)mapbox篇

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运算,项目前期以功能实现为主,后期将着重性能优化)

clipboard.png

效果图:

clipboard.png

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组成
动作及拓展对地图视图和图表进行操作
复制代码

clipboard.png

效果图:

clipboard.png

clipboard.png

待续,文章持续更新修改......

完整项目github地址:github.com/hty7/vue-de…

有不懂的地方,可以在下方留言,或者私聊。对文章感兴趣的话,点下赞、收藏和github收集小星星,谢谢大家。


关注下面的标签,发现更多相似文章
评论