今天分享下在做可視化中一些地圖的獲取方法、常見的一些效果的實現方法以及跟開發如何對接的一些經驗分享給大家,歡迎大家溝通交流。

第三方地圖的獲取和對接

普通地圖一般都是去對接三方平臺,如百度地圖、高德地圖、騰訊地圖、谷歌地圖等。他們都會提供對應的地圖開放服務。以高德地圖為例,實操下地圖的獲取和調色方法以及最后跟開發交付的流程。首先登錄高德開放平臺(https://lbs.amap.com/),點擊右上角控制臺:

超詳細!從零到一帶你制作可視化地圖(一)

進入控制臺會進入下圖頁面(大家可以多點點查看下平臺的相關功能內容,比如點擊數據可視化里面會有集成的地圖可視化效果,這里就不做過多說明了)

超詳細!從零到一帶你制作可視化地圖(一)

數據可視化里面有一些集成的模板化的效果,大家可以點點看看:

超詳細!從零到一帶你制作可視化地圖(一)

回到主題點擊自定義地圖就可以對地圖進行自定義配置了,如下圖:

超詳細!從零到一帶你制作可視化地圖(一)

頁面上會有好多配置好的模板供你選擇,也可以選擇自己自定義配置,根據需要選擇一個點擊進去,就進入地圖配置頁面。

超詳細!從零到一帶你制作可視化地圖(一)

上圖中左側為地圖的可配置項目,點擊選擇可根據自己的需求對地圖進行配置,包括顏色字體界線等等都可以配置。每個配置項下面都會有很多配置子項,非常詳細,當然里面會有些收費的配置項需要付費后使用,這塊大家可以多點點,根據自己需求來做調整。

超詳細!從零到一帶你制作可視化地圖(一)

如果想要獲取 3d 建筑的樣式把右下角層級超過 17 后,會顯示建筑,可根據需求調整角度和位置。

超詳細!從零到一帶你制作可視化地圖(一)

最后將調整好的樣式,直接放大全屏截屏后就可以在設計稿里使用了。

關于開發樣式的對接

將配置好的文件點擊右上角的發布,直接繼續點擊發布。

超詳細!從零到一帶你制作可視化地圖(一)

發布成功后會出現如下的彈框,里面會有一些調用和使用地圖的方法。

超詳細!從零到一帶你制作可視化地圖(一)

根據使用需求可選擇不同平臺的使用方式,直接復制鏈接丟給開發就好了。

超詳細!從零到一帶你制作可視化地圖(一)

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

1. 首先看下網上找的兩張參考圖的效果

超詳細!從零到一帶你制作可視化地圖(一)

△ 圖片源自網絡,如侵權刪

超詳細!從零到一帶你制作可視化地圖(一)

△ 圖片源自光啟元,如侵權刪

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

首先大家可以在網上下載地圖的邊界輪廓文件,這里推薦阿里云 Data V 的一款地圖選擇器(https://www.aliyun.com/product/bigdata/datav)這里可以下載對應的各個省份城市的邊界地圖輪廓模型的 svg 文件,點擊左下角進行下載。

超詳細!從零到一帶你制作可視化地圖(一)

以山東省為例將下載好的 Svg 文件導入 Ai 里轉換成 Ai 格式,這里要注意的是另存的時候一定要選擇比較早的版本,建議存為 Illustrator 8 圖中箭頭所指的那個版本,要不然 C4D 會識別不出來。

超詳細!從零到一帶你制作可視化地圖(一)

將轉換好的 ai 文件導入 c4d,執行擠壓。山東省的 3d 模型就建好了。

超詳細!從零到一帶你制作可視化地圖(一)

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

超詳細!從零到一帶你制作可視化地圖(一)

將處理好的模型導出 obj 備用(后面給開發和在 ae 中處理效果都會用到這個格式)

超詳細!從零到一帶你制作可視化地圖(一)

3. 說下漫射貼圖制作的思路:

首先在 Google Earth Pro 上面找個省份對應的位置然后執行文件-保存就能保存當前展示的地圖紋理了(建議保存兩張貼圖,一張帶邊界和地名的,后面制作貼圖的時候方便對上位置,第二張就是無邊界地名的作為最終的漫射貼圖)。

超詳細!從零到一帶你制作可視化地圖(一)

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

超詳細!從零到一帶你制作可視化地圖(一)

4. 高度貼圖的思路(用到軟件 QGIS)

首先去地理空間數據云上下載素材:

高級檢索-數據集(一般選擇 30m 高程數據或者 90m 高程數據)具體看文件的數量,然后選擇對應的行政區位置。

超詳細!從零到一帶你制作可視化地圖(一)

將下載好的數據解壓后倒入 QGIS 軟件;倒入的圖片稍微有些明顯拼接的縫隙 將圖片位移處理后導出備用。

超詳細!從零到一帶你制作可視化地圖(一)

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

超詳細!從零到一帶你制作可視化地圖(一)

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

首先將處理好的高度貼圖導入到 PS 中 執行-濾鏡-3D-生成法線圖

超詳細!從零到一帶你制作可視化地圖(一)

超詳細!從零到一帶你制作可視化地圖(一)

直接點擊確定,法線圖就做好了,直接導出就可以了,最終效果如下:

超詳細!從零到一帶你制作可視化地圖(一)

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

關于開發對接

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

不管是基于什么實現大致的實現思路都是差不多的,基本都是會需要設計師提供地圖模型、UV 貼圖、烘焙貼圖、材質參數等等。這些東西對接其實跟咱們自己建模貼圖然后在處理材質燈光(有些不支持燈光渲染,就需要把燈光的效果烘焙到貼圖上直接給貼圖)這些參數是一個原理,把基礎模型和對應的參數和貼圖,給到開發就可以了。

總結

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

歡迎關注作者微信公眾號:「小六可視化設計

超詳細!從零到一帶你制作可視化地圖(一)

收藏 687
點贊 92

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。