如何制作數(shù)據(jù)可視化地圖

2021-8-15    資深UI設(shè)計(jì)者


第三方地圖的獲取和對(duì)接

普通地圖一般都是去對(duì)接三方平臺(tái)，如百度地圖、高德地圖、騰訊地圖、谷歌地圖等。他們都會(huì)提供對(duì)應(yīng)的地圖開放服務(wù)。以高德地圖為例，實(shí)操一下地圖的獲取和調(diào)色方法以及最后跟開發(fā)交付的流程。

首先登錄高德開放平臺(tái)，點(diǎn)擊右上角控制臺(tái)


進(jìn)入控制臺(tái)會(huì)進(jìn)入下圖頁面（大家可以多點(diǎn)點(diǎn)查看下平臺(tái)的相關(guān)功能內(nèi)容，比如點(diǎn)擊數(shù)據(jù)可視化里面會(huì)有集成的地圖可視化效果）


數(shù)據(jù)可視化里面后有一些集成的模板化的效果，大家可以點(diǎn)點(diǎn)看看



回到主題點(diǎn)擊自定義地圖就可以對(duì)地圖進(jìn)行自定義配置了，如下圖： 



頁面上會(huì)有好多配置好的模板供你選擇，也可以選擇自己自定義配置，根據(jù)需要選擇一個(gè)點(diǎn)擊進(jìn)去，就進(jìn)入地圖配置頁面。


上圖中左側(cè)為地圖的可配置項(xiàng)目，點(diǎn)擊選擇可根據(jù)自己的需求對(duì)地圖進(jìn)行配置，包括顏色字體界線等等都可以配置。每個(gè)配置項(xiàng)下面都會(huì)有很多配置子項(xiàng)，非常詳細(xì)，當(dāng)然里面會(huì)有些收費(fèi)的配置項(xiàng)需要付費(fèi)后使用，這塊大家可以多點(diǎn)點(diǎn)，根據(jù)自己需求來做調(diào)整。


如果想要獲取3d建筑的樣式把右下角層級(jí)超過17后，會(huì)顯示建筑，可根據(jù)需求調(diào)整角度和位置。


最后將調(diào)整好的樣式，直接放大全屏后截屏后就可以在設(shè)計(jì)稿里使用了。


關(guān)于開發(fā)樣式的對(duì)接

將配置好的文件點(diǎn)擊右上角的發(fā)布，直接繼續(xù)點(diǎn)擊發(fā)布


發(fā)布成功后會(huì)出現(xiàn)如下的彈框，里面會(huì)有一些調(diào)用和使用地圖的方法。


根據(jù)使用需求可選擇不同平臺(tái)的使用方式，直接復(fù)制鏈接丟給開發(fā)就好了。

3D地圖建模及貼圖的制作獲取方法

首先看下網(wǎng)上找的兩張參考圖的效果

（圖片源自網(wǎng)絡(luò)，如侵權(quán)刪）

（圖片源自光啟元，如侵權(quán)刪）


3D地圖的獲取和建模的流程

首先大家可以在網(wǎng)上下載地圖的邊界輪廓文件，這里推薦網(wǎng)站-阿里云Data V 的一款地圖選擇器（http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580163&lng=106.72278672066881&zoom=3.5）

這里可以下載對(duì)應(yīng)的各個(gè)省份 城市的邊界地圖輪廓模型的svg文件，點(diǎn)擊左下角進(jìn)行下載


以山東省為例將下載好的svg文件導(dǎo)入ai里轉(zhuǎn)換成ai格式，這里要注意的是另存的時(shí)候一定要選擇比較早的版本，建議存為Illustrator 8圖中箭頭所指的那個(gè)版本，要不然c4d會(huì)是識(shí)別不出來。


將轉(zhuǎn)換好的ai文件導(dǎo)入c4d，執(zhí)行擠壓。山東省的3d模型就建好了。


模型建好之后需要將模型進(jìn)行展UV處理（展uv：將一個(gè)3D立體的模型拆開，展開成一個(gè)平面2D圖片。作用：使模型的貼圖效果更真實(shí)。）這里用到展uv的插件（FDUVToolkit 1.0）后臺(tái)回復(fù) uv插件可獲取插件。下圖是在c4d中展完uv的樣圖，截圖保存下做備用（為后面的貼圖位置做參考，后面的貼圖需要和展uv的這個(gè)圖一一對(duì)應(yīng)上）。


將處理好的模型導(dǎo)出obj備用(后面給開發(fā)和在ae中處理效果都會(huì)用到這個(gè)格式)



漫射貼圖制作的思路

首先在Google Eaeth Pro 上面找個(gè)省份對(duì)應(yīng)的位置然后執(zhí)行文件-保存就能保存當(dāng)前展示得地圖紋理了（建議保存兩張貼圖，一張帶邊界和地名的方面后面制作貼圖的時(shí)候方便對(duì)上位置，第二張就是無邊界地名的作為最終的漫射貼圖）。


