简介
在开发地图可视化页面时，产品想在城市的对应位置展示一个统计图。这时候先不要慌，大声的说你是在哪抄的这个需求。好看到页面了，就没有前端人不会（抄的）开发的。研究后发现使用的是，百度地图api自定义了ECharts覆盖物。
覆盖物
在百度地图中所有的覆盖物都继承Overlay，所以我们通过继承基类实现自定义覆盖物。initialize()，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。draw()，当地图状态发生变化时，由系统调用对覆盖物进行绘制。show()，显示覆盖物。hide()，隐藏覆盖物。MapPanes，此类表示地图上所有覆盖物的容器集合，没有构造函数，通过对象字面量形式表示。通过Map的getPanes方法可获得该对象实例。自定义的覆盖物都要放入才能其中展示。加载地图
通过<script>标签引入地图api地址和echarts地址，这里的ak是你在地图服务中心注册的。不了解的可以点 这里<!-- echarts --><script type="text/javascript" src="/npm/echarts@5/dist/echarts.min.js"></script><!-- 百度 --><script src="https://api./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 || 100this._height = height || 100this._pot = potthis._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 = 1this._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节点 用于绘制echartsthis._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
