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 格式的資料，具體格式見 。

• specialAreas：可選引數，細節配置，具體參考文件。

現在我們欠缺的就只是 geoJson 檔案了。下面我們需要用到北京市的 geoJson 檔案，可以到我的個人 github 上自取

我們透過北京市的 json 檔案可以得到西城區的 geoJson 如下：

複製西城區geoJson

然後我們開啟，這是一個可以線上繪製 geoJson 的網站，就是因為它我們才能隨心所欲的繪製我們想要的地圖樣式和 geoJson 資料。將前面得到的西城區 geoJson 資料貼上上去：

下面你就可以自由發揮了，因為複製過來的是一整塊的資料，你要將圖形按各區範圍分為對應的塊，修改左邊的圖形，右邊的 geoJson 資料會自動更新。當然，你也可以完全從零開始，繪製你自己的地圖，這樣自由度更大。

其實，如果你也可以忽略掉後邊的地圖，地圖只是給你一個參照。你完全可以把它當做一個畫圖工具，最後用到的是右側的 geoJson 資料，透過 echarts.registerMap() 方法生成 echarts 地圖，搞定！！

獲取xicheng.json初始化地圖

案例原始碼已上傳

作者：Mr_ZhangQian
連結：