echarts自定义地图

先看看效果

拿到需求后，作为一个java后台开发人员，突然去搞这前端，感觉有点麻烦的。但事情总要有人做，硬着头皮上吧?

地图有两个难点

1.地图 效果看上去像3d地图，当使用3d地图实现不了所需要的边框效果和背景颜色。

2.地图是乡镇级别的，甚至乡镇级别中让我自己去划分街道的。

如何解决。直接上代码开讲吧

第一步：获取前乡镇级别的经纬度

  1.下载BigemapGIS Designer，下载地址：http://www.bigemap.com/reader/download/ ，选择全能版本即可

2.安装，打开，选择到你所需要的乡镇，我这里以浙江省安吉县下所有乡镇为案列，一个县有多个乡镇，需要一个个的导出

导出保存格式为.kml

第二步，打开自定义地图工具： http://geojson.io/#map=2/20.0/0.0

 1.把上面下载的  鄣吴镇.kml  导入地图中

 

2.就可以获取到地图经纬度了

3.把地图经纬度复制到项目js中，把县下面的所有乡镇集合在一起，如下，由于经纬度代码太长，只展示部分

4.把js引入 echarts即可

5.效果展示

 

第三步. 对于乡镇中的街道如果划分的，以为工具只实现到乡镇级别，没有到具体街道。已递铺镇为案列，递铺镇划分为递铺街道，昌硕街道，灵峰街道；怎么实现。只能根据UI设计图来大概划分了，没什么好的办法

 1.看看UI原型

 

但地图上的递铺镇是这样的，是三个街道的区域总和了，怎么区分开，一分三

只能慢慢的勾画了，如果有其它的方法欢迎交流一下，我这里只是大概随便勾画的，如果实操需要放大具体一点画。

这样就一分为三了，然后到右边获取生产的经纬度

最后，经纬度放入js中，最终效果如下