百度地圖 - 在Echarts中使用地圖api

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰javascript

簡介

在地圖可視化項目的開發中，爲了進度領導是不會給你多餘的時間完成一個功能。這時，就須要咱們在社區中尋找框架，來實現這個功能。在許多符合條件的框架中，發現Echarts最符合產品的要求。html

Echarts地圖擴展插件

貢獻者：沈毅
百度地圖擴展，能夠在百度地圖上展示點圖，線圖，熱力圖等。
數據格式跟在 geo 座標系上同樣，每一項都是 [經度，緯度，數值大小，其它維度...]

配置方式很是簡單，以下:java

option = {
    // 加載 bmap 組件
    bmap: {
        // 百度地圖中心經緯度
        center: [120.13066322374, 30.240018034923],
        // 百度地圖縮放
        zoom: 14,
        // 是否開啓拖拽縮放，能夠只設置 'scale' 或者 'move'
        roam: true,
        // 百度地圖的自定義樣式，見 http://developer.baidu.com/map/jsdevelop-11.htm
        mapStyle: {}
    },
    series: [{
        type: 'scatter',
        // 使用百度地圖座標系
        coordinateSystem: 'bmap',
        // 數據格式跟在 geo 座標系上同樣，每一項都是 [經度，緯度，數值大小，其它維度...]
        data: [ [120, 30, 1] ]
    }]
}

// 獲取百度地圖實例，使用百度地圖自帶的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
複製代碼

由於是在百度地圖上使用，因此統計圖類型也須要是經過座標方式繪製數據的。其它類型的統計圖只是在地圖上層繪製原來的圖形。
須要要注意bmap.min.js擴展插件是基於2D類型的地圖開發的，如須要使用type=webgl類型的地圖就須要修改部分源碼。

開始使用

經過<script>標籤引入地圖api地址、echarts地址、擴展插件地址，這裏的ak是你在地圖服務中心註冊的。不瞭解的能夠點這裏。

<!-- 百度 -->
    <script src="https://api.map.baidu.com/api?v=3.0&ak=?"></script>
    <!-- echarts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <!-- 擴展地圖插件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
    
複製代碼

初始化echarts

...
<div id="bmap" class="bmap"></div>
...
      var myChart = echarts.init(document.getElementById('bmap'))
      option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (res) {
            return res.name + ':' + res.value[2]
          }
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 6,
          roam: true
        },
        series: [
          {
            name: '測試',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: [
              { name: '上海', value: [121.480509, 31.23592, 10] },
              { name: '南京', value: [118.804147, 32.070037, 10] }
            ],
            symbolSize: function (val) {
              return val[2]
            },
            rippleEffect: {
              brushType: 'stroke'
            },
            itemStyle: {
              normal: {
                color: '#ff0000',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
複製代碼

這裏的配置詳解能夠上官網瞭解。
主要的不一樣是添加bmap參數配置百度地圖，在series中天機coordinateSystem: 'bmap'讓原來的座標類型修改成百度地圖的墨卡託類型。
在這裏發現了一個小bug。瀏覽器外邊框margin默認不是0，我修改html外邊距爲0後，Echarts繪製的點座標錯位。查找了半天，發現我給元素節點設置高爲100%就會錯位，當我固定元素節點高後坐標就對了。因此提醒你使用時最後設置固定高度。

添加點擊事件

// 點擊每一個站點能夠進行相關操做
      myChart.on('click', function (e) {
        console.log(e) // 每一個標識點的信息
      })
複製代碼

這裏直接使用Echarts的監聽事件，就能實現咱們想要的功能。

使用地圖原生api

var bmap = myChart.getModel().getComponent('bmap').getBMap()
var pt = new BMap.Point(116.417, 39.909)
var markerTem = new BMap.Marker(pt) // 建立標註
bmap.addOverlay(markerTem) // 將標註添加到地圖中
複製代碼

經過Echarts獲取到地圖實例，後面就和直接使用百度地圖沒區別了。
結合使用就這麼簡單，固然這裏只是簡單的講解了一下如何使用它們。在社區中不少大佬經過它們建立一些比較實用的功能，官方示例。