EChart系列：在echart3中使用百度地圖擴展之后，如何獲取到百度地圖對象

最近做項目想要在百度地圖上疊加顯示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對象的方法

   
   
   
           

    
    
    
            
var ecModel = myChart._model;
    
    
    
            
var bmap = null;
    
    
    
            
ecModel.eachComponent('bmap', function (bmapModel) { 
    
    
    
            
 if(bmap == null){
    
    
    
            
 bmap = bmapModel.__bmap;
    
    
    
            
 }
    
    
    
            
});
   
   
   
           

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

   
   
   
           

    
    
    
            
var pt = bmap.pixelToPoint({
    
    
    
            
 x: 800,
    
    
    
            
 y: 500
    
    
    
            
});
    
    
    
            

    
    
    
            
var pix = bmap.pointToPixel({
    
    
    
            
 lng: 114.31,
    
    
    
            
 lat: 30.52
    
    
    
            
});
    
    
    
            

    
    
    
            
alert('lng:' + pt.lng + ', lag: ' + pt.lat);
    
    
    
            
alert('武漢的坐標： x:' + pix.x + ', y: ' + pix.y);
    
    
    
            
bmap.addEventListener("dragend",function(){
    
    
    
            
 alert('縮放等級:' + bmap.getZoom());
    
    
    
            
});
    
    
    
            

    
    
    
            
bmap.addEventListener("moveend",function(){
    
    
    
            
 alert('縮放等級:' + bmap.getZoom());
    
    
    
            
});
   
   
   
           

來自為知筆記(Wiz)