百度地图 - 自定义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前端