1.地圖繪制過程原理

給定范圍邊界經(jīng)緯度數(shù)據(jù)，再給它個名字就構(gòu)成了繪制地圖的基礎(chǔ)。也就是說，你可以繪制任意形狀的地圖版塊。

2.地圖數(shù)據(jù)生成

中國以及省市縣等地圖的基礎(chǔ)數(shù)據(jù)可以從這里生成與下載。

http://datav.aliyun.com/tools/atlas

有了地圖范圍數(shù)據(jù)，在 echarts 中通過 registerMap 給這塊注冊個名字，即可為后續(xù)繪制使用，以下代碼以最簡形式繪制一幅中國地圖。

$.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接口定義

從使用方式與期望結(jié)果出發(fā)來定義接口。期望給定區(qū)域名稱，指定繪制位置（DOM元素）即可完成工作。同時希望能控制是否支持鉆取，這就形成了最基礎(chǔ)的接口定義。

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

3.2接口實現(xiàn)

（1）支持多地圖圖表繪制，定義 ChartList 來記錄每個DOM元素對應(yīng)的圖表對象。

（2）支持鉆取，建立省市名稱的層級關(guān)系，市編碼前兩位為省編碼。

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

（3）動態(tài)加載相應(yīng)名稱的數(shù)據(jù)繪制地圖，形如第2節(jié)中的示例。

（4）擴(kuò)展方法：取地圖層級路徑。如得到“中國-湖南-長沙市”的路徑，且相應(yīng)的名稱可點擊跳轉(zhuǎn)。

詳細(xì)實現(xiàn)代碼請訪問：https://github.com/triplestudio/helloworld/tree/master/china_map

4.達(dá)成應(yīng)用效果

4.1可鉆取的中國地圖

使用以下代碼即可在指定的元素中繪制一幅可鉆取的中國地圖。

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

方法 ChinaMap.loadMap 后會返回 echarts 圖表對象，可以進(jìn)一步進(jìn)行操作。這里，使用以下代碼在鉆取時得到層級路徑，以便達(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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對VeVb武林網(wǎng)的支持。