正文

EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

IP云
IP云V管理员/1 阅读
07/28
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

最近做项目想要在百度地图上叠加显示echart的散点图，然后根据地图的缩放等级和区域范围要显示不同的散点图，这中间折腾了好久。功能要求包括：

（1）底图使用百度地图；
（2）可以在地图上叠加显示echart的散点图；
（3）鼠标移动到散点图上面之后，可以浮动显示相关信息；
（4）能够获取当前显示区域地图的经纬度范围；
（5）能够响应地图的拖拽和缩放事件；

这里有两种选择：
1. 使用echart2的百度地图扩展，1， 3， 4， 5 都可以满足，就是2满足不了，他的一个series的所有图标样式都是一样的，大小也一样；
2. 使用echart3的百度地图扩展，可以满足1,2,3， 4 和5满足不了，因为获取不到百度地图对象；

在初步查看了echart2和echart3的源码之后，感觉还是使用echart3比较可能快速实现，毕竟echart3的bmap扩展代码有限，我们只要想办法从这个扩展中获取到百度地图对象，后续一切都好办了。
反复阅读echart3源码（参考https://github.com/ecomfe/echarts 的3.1.6版本）目录下的 extension\bmap文件夹内的bmap.js, BMapCoordSys.js, BMapModel.js, BMapModel.js，发现BMapCoordSys.js内的BMapCoordSys.create内通过bmapModel可以获取到bmap对象，而bmapModel是通过ecModel的eachComponent方法来传入的，通过查看调用堆栈，发现ecModel其实就是EChart的_model对象。

所以找到如下获取bmap对象的方法

  1. var ecModel = myChart._model;
  2. var bmap = null;
  3. ecModel.eachComponent('bmap', function (bmapModel) {
  4. if(bmap == null){
  5. bmap = bmapModel.__bmap;
  6. }
  7. });

找到bmap对象之后，就可以去使用bmap的各种api，响应他的各种事件了(http://developer.baidu.com/map/reference/index.php  )，比如：

  1. var pt = bmap.pixelToPoint({
  2. x: 800,
  3. y: 500
  4. });
  6. var pix = bmap.pointToPixel({
  7. lng: 114.31,
  8. lat: 30.52
  9. });
  11. alert('lng:' + pt.lng + ', lag: ' + pt.lat);
  12. alert('武汉的坐标： x:' + pix.x + ', y: ' + pix.y);
  13. bmap.addEventListener("dragend",function(){
  14. alert('缩放等级:' + bmap.getZoom());
  15. });
  17. bmap.addEventListener("moveend",function(){
  18. alert('缩放等级:' + bmap.getZoom());
  19. });



来自为知笔记(Wiz)