將c4d展完uv的截圖、還有制作模型下載的地圖邊界路徑、和剛才的截圖一一拖入ai里面 ，新建一個(gè)4k（這里根據(jù)需求建就行）的畫布，將展uv的截圖縮放到畫布大小，如下圖，然后根據(jù)邊界輪廓都對(duì)應(yīng)好 執(zhí)行剪切蒙版，最終會(huì)得到下面的圖的效果。（切記貼圖的位置一定要和上面uv截圖的位置一致，要不然貼上會(huì)是亂的）

高度貼圖的思路（用到軟件QGIS）

首先去地理空間數(shù)據(jù)云上下載素材：選擇對(duì)應(yīng)的行政區(qū)位置。


將下載好的數(shù)據(jù)解壓后倒入QGIS軟件；倒入的圖片稍微有些明顯的拼接的縫隙 將圖片位移處理后導(dǎo)出備用。



最后處理完的貼圖如下:（切記貼圖的位置一定要和上面uv截圖的位置一致）

法線貼圖的獲取和處理思路

將處理好的高度貼圖導(dǎo)入到ps中 執(zhí)行-濾鏡-3D-生成法線圖


直接點(diǎn)擊確定，法線圖就做好了，直接導(dǎo)出就可以了，最終效果如下：


這樣整個(gè)3d地圖所需要的貼圖就都做好了 。

最后貼圖制作好了之后就是貼到模型上處理效果，因篇幅原因本期暫時(shí)不分享了。


城市模型的獲取方法

推薦一個(gè)網(wǎng)站用于下載地圖數(shù)據(jù)叫-OpenStreetMap （OpenStreetMap 是一個(gè)由地圖制作愛好者組成的社區(qū)。這些愛好者提供并維護(hù)世界各地關(guān)于道路、小道、咖啡館、鐵路車站等各種各樣的數(shù)據(jù)。）    


地址：https://www.openstreetmap.org/#map=15/39.9198/116.4536需要的自取。


首次打開是這樣的


點(diǎn)擊導(dǎo)出會(huì)進(jìn)入下面界面，（ps：當(dāng)前屏幕看到的區(qū)域就是要導(dǎo)出下載的位置）點(diǎn)擊下方的藍(lán)色導(dǎo)出按鈕就會(huì)提示下載，最終得到一個(gè)map.osm的文件。    


下面需要將下載好的地圖數(shù)據(jù)轉(zhuǎn)換成模型，這里用到的軟件是Blender及他的GIS插件公眾號(hào)回復(fù)“Blender” 或“GIS插件”領(lǐng)取安裝包（包里有詳細(xì)安裝說明）


先打開Blender：選擇 GIS - 導(dǎo)入 - Open Steeet Map xml（.osm）    

 
根據(jù)界面內(nèi)容 選擇剛下載的文件進(jìn)行導(dǎo)入    


導(dǎo)入后就會(huì)得到下面的城市模型了，如下圖：    


執(zhí)行：文件 - 導(dǎo)出 - 選擇后綴是.obj的這個(gè)如下圖 就可以將模型導(dǎo)出obj了。    
 

做到這一步本次的分享也要接近尾聲了，后續(xù)的操作可繼續(xù)在Blender里做效果，或者通過Blender導(dǎo)出城市的obj格式的模型文件，用C4D打開做效果。


以上方法只是獲取一些建模的方法，后面一些定制化需求需要針對(duì)某一個(gè)建筑單獨(dú)建模，一般都是基于實(shí)測(cè)數(shù)據(jù)畫出建筑的整體外輪廓，然后把實(shí)際拍攝的大樓四個(gè)面的照片進(jìn)行處理制作為貼圖貼上，篇幅原因大概講一個(gè)思路。


最終的效果-深色


淺色效果


關(guān)于開發(fā)對(duì)接

一般這種效果都會(huì)有好多種實(shí)現(xiàn)方法，threeJS，webgl，U3D，Ue4，Ventuz等等，如何對(duì)接開發(fā)給開發(fā)提供那些東西，這都取決于開發(fā)使用的工具和實(shí)現(xiàn)的方式，這里建議做之前充分跟開發(fā)溝通想要的效果，可以讓他們做個(gè)調(diào)研方案，這樣會(huì)事半功倍，免得做一些無用功，出現(xiàn)設(shè)計(jì)和開發(fā)相互甩鍋來回扯皮的情況。

    

不管是基于什么實(shí)現(xiàn)大致的實(shí)現(xiàn)思路都是差不多的，基本都是會(huì)需要設(shè)計(jì)師提供地圖模型、UV貼圖、烘焙貼圖、材質(zhì)參數(shù)等等。   

 

這些東西對(duì)接其實(shí)跟咱們自己建模貼圖然后在處理材質(zhì)燈光（有些不支持燈光渲染，就需要把燈光的效果烘焙到貼圖上直接給貼圖）這些參數(shù)是一個(gè)原理，把基礎(chǔ)模型和對(duì)應(yīng)的參數(shù)和貼圖，給到開發(fā)就可以了。  

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷   作者：MR小六

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




分享本文至：

日歷

鏈接

個(gè)人資料

存檔