一個讓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.多級行政層都合並到第一層(也許算優點)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM