echarts實現中國地圖(部分省份版)


  項目最近需要實現地圖,最后實現的樣子大概是這樣。

  

 

   通過這次功能實現,我感覺到我確實有了些程序思維了。

  一開始看到需求,我聯想到前段時間的中國疫情地圖,又想到echarts官網好像也有地圖相關的例子。但當我去官網找時,發現已經沒有地圖的案例了。似乎因為相關法律規定而下線了。

  但沒關系,網上有很多例子。

  可網上的例子大概只有2種,全國的,世界的,單省份的,沒有我需要的中國地圖里特定幾個省份。

  先不糾結這個我問,我先需要實現個中國地圖。

  實現中國地圖需要2個文件,echarts、china.js。可能還需要個jquery.js。其他人的博客里應該都有鏈接,我就不重復貼了。

  一開始我的地圖顯示不出來,只顯示個長方形,鼠標移上去是南海諸島。看了下consle,發現是因為echarts文件沒引好的原因。引好就可以了。

  地圖顯示出來了,怎么讓他只顯示單獨幾個省份?

  我看了下china.js文件,里面echarts.registerMap,這個方法,里面數據是有規律的,大概就是json方式放入數據。

  找到了阿里的這個網站

  http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

  在這里選擇需要的省份,把數據填進去就好。

  地圖上需要顯示省份名稱,在series屬性里設置,

  label: {
    normal: {
      show: true
    },
    emphasis: {
      show: true
    }
  },

  右下角有個南海諸島的東西,看上去就很丑。網上現有的2個辦法,設置數據我試了,不行~鼠標移上去還是會有東西,設置geo屬性,不行~不知道哪里沒設對。

  於是試了下最近學到的在google里用英文關鍵字,找到了echarts里一個issue記錄。

  把地圖里的key改成china2,相應的,series里也用china2。

  以上,我實現中國部分省份地圖的思路,分享給遇到類似問題的朋友~

   

 


免責聲明!

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



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