vue 地图可视化（1）

百度地图

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

github上有vue-baidu-map的组件可以直接使用，有兴趣的同学可以直接上手
https://github.com/Dafrok/vue...

这里不采用已经封装好的地图组件，而是从零开始，采用原生的百度地图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 () {
    }

某业务组件

<template>
  <baidu-map mapWidth="100%" mapHeight="500px"></baidu-map>
</template>
<script>
import BaiduMap from '@/components/baiduMap'
export default {
  components: {
    BaiduMap
  }
}
</script>

效果如图：

• 加入可视化工具

地图上常规的可视化需求可以分成3种，分别是点线面

1. 点（定位、数据打点）

   在百度地图api官网实例中，可以通过addOverlay()将标点添加到地图上，因此在vue中，只要我们获取到BMap和map构造函数就可以满足我们的操作
   在组件中，我通过$emit父子组件间广播事件，并将BMap、map传到业务组件

   baiduMap.vue

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

   业务组件

      <baidu-map mapWidth="100%" mapHeight="500px" @ready="initReady"></baidu-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插槽分发内容），之后业务只需引用组件并传递所需参数即可

待续，持续更新......

---

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

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