2021-8-15 濤濤
普通地圖一般都是去對(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ì)有集成的地圖可視化效果）
如果想要獲取3d建筑的樣式把右下角層級(jí)超過17后，會(huì)顯示建筑，可根據(jù)需求調(diào)整角度和位置。
最后將調(diào)整好的樣式，直接放大全屏后截屏后就可以在設(shè)計(jì)稿里使用了。
首先看下網(wǎng)上找的兩張參考圖的效果
（圖片源自光啟元，如侵權(quán)刪）
首先大家可以在網(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)行下載
將轉(zhuǎn)換好的ai文件導(dǎo)入c4d，執(zhí)行擠壓。山東省的3d模型就建好了。
將c4d展完uv的截圖、還有制作模型下載的地圖邊界路徑、和剛才的截圖一一拖入ai里面 ，新建一個(gè)4k（這里根據(jù)需求建就行）的畫布，將展uv的截圖縮放到畫布大小，如下圖，然后根據(jù)邊界輪廓都對(duì)應(yīng)好 執(zhí)行剪切蒙版，最終會(huì)得到下面的圖的效果。（切記貼圖的位置一定要和上面uv截圖的位置一致，要不然貼上會(huì)是亂的）
將下載好的數(shù)據(jù)解壓后倒入QGIS軟件；倒入的圖片稍微有些明顯的拼接的縫隙 將圖片位移處理后導(dǎo)出備用。
最后處理完的貼圖如下:（切記貼圖的位置一定要和上面uv截圖的位置一致）
將處理好的高度貼圖導(dǎo)入到ps中 執(zhí)行-濾鏡-3D-生成法線圖
直接點(diǎn)擊確定，法線圖就做好了，直接導(dǎo)出就可以了，最終效果如下：
這樣整個(gè)3d地圖所需要的貼圖就都做好了 。
推薦一個(gè)網(wǎng)站用于下載地圖數(shù)據(jù)叫-OpenStreetMap （OpenStreetMap 是一個(gè)由地圖制作愛好者組成的社區(qū)。這些愛好者提供并維護(hù)世界各地關(guān)于道路、小道、咖啡館、鐵路車站等各種各樣的數(shù)據(jù)。）
地址：https://www.openstreetmap.org/#map=15/39.9198/116.4536需要的自取。
首次打開是這樣的
下面需要將下載好的地圖數(shù)據(jù)轉(zhuǎn)換成模型，這里用到的軟件是Blender及他的GIS插件公眾號(hào)回復(fù)“Blender” 或“GIS插件”領(lǐng)取安裝包（包里有詳細(xì)安裝說明）
做到這一步本次的分享也要接近尾聲了，后續(xù)的操作可繼續(xù)在Blender里做效果，或者通過Blender導(dǎo)出城市的obj格式的模型文件，用C4D打開做效果。
以上方法只是獲取一些建模的方法，后面一些定制化需求需要針對(duì)某一個(gè)建筑單獨(dú)建模，一般都是基于實(shí)測(cè)數(shù)據(jù)畫出建筑的整體外輪廓，然后把實(shí)際拍攝的大樓四個(gè)面的照片進(jìn)行處理制作為貼圖貼上，篇幅原因大概講一個(gè)思路。
最終的效果-深色
淺色效果
一般這種效果都會(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ù)等等。
藍(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ì)( www.wtxcl.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wtxcl.cn