百度地圖 - 自定義ECharts覆蓋物

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

簡介

在開發地圖可視化頁面時，產品想在城市的對應位置展現一個統計圖。這時候先不要慌，大聲的說你是在哪抄的這個需求。好看到頁面了，就沒有前端人不會（抄的）開發的。研究後發現使用的是，百度地圖api自定義了ECharts覆蓋物。html

覆蓋物

在百度地圖中全部的覆蓋物都繼承Overlay，因此咱們經過繼承基類實現自定義覆蓋物。

initialize()，用於初始化覆蓋物，當調用map.addOverlay時，API將調用此方法。
draw()，當地圖狀態發生變化時，由系統調用對覆蓋物進行繪製。
show()，顯示覆蓋物。
hide()，隱藏覆蓋物。
MapPanes，此類表示地圖上全部覆蓋物的容器集合，沒有構造函數，經過對象字面量形式表示。經過Map的getPanes方法可得到該對象實例。自定義的覆蓋物都要放入才能其中展現。

加載地圖

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

<!-- echarts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <!-- 百度 -->
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=?"></script>
  
    <script> // 百度地圖API功能 var map = new BMapGL.Map('bmap') // 建立Map實例 // 初始化地圖,設置中心點座標和地圖級別 map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10) // 啓用 鼠標滾輪事件 map.enableScrollWheelZoom() </script>
複製代碼

自定義ECharts覆蓋物

建立一個新的函數繼承Overlay，經過initialize()和draw()函數的調用機制來實現自定義覆蓋物。

/** * @param width 節點寬 * @param height 節點高 * @param pot 地圖點座標 * @param callback 回調 加載echarts * */
      function echartsOverlay(width, height, pot, callback) {
        this._width = width || 100
        this._height = height || 100
        this._pot = pot
        this._callback = callback
      }
      // 繼承Overlay基類
      echartsOverlay.prototype = new BMapGL.Overlay()

      echartsOverlay.prototype.initialize = function (map) {
        this._map = map
        // DOM節點
        this._div = document.createElement('div')
        this._div.style.zIndex = 1
        this._div.style.width = this._width + 'px'
        this._div.style.height = this._height + 'px'
        this._div.style.position = 'absolute'
        // 將該覆蓋物添加到標籤覆蓋物列表
        map.getPanes().labelPane.appendChild(this._div)
        // 傳入 dom節點 用於繪製echarts
        this._callback(this._div)
        return this._div
      }

      echartsOverlay.prototype.draw = function () {
        // pointToOverlayPixel() 根據地理座標獲取對應的覆蓋物容器的座標
        let rel_xy = this._map.pointToOverlayPixel(this._pot)
        // 覆蓋物中點 爲座標點
        this._div.style.left = rel_xy.x - this._width / 2 + 'px'
        this._div.style.top = rel_xy.y - this._height / 2 + 'px'
      }
複製代碼

建立的元素節點須要使用'absolute'定位。
定位的left、top參數須要在draw()函數中。當地圖放大、縮小，座標都須要從新計算。
使用回調函數的方式，返回DOM節點用於ECharts繪圖。

添加echarts

var drawChart = function (obj) {
        var chartTem = echarts.init(obj)
        var option = {
          tooltip: {
            trigger: 'axis'
          },
          radar: [
            {
              indicator: [
                { text: '品牌', max: 100 },
                { text: '內容', max: 100 },
                { text: '可用性', max: 100 },
                { text: '功能', max: 100 }
              ],
              center: ['50%', '50%'],
              radius: 60,
              splitArea: {
                areaStyle: {
                  color: ['#77EADF'],
                  shadowColor: 'rgba(0, 0, 0, 0.2)',
                  shadowBlur: 10
                }
              },
              name: {
                formatter: '【{value}】',
                textStyle: {
                  color: '#DC143C'
                }
              }
            }
          ],
          series: [
            {
              type: 'radar',
              tooltip: {
                trigger: 'item'
              },
              areaStyle: {},
              data: [
                {
                  value: [60, 73, 85, 40],
                  name: '某軟件'
                }
              ]
            }
          ]
        }
        chartTem.setOption(option)
      }
複製代碼

這裏和平時使用echarts開發是同樣的。文章最後有echarts 示例 ，不會的同窗能夠去看看。
不是全部的統計都適合在地圖上展現，我的認爲餅圖和雷達圖在地圖上展現效果是最好的。

調用

var myCompOverlay = new echartsOverlay(250, 250, new BMapGL.Point(121.480509, 31.23592), drawChart)
      map.addOverlay(myCompOverlay)
複製代碼

使用這種方式加載ECharts有個很大的問題，就是生成的統計圖大小是固定的，不會隨地圖變化而變化。基於這種狀況ECharts也出了解決方案bmap.min.js。

參考

echarts 示例
 百度api前端