一個讓echarts中國地圖包含省市輪廓的技巧

背景知識及應用簡介

    本文主要介紹一個使用ECharts地圖組件的取巧方法，該技巧源於實際需求中遇到的問題，通常沒有該需求的話這個技巧也是用不到的。有前端基礎和以及對ECharts有了解的人基本能夠讀懂本文。

    可能官方也提供過總體的地圖庫，但可能我的能力有限，並無找到相關信息或者其餘解決方案，若是知道的園友請告訴我。

    ECharts，一個純 Javascript 的圖表庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。

    上句話摘自ECharts的官方文檔。ECharts支持許多圖表類型，而在用到其中的地圖組件時，官方提供了許多地圖庫數據，每種地圖數據都提供了Js和JSON兩種存儲方式，下載地址：http://echarts.baidu.com/download-map.html

    若是連接失效自行去Echarts官網找吧。

    

 

回到頂部

遇到的問題

    百度提供的地圖組件支持放大縮小，而本人遇到的需求是，在中國地圖放大後能在中國地圖輪廓內看到省內的輪廓信息。而不管是上面的預覽圖仍是地圖的實際效果，都是：世界地圖有全部國家的輪廓，但沒有每一個國家內的輪廓信息；中國地圖有省級行政區的輪廓，但沒有省級行政區內進一步的輪廓信息。

    具體點的例子，若是載入是中國地圖數據，放大後以下圖：

    

    圖中能看到江蘇省和上海市的輪廓圖，可是想進一步看江蘇省內各市或者上海市內各區的輪廓那就作不到了，除非從新載入省市的地圖，但這樣就脫離了中國的大地圖輪廓。

回到頂部

解決方案

   沒找到其餘方案最後轉爲研究地圖數據自己來，這裏我用了上海的地圖數據，分別打開了china.json和shanghai.json，這兩個文件均可以從ECharts的地圖庫數據頁面上下載到。對比其中的Json數據結構。（這裏我使用了在線Json工具網站json.cn）

    (左邊是json原數據，右邊是摺疊過的數據結構)

   china.json

    

 

 

     shanghai.json

    

    從兩張圖能夠發現其數據是相似的，其中china.json的features有34條數據，應該是表明中國34個省級行政區；shanghai.json的features有17條數據，表明上海17個區域。

    因而，我不關心features裏面每一項的結構是什麼，把兩個json合併一下（features的數據合併一下）。

    

 

    如今是51條數據，那麼載入這個地圖數據，放大上海區域看看效果：

 

    看起來能夠了。（除了邊緣，邊緣問題是上海地圖和中國地圖在上海部分並不能徹底重合的緣由吧）（文字密集問題先忽略吧，能夠用其餘方法規避）

    同理，若是想要弄其餘省市信息，就要下載其餘省市的地圖數據，合併到china.json中。

    這樣作雖然解決了問題，但仍是有些缺點：

    1.地圖數據會過大

    2.部分邊緣重合問題

    3.多級行政層都合併到第一層（也許算優勢）