echarts搞定各种地图（想怎么画就怎么画）

西城区各街道效果图

echarts提供了全国各省市及区县的js和json文件，但是并没有细化到区域内各街道范围，有时候项目中又有这种需求，领导给予重任，我们又不能轻易拒绝，只能是硬着头皮上了。

今天我们以北京市西城区各街道地图为例，教大家如何应对各种变态echarts地图类需求。

---

前段时间接到任务，需求是将北京市西城区各街道，用echarts地图形式展现出来。我们应该知道使用echarts实现北京市地图展示还是比较简单的效果，只需要引入对应的beijing.js或者北京市的beijing.json数据，根据官方文档配置就可以轻松实现。

但是源码中并没有细分到城区中各街道的范围，所以就不能在使用echarts提供的文件了。

在官方文档API中，echarts 有一个registerMap(mapName,geoJson,specialAreas)方法，此方法有3个参数：

• mapName：地图名称，这里的名称要与地图配置中 option--series--mapType 的值保持一致。
• geoJson：geoJson 格式的数据，具体格式见 http://geojson.org/。
• specialAreas：可选参数，细节配置，具体参考文档。

现在我们欠缺的就只是 geoJson 文件了。下面我们需要用到北京市的 geoJson 文件，可以到我的个人 github 上自取 https://github.com/zhangqian00/echarts3-mapFile

我们通过北京市的 json 文件可以得到西城区的 geoJson 如下：

复制西城区geoJson

然后我们打开http://geojson.io，这是一个可以在线绘制 geoJson 的网站，就是因为它我们才能随心所欲的绘制我们想要的地图样式和 geoJson 数据。将前面得到的西城区 geoJson 数据粘贴上去：

下面你就可以自由发挥了，因为复制过来的是一整块的数据，你要将图形按各区范围分为对应的块，修改左边的图形，右边的 geoJson 数据会自动更新。当然，你也可以完全从零开始，绘制你自己的地图，这样自由度更大。

其实，如果你也可以忽略掉后边的地图，地图只是给你一个参照。你完全可以把它当做一个画图工具，最后用到的是右侧的 geoJson 数据，通过 echarts.registerMap() 方法生成 echarts 地图，搞定！！

获取xicheng.json初始化地图

案例源代码已上传 https://github.com/zhangqian00/

公众号：前端很忙

公众号：前端很忙

做一个喜欢分享的前端开发者！

获取更多干货分享，欢迎来搞！