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...