最近在大屏方向有個(gè)很多人問的問題，就是中間的地圖應(yīng)該怎么做？

在大屏領(lǐng)域，中間主體使用地圖的項(xiàng)目占比不低，所以今天針對這個(gè)方向，做一個(gè)專門的分享。

一、大屏中的地圖種類

做大屏相關(guān)分享還是目前還在更新的大屏系列課程，最大的難點(diǎn)就是項(xiàng)目的實(shí)際情況千差萬別。

不講智慧城市、數(shù)字孿生這種行業(yè)、可視要素跨度較大的，就在地圖這一個(gè)領(lǐng)域，使用的圖形種類和技術(shù)就有非常多，做法和知識點(diǎn)完全不同。只有先對它們做出區(qū)分，了解各自的特征，才能更好的根據(jù)項(xiàng)目的需要對它們進(jìn)行設(shè)計(jì)和交付。

在常規(guī)的地圖應(yīng)用中，我們可以先根據(jù)監(jiān)控的范圍劃分成兩個(gè)大類，區(qū)劃和街道。

區(qū)劃是指將地理空間根據(jù)一定的依據(jù)劃分成不同片區(qū)，可以是國家、省份、市縣的行政區(qū)劃，也可以是景區(qū)、小區(qū)、園區(qū)內(nèi)的自定義區(qū)劃。街道則是可以關(guān)注具體街區(qū)、道路的更細(xì)致的地圖，即我們?nèi)粘Ｊ褂?GPS 進(jìn)行路線導(dǎo)航時(shí)查看的地圖。

對地圖數(shù)據(jù)的應(yīng)用決定了項(xiàng)目會(huì)選擇哪種地圖類型，比如項(xiàng)目關(guān)注的是省內(nèi)進(jìn)出口貿(mào)易情況，那么肯定是使用可以展示全省的區(qū)劃地圖。如果項(xiàng)目關(guān)注的是本區(qū)內(nèi)公安交通的話，那肯定就用街道地圖來防范問題。

有了地圖的大分類，然后就可以根據(jù)地圖的樣式和交互做進(jìn)一步的細(xì)分，包括平面、三維，可交互和不可交互的類型。

常規(guī)理解中平面和三維就是指地圖樣式是扁平的還是 3D 的，這是比較初級的想法，而我在這里指的平面和三維是地圖被開發(fā)出來的方式。

在真實(shí)項(xiàng)目中，很多看起來是 3D 的地圖，可能只是一張背景圖而已，不管是自己建模渲染出來還是用的素材，最終僅僅是提供一張位圖切圖給程序員。比如下圖這種案例，交互只有點(diǎn)擊上方標(biāo)簽查看數(shù)據(jù)，那讓地圖具有 3D 旋轉(zhuǎn)的視角有什么意義？

所以當(dāng)項(xiàng)目的可視需求很簡單，在開發(fā)資源跟不上，又想用酷炫的視覺效果時(shí)，就可能會(huì)用這種"偽"3D 視覺效果來實(shí)現(xiàn)。

而在交互層面，指的是地圖本身能不能觸發(fā)不同的交互事件和反饋。比如上圖案例，實(shí)現(xiàn)交互的是地圖上的標(biāo)簽而不是地圖本身，和一個(gè)一般網(wǎng)頁沒有任何區(qū)別。

而復(fù)雜的地圖應(yīng)用中，地圖是可以交互的，包括視角的切換、地圖的移動(dòng)、區(qū)域的選中等等。

可交互和不可交互地圖的實(shí)現(xiàn)過程完全不同，前者一般由設(shè)計(jì)主導(dǎo)樣式并切圖，后者往往是直接使用代碼生成的，設(shè)計(jì)師只能在現(xiàn)成技術(shù)框架下做一些微調(diào)。

上面提到的分類都只是大分類，想要更深入的理解，就需要細(xì)化到具體的表現(xiàn)形式上，下面列舉一些常見的地圖類型：

類型 1：貼圖地圖形式

即地圖只是一張背景圖，僅作示意，上方有其它的交互層或數(shù)據(jù)層來實(shí)現(xiàn)可視化的要求。

類型 2：引用二維地圖

通過直接調(diào)用第三方（高德、百度等）API 生成的定制化平面地圖，往往可以縮放和平移，并通過地圖展示數(shù)據(jù)和可交互對象等。

類型 3：引用三維地圖

同樣調(diào)用第三方的地圖接口，但可以制定顯示的類型，從平面切換成具有傾斜視角以及包含建筑的高度。這是很常見的顯示模式，在手機(jī)地圖和車載導(dǎo)航儀上都有應(yīng)用。

