详解百度echarts如何自定义地图板块，实现鼠标交互效果

声明：理工科的同志，语言组织能力差，轻喷

先吐槽一下，自从大数据流行起来过后，做开发的很多朋友都遇到了一个调侃的问题：为什么你们都那么喜欢研究地球。我只能说，没办法啊，现在的大数据需求，动不动就是我需要在地图上实时显示数据变化。

吐槽结束、装逼开始

之前公司做项目的时候，遇到了一个问题，就是要在地图上展示各个乡镇的灾害数据。然而用过echarts的朋友应该都知道，echarts提供的地图数据，最小只能到县级，县级以下的数据是没有的。刚开始拿到这个需求的时候，我是无从下手的，因为我不知道怎么自定义地图。还好公司有个前端经验比我丰富的，他说可以用canvas把地图画出来。所以我们当时的约定是，等他用canvas把地图画好后，我再用它画好的地图进行数据渲染。过了几天，地图确实是画出来了，但地图是死的，关于echarts的那些功能，一个都不能用，必须自己写，但对于用画布画地图这点，一是我佩服他，也让我学会了怎么画，感觉还是蛮有收获的。这对我来说，能力达不到，从需求角度来说，这样太死了，不灵活。于是我开始研究关于echarts自定义地图的方式。首先的想到的是，echarts不是有个注册地图的功能吗，我去下载一个中国的地图json下来，对着格式写一个再注册不就OK了吗。但是，想法很美好，现实很残酷。第一，不知道什么原因，官网的地图不提供下载了，当时还说了不能下载的原因，'ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务'。我写到这里时的时间是2017-12-16 21:00:03，特意去官网看了一下，还是不能下载。后来好不容易找到地图数据了，却又大失所望了，里面的数据就跟你用记事本打开一张图片的感觉一样，完全不知道什么意思。所以等于没什么作(luan)用。

至于后来，我也不知道从哪里看到了一个json文件，还算能看懂，就照着那个样子试了一下，没想到还真的行了。这里说的行，是指我把自己照着写的json文件通过echarts调用，真能渲染出一块地图信息来了。于是，我开始了地图的获取，但当你解决了数据格式的问题之后，你会发现，地图数据的获取才是个麻烦事。因为你不仅要知道个地区的边界点，你还得把这些点一个一个的从地图上找出来，最重要的一点，就是当两个地区有共享的边界线时，你得保证数据一模一样。我这里先说一下地图文件的json格式，再说怎么在地图上获取点的操作。

json格式文件如下：

varXwByMapJson={

"type":"FeatureCollection",

"features":[

{

"type":"Feature",

"properties":{

"id":"35",

"name":"六屯镇",

"cp":[106.841247,26.96184],

"childNum":1

},

"geometry":{

"type":"Polygon",

"coordinates":[

[

[106.778869,26.964416],

[106.783755,26.964545],

//...

]

/*一个区域被分成多块了的时后，

* 这里继续添加数组就行*/

]

}

},

{

"type":"Feature",

"properties":{

"id":"31",

"name":"谷堡乡",

"cp":[106.514695,26.856174],

"childNum":1

},

"geometry":{

"type":"Polygon",

"coordinates":[

[

[106.521306,26.908246],

[106.525331,26.899999],

//...

]

]

}

},

{

"type":"Feature",

"properties":{

"id":"102",

"name":"白云区",

"cp":[106.671072,26.717884],

"childNum":1

},

"geometry":{

"type":"Polygon",

"coordinates":[

[

[106.67021,26.787695],

[106.688032,26.794274],

//...

]

]

}

}

]

}

这里简单说明一下，各个属性的key值不能变，type属性对应的value是固定不能变的，coordinates属性下的数组，层级不能少。由于微信公众号的文字限制，我不可能把整个json文件全部展示出来，想必聪明的你已经猜到了，我打省略号的地方，就是地图数据，一个数组对应一个点，第一项表示经度，第二项表示纬度。但如果一个地区是由几个小部分组成的，就分成多个数组，每个数组表示一个区块，具体看代码中我加/**/的地方。id和name是根据自己的实际情况来填写，features数组里面的每一个对象代表一个地区，childNum就是子区块个数的意思。

再说一下关于地图点的获取问题。首先，你必须得有一张地图，上面得有各个地区的边界线，因为有了边界线，你才知道点应该描在地图的哪个地方。我当时是由设计师那边提供了一张各乡镇的地图才搞定的，看一下最终效果图。鼠标移到某个区块的时候，会显示受灾总面积，移到具体的某个点上的时候，显示本区域该灾害的面积。

以我上面的json为例，在echarts中注册地图数据。

varmyChart = echarts.init(document.getElementById('canvasContainer'));

echarts.registerMap('XW', XwByMapJson);

注册好之后，你就可以用echarts的所有API了。下面贴上我的代码实现：