超詳細(xì)！從零到一帶你制作可視化地圖（一）

今天分享下在做可視化中一些地圖的獲取方法、常見(jiàn)的一些效果的實(shí)現(xiàn)方法以及跟開發(fā)如何對(duì)接的一些經(jīng)驗(yàn)分享給大家，歡迎大家溝通交流。

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

普通地圖一般都是去對(duì)接三方平臺(tái)，如百度地圖、高德地圖、騰訊地圖、谷歌地圖等。他們都會(huì)提供對(duì)應(yīng)的地圖開放服務(wù)。以高德地圖為例，實(shí)操下地圖的獲取和調(diào)色方法以及最后跟開發(fā)交付的流程。首先登錄高德開放平臺(tái)（https://lbs.amap.com/），點(diǎn)擊右上角控制臺(tái)：

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

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

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

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

上圖中左側(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ù)自己需求來(lái)做調(diào)整。

如果想要獲取 3d 建筑的樣式把右下角層級(jí)超過(guò) 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 地圖建模及貼圖的制作獲取方法

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

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

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

2. 先說(shuō)下 3d 地圖的獲取和建模的流程

首先大家可以在網(wǎng)上下載地圖的邊界輪廓文件，這里推薦阿里云 Data V 的一款地圖選擇器（https://www.aliyun.com/product/bigdata/datav）這里可以下載對(duì)應(yīng)的各個(gè)省份城市的邊界地圖輪廓模型的 svg 文件，點(diǎn)擊左下角進(jìn)行下載。

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

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

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

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

3. 說(shuō)下漫射貼圖制作的思路：

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

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

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

首先去地理空間數(shù)據(jù)云上下載素材：

高級(jí)檢索-數(shù)據(jù)集（一般選擇 30m 高程數(shù)據(jù)或者 90m 高程數(shù)據(jù)）具體看文件的數(shù)量，然后選擇對(duì)應(yīng)的行政區(qū)位置。

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

最后處理完的貼圖如下:（切記貼圖的位置一定要和上面 uv 截圖的位置一致，要不然貼上會(huì)是亂的）

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

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

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

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

關(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ì)事半功倍，免得做一些無(wú)用功，出現(xiàn)設(shè)計(jì)和開發(fā)相互甩鍋來(lái)回扯皮的情況。

不管是基于什么實(shí)現(xiàn)大致的實(shí)現(xiàn)思路都是差不多的，基本都是會(huì)需要設(shè)計(jì)師提供地圖模型、UV 貼圖、烘焙貼圖、材質(zhì)參數(shù)等等。這些東西對(duì)接其實(shí)跟咱們自己建模貼圖然后在處理材質(zhì)燈光（有些不支持燈光渲染，就需要把燈光的效果烘焙到貼圖上直接給貼圖）這些參數(shù)是一個(gè)原理，把基礎(chǔ)模型和對(duì)應(yīng)的參數(shù)和貼圖，給到開發(fā)就可以了。

總結(jié)

本期分享了第三方地圖的獲取，使用對(duì)接方法和 3d 地圖貼圖的制作和對(duì)接的思路。下期預(yù)告，三維城市模型的獲取制作的方法，敬請(qǐng)期待。好了，今天的分享就到此結(jié)束了。希望今天的教程讓你有所收獲~

歡迎關(guān)注作者微信公眾號(hào)：「小六可視化設(shè)計(jì)」