Echart series: After using Baidu map extension in Echart3, how to get to Baidu map object

Recently do the project want to overlay on the Baidu map display Echart scatter chart, and then according to the map zoom level and area range to display different scatter plot, this middle toss for a long time. Functional requirements include: (1) Basemap using Baidu Map, (2) can be superimposed on the map display Echart scatter chart, (3) the mouse moved to the above scatter chart, you can float to display relevant information, (4) to obtain the current display area map latitude and longitude range, (5) to respond to the map drag and zoom events;
Here are two options: 1. Baidu map extension using Echart2, 1, 3, 4, 5 can be satisfied, is 2 satisfied, his one series of all the icon style is the same, the same size; 2. Using echart3 Baidu Map extension, can meet the 4 and 5, not meet, because access to Baidu map object;
In the preliminary view of the source code of ECHART2 and Echart3, feel or use echart3 comparison may be quickly realized, after all, echart3 bmap extension Code is limited, we just want to find a way from this extension to Baidu map object, all the follow-up is good. Read and repeat the ECHART3 source code (refer to the Https://github.com/ecomfe/echarts version 3.1.6) in the Extension\bmap folder under the Bmap.js, Bmapcoordsys.js, Bmapmodel.js, Bmapmodel.js, foundwithin the Bmapcoordsys.jsThe Bmap object can be obtained through Bmapmodel in Bmapcoordsys.create, and Bmapmodel is passed through Ecmodel eachcomponent method, by looking at the call stack and discoveringEcmodel is actually the _model object of Echart.
sofind the following method to get the Bmap object

 
   
  

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

Once the Bmap object is found, you can use the various APIs of BMAP to respond to his various events (http://developer.baidu.com/map/reference/index.php), such as:

  
 

   
  

  
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());
   
  

  
});
  
 

From for notes (Wiz)

Echart series: After using Baidu map extension in Echart3, how to get to Baidu map object