類似 4：平面區(qū)劃地圖

平面展示地理區(qū)劃信息，且不同區(qū)塊可以進(jìn)行交互和映射不同的數(shù)據(jù)。

類似 5：三維區(qū)劃地圖

把矢量地圖的輪廓立體化，并置入三維畫布中，可以進(jìn)行視角的調(diào)節(jié)，且區(qū)塊可以產(chǎn)生更多樣的交互效果。

類型 6：獨(dú)立建模地圖

通常只有街道地圖會(huì)有獨(dú)立建模的需要，但建模的過程往往不是設(shè)計(jì)師從零開始實(shí)現(xiàn)。通常要導(dǎo)入地形數(shù)據(jù)生成基礎(chǔ)地圖，然后再對一些有精度要求的建筑、景觀、地標(biāo)進(jìn)行建模后置入進(jìn)去。

以上 6 種是項(xiàng)目中最常見的地圖展示類型，除此之外還有一些應(yīng)用 GIS 和圖形引擎生成的特殊地圖種類就不在這里展開介紹了。

二、地圖的設(shè)計(jì)和實(shí)現(xiàn)方式

在真實(shí)項(xiàng)目中，設(shè)計(jì)師必須先判斷項(xiàng)目需要使用的地圖是哪種形式，以及設(shè)計(jì)稿輸出的效果是 "僅展示"，還是最后要開發(fā)出來。

如果設(shè)計(jì)過程和開發(fā)過程是各自獨(dú)立的，設(shè)計(jì)是用來給甲方、領(lǐng)導(dǎo)看的，開發(fā)怎么做沒有關(guān)系，或者地圖就是個(gè)背景位圖，那怎么設(shè)計(jì)都沒關(guān)系，怎么做"科技感"、"酷炫"就怎么來。

下面我們就開始解釋獨(dú)立設(shè)計(jì)地圖的方法，主要介紹的對象是區(qū)塊地圖創(chuàng)建和設(shè)計(jì)的思路。

步驟 1：準(zhǔn)備矢量地圖圖形

區(qū)劃地圖的重點(diǎn)就在地圖的輪廓和板塊邊界上，而這些圖形通常非常復(fù)雜，不會(huì)也不應(yīng)該由設(shè)計(jì)師自己手動(dòng)繪制（不精確）。所以我們必須先獲取目標(biāo)區(qū)劃的矢量輪廓圖，作為后續(xù)設(shè)計(jì)的基礎(chǔ)素材。

如果是常規(guī)的區(qū)劃，比如國家、省市、行政區(qū)等，都能比較容易地從網(wǎng)上直接獲取，比如灰大自己做的 NB Map 里就包含比較全面的省、市區(qū)劃矢量圖。

網(wǎng)站鏈接：https://www.nbcharts.com/map

步驟 2：準(zhǔn)備衛(wèi)星地圖

大屏地圖為了提升視覺的效果往往會(huì)填充衛(wèi)星地圖的貼圖，所以我們也需要獲取對應(yīng)的衛(wèi)星地圖圖像。如果是全國地圖，可以從網(wǎng)上直接搜相關(guān)的衛(wèi)星地圖素材。如果是省、市的，可以從谷歌等地圖中直接定位到相應(yīng)地址然后截圖出來。

步驟 3：區(qū)劃的厚度生成

地圖項(xiàng)目為了突出目標(biāo)區(qū)域，往往會(huì)給區(qū)劃圖形增加 "厚度"，最簡單的實(shí)現(xiàn)方式就是使用 Adobe AI 的 3D 工具，簡單調(diào)整角度和設(shè)置出合適的高度即可。

步驟 4：地圖圖形整合

這一步要將前面獲得的地圖素材整理進(jìn) UI 設(shè)計(jì)軟件（PS / Affinity Photo 中也可以）中，尤其是將衛(wèi)星圖的位置和矢量地圖的輪廓進(jìn)行匹配。

而為了更好的進(jìn)行后續(xù)視覺的處理，衛(wèi)星地圖要被分隔成兩個(gè)部分，區(qū)劃內(nèi)和區(qū)劃外。區(qū)劃外作為背景層已經(jīng)有了，所以可以復(fù)制一層并使用前面準(zhǔn)備的矢量區(qū)域做蒙版，得到一個(gè)區(qū)劃內(nèi)的獨(dú)立衛(wèi)星圖景。

