vue 地图可视化（1）

百度地图

百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件（echarts、Mapv等）

github上有vue-baidu-map的组件可以直接使用，有兴趣的同学可以直接上手
https://github.com/Dafrok/vue-baidu-map.git
这里不采用已经封装好的地图组件，而是从零开始，采用原生的百度地图api,一步步组合封装

• 项目引入地图

网上教程多数为index.html加入百度地图api，然而这种写法并不符合我们的组件化思想，我的思想是先抽取百度地图为单独组件.vue，在需要地图的业务中加载

参考vue-baidu-map动态获取百度地图api
baiduMap.vue

        // 初始化
        reset () {
          const {getMapScript, initMap} = this
          getMapScript().then(initMap)
        },
        // 获取baidumap
        getMapScript () {
          if (!global.BMap) {
            const ak = this.ak || this._BMap().ak
            global.BMap = {}
            global.BMap._preloader = new Promise((resolve, reject) => {
              global._initBaiduMap = function () {
                resolve(global.BMap)
                global.document.body.removeChild($script)
                global.BMap._preloader = null
                global._initBaiduMap = null
              }
              const $script = document.createElement('script')
              global.document.body.appendChild($script)
              $script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`
            })
            return global.BMap._preloader
          } else if (!global.BMap._preloader) {
            return Promise.resolve(global.BMap)
          } else {
            return global.BMap._preloader
          }
        },
        // 获取BMap, 初始化地图
        initMap (BMap) {
          this.BMap = BMap
          this.init(BMap)
        },
        init (BMap) {
          let $el = this.$refs.basicMap
          const map = new BMap.Map($el)
          this.map = map
          this.setMapOptions()
          map.centerAndZoom(this.initCenter, this.initZoom)
          this.$emit('ready', {BMap, map})
        },
        // 设置地图配置
        setMapOptions () {
        }

某业务组件

效果如图：

• 加入可视化工具

地图上常规的可视化需求可以分成3种，分别是点线面
1.  点（定位、数据打点）
 
  在百度地图api官网实例中，可以通过addOverlay()将标点添加到地图上，因此在vue中，只要我们获取到BMap和map构造函数就可以满足我们的操作
  在组件中，我通过$emit父子组件间广播事件，并将BMap、map传到业务组件

  baiduMap.vue

        this.$emit('ready', {BMap, map})

业务组件

        
        initReady ({BMap, map}) {
          let point = new BMap.Point(116.404, 39.915)
          map.centerAndZoom(point, 15)
          let marker = new BMap.Marker(point)
          map.addOverlay(marker)
        }

  效果图：



  ----------


2.   线（导航、迁移路线）

  业务组件
 

     map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)
      let myP1 = new BMap.Point(116.380967, 39.913285)
      let myP2 = new BMap.Point(116.424374, 39.914668)
      let driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true}})
      driving.search(myP1, myP2)

  效果图：

  ----------



3. 面（区域选定、覆盖物、热力图）

  业务组件

     

 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)
      map.enableScrollWheelZoom()
      // 创建多边形
      let polygon = new BMap.Polygon([
        new BMap.Point(116.387112, 39.920977),
        new BMap.Point(116.385243, 39.913063),
        new BMap.Point(116.394226, 39.917988),
        new BMap.Point(116.401772, 39.921364),
        new BMap.Point(116.41248, 39.927893)
      ], {strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5})
      // 增加多边形
      map.addOverlay(polygon)
      polygon.enableEditing()

  效果图：
  


上面简单举了几个实例，真实环境中还会很多其他的API，比如方向、定位、搜索、放大缩小等控件
但我们也发现在不同业务重复调用同一模块时，上面的代码就显得过于累赘，因此我们需要把添加到地图上的图层（点线面工具）都抽取封装成组件（需要用到[`slot`插槽分发内容][7]），之后业务只需引用组件并传递所需参数即可

----------  待续  ----------

完整项目地址： https://github.com/hty7/vue-demo.git

下一篇文章：vue 地图可视化（2）Mapbox地图篇