搁置了好长时间一直没来Echarts里面的地图篇章，感觉自己真懒！好了，现在先来总结一下地图这一块，有误或者不足的还望指教补充！
之前上一篇http://www.jianshu.com/p/5c59a562347f提到过，下载Echarts版本最好下载完整版的，因为这儿我掉过一次坑，echarts的版本是同事导入到项目中去的，所以没怎么注意是什么版本，结果在使用的时候，各个地方都是正确的，但是地图一直不显示，最后才发现是echarts的版本问题，当时应该是常用的那个版本，缺少了地图这个组件，所以后面改成完整版之后显示都正常了。
还有很重要的一点，如果要使用更详细的城市地图，或者是自己需求范围的地图，还得用空间GIS地图转换成了符合echarts的数据格式再使用，但是鉴于GIS地图都是保密数据，所以还有一个方式可能拿到自己想要的地图范围，用Arcgis自己画，如果没使用过这个软件的人估计画起来也够呛的。我还好，有一个给力的同事，正好这个专业的，画了一个成都的区域地图给我们用。接下来正式开始在地图上下功夫了！因为我做的是成都的地图，所以下面我就用成都地图为例。
首先，我们在Arcgis里面能获取到成都各区域的中心坐标，先将各区域的中心坐标和地点名称以数组的形式定义出来，例如：
var coor = {"双流区": [这里是双流区的中心坐标值]}
如果想做成一点向多点发射的那种效果，还需要将中心点区域的名称和坐标和发散出来的几个区域的名称和坐标同样以数组的形式定义出来，例如：
var testData = [
[{name:"高新区"},{name:'双流区',value = 100],
[{name:"高新区"},{name:'温江区',value = 20],
.......
]
这里的第一个name指的是发散的中心点，后面数组里的name指的是发散开来到达的一个区域点，value指的是该区域高亮显示的程度。参照下图中红色框里的点。
image.png
定义完这两个地方之后，就需要将地图的数据类型转化为echarts可以识别的类型，这个模板Echarts官网实例中有，参考：
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，然后开始怒怼地图了！！！
一：地图上城市或区域名称是否高亮显示
image.png
如果想在地图上高亮显示所有地区或城市的名称，统一设置：
geo:{
map: 'chengdu',
label: {
normal: {show:true}
}
}
但是这里因为比例问题，所以有些区域名称我是隐藏的，所以这里我是单独设置的。首先设置全部名称不显示，然后再单独选择区域显示或者不显示。
region: [{
name: '锦江区'，
itemstyle: {
normal: {
areaColor: '#4559ad',
borderColor: '#6a8de1'
}
},
label: {
emphasis: {
show: false
}
}
},
{
name: '郫都区',
itemStyle: {
normal: {
areaColor: '#4559ad',
borderColor: '#6a8de1'
}
},
label: {
normal: {
show: true,
textStyle: {
color: '#6072dc'
}
},
emphasis:{
textStyle: {
color: '#6072dc'
}
}
}
}]
当时琢磨这一块也画了点时间，毕竟这个文档太长太多，看得眼花缭乱的。接下来是设置标记的图形，Echarts官网给了几个示例，如果不想用，可以通过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设置是否开启拖拽漫游（移动和缩放）。
还有很多东西需要通过参考文档来操作。这里我主要用到的就这些，如果还有补充的，欢迎各位大佬补充交流！抱拳~
网友评论