這里要強(qiáng)調(diào)，如果地圖輪廓在 AI 中用了比較大的傾斜角度，那么底部的衛(wèi)星圖就也需要做透視處理，要放到 PS 中通過獨(dú)立設(shè)置透視傾斜的參數(shù)來獲得相近的結(jié)果。

想要效果好，就盡量完成前面的全部工作和準(zhǔn)備，不要一邊準(zhǔn)備素材再一邊處理視覺效果，這會(huì)導(dǎo)致在設(shè)計(jì)過程中手忙腳亂。

步驟 5：添加視覺效果

最后，就是添加視覺效果，讓地圖看起來更醒目，更酷炫……視覺效果的添加可以分成以下幾個(gè)步驟。

先壓暗背景地圖，一方面降低飽和度，另一方面添加一個(gè)透明度徑向漸變的遮罩，讓背景地圖被弱化更好的突出主體。

然后處理區(qū)域內(nèi)的衛(wèi)星圖，雖然它比背景重要，但地圖的主角并不是這些圖像內(nèi)容，所以也要進(jìn)行弱化，可以通過降低明度和飽和度完成，也可以在上方疊加一層和主色近似的遮罩層。再給整個(gè)地圖添加投影，進(jìn)一步加強(qiáng)主體和背景的層次感。

最后增加光效，首先是地圖的輪廓發(fā)光，只要再描邊層中使用亮度高的 "投影" 就能實(shí)現(xiàn)外發(fā)光的效果。而想要讓光效看起來明亮，就可以使用接近白色的描邊色，再投影色上添加飽和度較高的色相。

外發(fā)光是最重要的光效應(yīng)用，之后可以再給添加描邊內(nèi)發(fā)光、地圖高光、底部發(fā)光等不同效果，就看設(shè)計(jì)師自己的偏好。如果沒有太多的想法，也可以去收集同類地圖效果做了哪些，選擇滿意的往自己的設(shè)計(jì)中進(jìn)行添加即可。

地圖的做法非常多，先掌握上面的基礎(chǔ)才可以進(jìn)一步拓展到更復(fù)雜的平面類地圖的設(shè)計(jì)中去。

而這類地圖應(yīng)該如何交付和開發(fā)呢？除了整個(gè)地圖做為背景外，只能通過代碼來實(shí)現(xiàn)地圖輪廓和效果。

因?yàn)榈貓D的不同區(qū)塊是不規(guī)則的圖形，而這些不規(guī)則的圖形沒辦法通過簡單的矢量切圖（導(dǎo)出就是矩形）進(jìn)行組合，所以可交互的地圖主要是通過瀏覽器獲取相關(guān)矢量數(shù)據(jù)生成的，這些矢量數(shù)據(jù)程序員會(huì)自己去獲取（3D 區(qū)劃地圖邏輯一樣）。

但是地圖描邊上使用的發(fā)光效果，是可以通過前端的樣式進(jìn)行還原的，所以需要提供相關(guān)的標(biāo)注文件讓開發(fā)查看。

同時(shí)應(yīng)用的衛(wèi)星地圖貼圖，也需要進(jìn)行單獨(dú)的導(dǎo)出。而在位圖上添加的效果，就要在導(dǎo)出過程中被合并到位圖內(nèi)，盡可能減少使用的位圖數(shù)量，這就要憑借設(shè)計(jì)師自己的經(jīng)驗(yàn)去判斷。

具體還要做哪些工作進(jìn)行交付，不同的項(xiàng)目和編程邏輯不同，最好讓前端給你提供一個(gè)簡單的文檔羅列出來。

以上就是區(qū)劃類地圖實(shí)現(xiàn)的基本邏輯。

那街區(qū)類地圖應(yīng)該怎么設(shè)計(jì)呢？答案是基本沒辦法靠設(shè)計(jì)軟件來完成獨(dú)立設(shè)計(jì)。想要獲得這些圖形只能從成熟的地圖軟件中截圖或?qū)С?，可以使用類?Mapbox 等工具提前定制地圖的樣式，然后再截圖。

而 3D 地圖建模因?yàn)椴襟E太多，不同軟件做法差異太大，所以不在這里展開，想要學(xué)習(xí)這種做法的同學(xué)可以到 B 站搜索 C4D / Blender 的相關(guān)城市、地圖建模教學(xué)即可。

通常 3D 地圖也是用前端代碼實(shí)現(xiàn)建模的部分，然后再疊加不同的貼圖或是屬性樣式，所以軟件內(nèi)創(chuàng)建地圖還加上渲染輸出的話，就沒有最終落地實(shí)現(xiàn)的可能。

作者：超人的電話亭