1.地圖繪制過(guò)程原理
給定范圍邊界經(jīng)緯度數(shù)據(jù)庇忌，再給它個(gè)名字就構(gòu)成了繪制地圖的基礎(chǔ)贤牛。也就是說(shuō)徙歼，你可以繪制任意形狀的地圖版塊碎乃。
2.地圖數(shù)據(jù)生成
中國(guó)以及省市縣等地圖的基礎(chǔ)數(shù)據(jù)可以從這里生成與下載姊扔。
http://datav.aliyun.com/tools/atlas
有了地圖范圍數(shù)據(jù)，在 echarts 中通過(guò) registerMap 給這塊注冊(cè)個(gè)名字梅誓，即可為后續(xù)繪制使用恰梢，以下代碼以最簡(jiǎn)形式繪制一幅中國(guó)地圖佛南。
$.getJSON('https://geo.datav.aliyun.com/areas/bound/100000_full.json', function (data) {
var name = "中國(guó)地圖";
// 注冊(cè)一個(gè)地圖名稱
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.封裝形成簡(jiǎn)易接口
3.1接口定義
從使用方式與期望結(jié)果出發(fā)來(lái)定義接口。期望給定區(qū)域名稱嵌言，指定繪制位置（DOM元素）即可完成工作嗅回。同時(shí)希望能控制是否支持鉆取，這就形成了最基礎(chǔ)的接口定義摧茴。
/** 根據(jù)名稱加載地圖
* @param elementId : DOM 元素ID
* @param name : 地圖名稱（僅已定義的地區(qū)名稱）
* @param drill : 是否支持鉆取
*/
ChinaMap.loadMap = function(elementId, name, drill) {...}
3.2接口實(shí)現(xiàn)
（1）支持多地圖圖表繪制绵载，定義 ChartList 來(lái)記錄每個(gè)DOM元素對(duì)應(yīng)的圖表對(duì)象。
（2）支持鉆取苛白，建立省市名稱的層級(jí)關(guān)系娃豹，市編碼前兩位為省編碼。
ChinaMap.provinceCodes={'13':'河北','14':'山西',...}
ChinaMap.cityCodes={"石家莊市":"130100","唐山市":"130200",...}
（3）動(dòng)態(tài)加載相應(yīng)名稱的數(shù)據(jù)繪制地圖购裙，形如第2節(jié)中的示例懂版。
（4）擴(kuò)展方法：取地圖層級(jí)路徑。如得到“中國(guó)-湖南-長(zhǎng)沙市”的路徑躏率，且相應(yīng)的名稱可點(diǎn)擊跳轉(zhuǎn)躯畴。
詳細(xì)實(shí)現(xiàn)代碼請(qǐng)?jiān)L問(wèn)：
https://github.com/triplestudio/helloworld/tree/master/china_map
4.達(dá)成應(yīng)用效果
4.1可鉆取的中國(guó)地圖
使用以下代碼即可在指定的元素中繪制一幅可鉆取的中國(guó)地圖。
ChinaMap.loadMap('map', 'china', true);
方法 ChinaMap.loadMap 后會(huì)返回 echarts 圖表對(duì)象薇芝，可以進(jìn)一步進(jìn)行操作蓬抄。這里，使用以下代碼在鉆取時(shí)得到層級(jí)路徑恩掷，以便達(dá)到可向上跳轉(zhuǎn)的效果倡鲸。
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);
}
相關(guān)代碼與數(shù)據(jù)可在此下載：
https://github.com/triplestudio/helloworld/releases
