echarts提供了全國各省市及區(qū)縣的js和json文件欺嗤，但是并沒有細化到區(qū)域內各街道范圍，有時候項目中又有這種需求综苔，領導給予重任，我們又不能輕易拒絕佳励，只能是硬著頭皮上了休里。
今天我們以北京市西城區(qū)各街道地圖為例，教大家如何應對各種變態(tài)echarts地圖類需求赃承。
前段時間接到任務，需求是將北京市西城區(qū)各街道悴侵，用echarts地圖形式展現(xiàn)出來瞧剖。我們應該知道使用echarts實現(xiàn)北京市地圖展示還是比較簡單的效果，只需要引入對應的beijing.js或者北京市的beijing.json數據可免，根據官方文檔配置就可以輕松實現(xiàn)抓于。
但是源碼中并沒有細分到城區(qū)中各街道的范圍，所以就不能在使用echarts提供的文件了浇借。
在官方文檔API中捉撮，echarts 有一個registerMap(mapName,geoJson,specialAreas)方法，此方法有3個參數：
- mapName：地圖名稱妇垢，這里的名稱要與地圖配置中 option--series--mapType 的值保持一致巾遭。
- geoJson：geoJson 格式的數據，具體格式見 http://geojson.org/闯估。
- specialAreas：可選參數灼舍，細節(jié)配置，具體參考文檔涨薪。
現(xiàn)在我們欠缺的就只是 geoJson 文件了骑素。下面我們需要用到北京市的 geoJson 文件，可以到我的個人 github 上自取 https://github.com/zhangqian00/echarts3-mapFile
我們通過北京市的 json 文件可以得到西城區(qū)的 geoJson 如下：
然后我們打開http://geojson.io刚夺，這是一個可以在線繪制 geoJson 的網站献丑，就是因為它我們才能隨心所欲的繪制我們想要的地圖樣式和 geoJson 數據末捣。將前面得到的西城區(qū) geoJson 數據粘貼上去：
下面你就可以自由發(fā)揮了，因為復制過來的是一整塊的數據创橄，你要將圖形按各區(qū)范圍分為對應的塊箩做，修改左邊的圖形，右邊的 geoJson 數據會自動更新筐摘。當然卒茬，你也可以完全從零開始，繪制你自己的地圖咖熟，這樣自由度更大圃酵。
其實，如果你也可以忽略掉后邊的地圖馍管，地圖只是給你一個參照郭赐。你完全可以把它當做一個畫圖工具，最后用到的是右側的 geoJson 數據确沸，通過 echarts.registerMap() 方法生成 echarts 地圖捌锭，搞定！罗捎！
案例源代碼已上傳 https://github.com/zhangqian00/
公眾號：前端很忙
做一個喜歡分享的前端開發(fā)者观谦！
獲取更多干貨分享，歡迎來搞桨菜！
