echarts地图钻取方案的实现

    地图钻取是一级一级的深入进去的，返回的时候是一级一级的返回的，使用堆栈存储地理信息的层级数据额外合适。我们默认展示的是世界地图，当点击下一级地理数据时，如果下一级地理数据有名称，将下一级地理数据压入堆栈。

    获取下一级的名称对应的地图基础数据json，如果下一级因为名称对应的地图基础数据json不存在，则无法钻入，则将堆栈出栈一个，保证这次点击没有对堆栈数据造成影响。因为中国和世界地图在全局的js中有，不用再去动态获取地理信息数据json文件了。

    这样一级一级的深入进去，地图的层级数据就会保存在堆栈里，堆栈保留任何一个地理单元的所有层级数据，用于传参时使用。

    当点击返回按钮时，将堆栈数据出栈，数据数据层级便少了最后一级。返回按钮只有在层级数量多余一级时使用，可以保证第一级地图（世界地图）不会有返回按钮的存在了。

    var mapArray = ['world'];//存储地理信息的堆栈

    /** 加载设备分布世界地图 * */
function load_world_map() {
var middleMap = mapArray[mapArray.length - 1];
if(middleMap == 'world' || middleMap == '中国'){
draw_map();
}else{
$.get(Global.assets+'/resource/thirdparty/echarts4/json/province/' + middleMap + '.json').done(function (geoJson) {
echarts.registerMap(middleMap, geoJson);
draw_map();
}).fail(function(){
mapArray.pop(); 
   });
}
}


function draw_map(){
//传入地理信息参数
params['country'] = (mapArray.length > 1)?compute_basecode(mapArray[1],'world'):"";
params['province'] = (mapArray.length > 2)?compute_basecode(mapArray[2],'china'):"";
params['city'] = (mapArray.length > 3)?compute_basecode(mapArray[3],'china'):"";
//先销毁前面的实例，避免缩放产生效果影响后面的地图
var lastChart = echarts.getInstanceByDom(document.getElementById('world_map'));
if(lastChart != null){
echarts.dispose(lastChart);
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('world_map'),global_theme);
myChart.showLoading();
//控制返回按钮是否显示
var graphics = [];
var backMap = function(){
if(mapArray.length > 1){
        mapArray.pop();
        load_world_map();
        }
}
if(mapArray.length > 1){
graphics = [{
       id: 'left-btn',
       type: 'circle',
       shape: { r: 20 },
       style: {
           text: '<',
           fill: '#eee'
       },
       left: 17,
       top: 0,
       onclick: backMap
   }, {
       id: 'right-btn',
       type: 'text',
       style: {
           text: '返回上一级',
           fill: '#eee'
       },
       left: 10,
       top: 44,
       onclick: backMap
   }];
}
$.get(decorateUrl(world_map_data_address,params)).done(function(data) {
var current = mapArray[mapArray.length-1];
var method = 'china_point';
if(current == 'world'){method = 'world_point';}
var data = compose_echarts(data,method);
myChart.hideLoading();
myChart.setOption({
graphic: graphics,
   tooltip: {
       trigger: 'item'
   },
   dataRange: {
    show:false,
       min: data.min,
       max: data.max,
       x: 'left',
       y: 'bottom',
       text:['高','低'],           // 文本，默认为数值文本
       calculable : true
   },
   series: [
       {
           name: '在线设备数',
           type: 'map',
           mapType: (current=='中国')?'china':current,
           roam: true,
           itemStyle:{
               emphasis:{label:{show:true}}
           },
           data:data.data,
           nameMap:data.nameMap
       }
   ]
});
myChart.off('click');
myChart.on('click',function(param){
var address = param.name;
if(address!=null && address != ""){
mapArray.push(address);
load_world_map();
}
});

});

        //下面放联动部分的代码即可。

}