ECharts 地圖繪製與鑽取簡易接口

1.地圖繪製過程原理

給定範圍邊界經緯度數據，再給它個名字就構成了繪製地圖的基礎。也就是說，你能夠繪製任意形狀的地圖版塊。

2.地圖數據生成

中國以及省市縣等地圖的基礎數據能夠從這裏生成與下載。 http://datav.aliyun.com/tools/atlas 有了地圖範圍數據，在 echarts 中經過 registerMap 給這塊註冊個名字，便可爲後續繪製使用，如下代碼以最簡形式繪製一幅中國地圖。

$.getJSON('https://geo.datav.aliyun.com/areas/bound/100000_full.json', function (data) {
    var name = "中國地圖";
    // 註冊一個地圖名稱
    echarts.registerMap(name, data);  
    
    var myChart = echarts.init(document.getElementById('map')); 
    var mapOption = { 
        series: [ 
        { 
           type: 'map',   // 指明地圖類型
           map: name,     // 指明取的名稱
           label: {show:true},
           roam: true     // 可縮放
        } ]
    };  
    myChart.setOption(mapOption, true); 
});

3.封裝造成簡易接口

3.1接口定義

從使用方式與指望結果出發來定義接口。指望給定區域名稱，指定繪製位置（DOM元素）便可完成工做。同時但願能控制是否支持鑽取，這就造成了最基礎的接口定義。

/** 根據名稱加載地圖
 *  @param elementId : DOM 元素ID
 *  @param name      : 地圖名稱（僅已定義的地區名稱）
 *  @param drill     : 是否支持鑽取
 */
ChinaMap.loadMap = function(elementId, name, drill) {...}

3.2接口實現

（1）支持多地圖圖表繪製，定義 ChartList 來記錄每一個DOM元素對應的圖表對象。 （2）支持鑽取，創建省市名稱的層級關係，市編碼前兩位爲省編碼。

ChinaMap.provinceCodes={'13':'河北','14':'山西',...}
ChinaMap.cityCodes={"石家莊市":"130100","唐山市":"130200",...}

（3）動態加載相應名稱的數據繪製地圖，形如第2節中的示例。 （4）擴展方法：取地圖層級路徑。如獲得「中國-湖南-長沙市」的路徑，且相應的名稱可點擊跳轉。 詳細實現代碼請訪問： https://github.com/triplestudio/helloworld/tree/master/china_map

4.達成應用效果

4.1可鑽取的中國地圖

使用如下代碼便可在指定的元素中繪製一幅可鑽取的中國地圖。

ChinaMap.loadMap('map', 'china', true);

方法 ChinaMap.loadMap 後會返回 echarts 圖表對象，能夠進一步進行操做。這裏，使用如下代碼在鑽取時獲得層級路徑，以便達到可向上跳轉的效果。

ChinaMap.loadMap('map', 'china', true).on('click', function(param){  
    $("#path").html(ChinaMap.formatPath('map', param.name));
});

4.2各省地圖

因爲只須要指定名稱和顯示元素ID，那麼遍歷各省名稱便可快速完成各省地圖的繪製。

for(var prov in ChinaMap.provinces){
    $("#main").append("<div id='" + ChinaMap.provinces[prov] + "' class='box'></div>");
    ChinaMap.loadMap(ChinaMap.provinces[prov], prov);
}

相關代碼與數據可在此下載： https://github.com/triplestudio/helloworld/releases

原文出處：https://www.cnblogs.com/timeddd/p/11169188.html