echarts 實現省市區下鑽
最近公司有個專案需要實現省市區下鑽,本以為很簡單的操作就能實現該功能,沒想到遇到各種坑。只有親自嘗試方知其辛酸。
辛酸歷程(純屬嘮嗑):
第一版:最初LZ基於echarts去實現下鑽,發現echarts3.0後就沒有相應的區縣的地圖josn,就去網上各種找地圖json,基本都是csdn提供的(下載還要錢o(╥﹏╥)o),後面我有提供免費的下載連結。最初的一版地圖下鑽就這麼實現了,但資料聯調後我發現很多地圖資料都是錯的,畫出的輪廓以及區縣數量都不對。又害我白瞎折騰了半天(主要還是前期工作沒做好)
第二版:看到echart4.0官網推薦使用baidu地圖作為底圖去實現,參考了這個方法貌似實現了需求,在聯調後又發現被坑了,地圖輪廓區分明顯不對,山東省和遼寧省畫出來都接壤了,香港、澳門居然都沒有獲取到,還有很多區縣都不對,如黑龍江省大興安嶺地區加格達奇區就沒法獲取,又白瞎折騰了(當然有可能是LZ 玩法不對)
第三版:嘗試了下高德地圖,發現它繪畫行政區還挺準,基本上需要的區域都有,由於獲取到全國省地圖區域太多導致瀏覽器渲染時卡住了,瀏覽器渲染了上百萬個行政區域(小群島、小地方太多)導致奔潰,很是無賴。為提高效能最終全國省採用echarts中自帶的china.json去渲染,省與地級市通過高德地圖做背景層去渲染。
1、通過echarts 實現全國到省,省到市
官網有很多的案例可供參考,再次我就不提供了,給大家分享一個免費的省市區地圖json
2、通過百度地圖為底圖實現全國、省、地級市下鑽
可通過百度地圖自定義底圖 http://lbsyun.baidu.com/custom/ 去掉不必要的背景層,從而配置類似echart china.json地圖,
主要用到的自定義底圖、覆蓋物類Overlay、服務類Boundary等,具體可參考百度地圖API官網。由於該種方式並沒有實現理想效果且和後續的高德地圖類似,在此就不提供實現程式碼了,主要參考後續高德地圖。
最後附上百度地圖實現效果圖
全國
省
市