擱置了好長時間一直沒來Echarts里面的地圖篇章帘腹，感覺自己真懶沫勿！好了，現(xiàn)在先來總結一下地圖這一塊叉橱，有誤或者不足的還望指教補充！
之前上一篇http://www.reibang.com/p/5c59a562347f提到過者蠕，下載Echarts版本最好下載完整版的窃祝，因為這兒我掉過一次坑，echarts的版本是同事導入到項目中去的踱侣，所以沒怎么注意是什么版本粪小，結果在使用的時候大磺，各個地方都是正確的，但是地圖一直不顯示探膊，最后才發(fā)現(xiàn)是echarts的版本問題杠愧，當時應該是常用的那個版本，缺少了地圖這個組件突想，所以后面改成完整版之后顯示都正常了殴蹄。
還有很重要的一點究抓，如果要使用更詳細的城市地圖猾担，或者是自己需求范圍的地圖，還得用空間GIS地圖轉換成了符合echarts的數(shù)據(jù)格式再使用刺下，但是鑒于GIS地圖都是保密數(shù)據(jù)绑嘹，所以還有一個方式可能拿到自己想要的地圖范圍，用Arcgis自己畫橘茉，如果沒使用過這個軟件的人估計畫起來也夠嗆的工腋。我還好，有一個給力的同事畅卓，正好這個專業(yè)的擅腰，畫了一個成都的區(qū)域地圖給我們用。接下來正式開始在地圖上下功夫了翁潘！因為我做的是成都的地圖趁冈，所以下面我就用成都地圖為例。
首先拜马，我們在Arcgis里面能獲取到成都各區(qū)域的中心坐標渗勘，先將各區(qū)域的中心坐標和地點名稱以數(shù)組的形式定義出來，例如：
var coor = {"雙流區(qū)": [這里是雙流區(qū)的中心坐標值]}
如果想做成一點向多點發(fā)射的那種效果俩莽，還需要將中心點區(qū)域的名稱和坐標和發(fā)散出來的幾個區(qū)域的名稱和坐標同樣以數(shù)組的形式定義出來旺坠，例如：
var testData = [
[{name:"高新區(qū)"},{name:'雙流區(qū)',value = 100],
[{name:"高新區(qū)"},{name:'溫江區(qū)',value = 20],
.......
]
這里的第一個name指的是發(fā)散的中心點，后面數(shù)組里的name指的是發(fā)散開來到達的一個區(qū)域點扮超，value指的是該區(qū)域高亮顯示的程度取刃。參照下圖中紅色框里的點。
定義完這兩個地方之后出刷，就需要將地圖的數(shù)據(jù)類型轉化為echarts可以識別的類型蝉衣，這個模板Echarts官網(wǎng)實例中有，參考：
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord
}, {
coord: toCoord
}]);
}
}
return res;
};
切記巷蚪，這里需要引入所需城市地圖的js文件病毡，不然該城市的地圖是獲取不到的哦~后面就跟之前介紹的步驟類似了，開始定義一個option屁柏，然后開始怒懟地圖了＠材ぁＳ兴汀！
一：地圖上城市或區(qū)域名稱是否高亮顯示
如果想在地圖上高亮顯示所有地區(qū)或城市的名稱僧家，統(tǒng)一設置：
geo:{
map: 'chengdu',
label: {
normal: {show:true}
}
}
但是這里因為比例問題雀摘，所以有些區(qū)域名稱我是隱藏的，所以這里我是單獨設置的八拱。首先設置全部名稱不顯示阵赠，然后再單獨選擇區(qū)域顯示或者不顯示。
region: [{
name: '錦江區(qū)'肌稻，
itemstyle: {
normal: {
areaColor: '#4559ad',
borderColor: '#6a8de1'
}
},
label: {
emphasis: {
show: false
}
}
},
{
name: '郫都區(qū)',
itemStyle: {
normal: {
areaColor: '#4559ad',
borderColor: '#6a8de1'
}
},
label: {
normal: {
show: true,
textStyle: {
color: '#6072dc'
}
},
emphasis:{
textStyle: {
color: '#6072dc'
}
}
}
}]
當時琢磨這一塊也畫了點時間清蚀，畢竟這個文檔太長太多，看得眼花繚亂的爹谭。接下來是設置標記的圖形枷邪，Echarts官網(wǎng)給了幾個示例，如果不想用诺凡，可以通過url鏈接东揣，自定義標記的圖形。
ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'腹泌。也可以通過 'image://url' 設置為圖片嘶卧，其中 url 為圖片的鏈接，或者 dataURI凉袱〗嬉鳎可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比于使用圖片的方式绑蔫，不用擔心因為縮放而產生鋸齒或模糊运沦，而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小配深。
series:[{
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: rect,
symbolSize: 15
}
}]
最后携添，設置遷徙圖的路程線直接通過linestyle設置即可，具體參考文檔了篓叶。對了烈掠，還有一點，roam設置是否開啟拖拽漫游（移動和縮放）缸托。
還有很多東西需要通過參考文檔來操作左敌。這里我主要用到的就這些，如果還有補充的俐镐，歡迎各位大佬補充交流矫限！抱拳~
