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

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

一、大屏中的地圖種類

做大屏相關分享還是目前還在更新的大屏系列課程，最大的難點就是項目的實際情況千差萬別。

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

在常規的地圖應用中，我們可以先根據監控的范圍劃分成兩個大類，區劃和街道。

區劃是指將地理空間根據一定的依據劃分成不同片區，可以是國家、省份、市縣的行政區劃，也可以是景區、小區、園區內的自定義區劃。街道則是可以關注具體街區、道路的更細致的地圖，即我們日常使用 GPS 進行路線導航時查看的地圖。

對地圖數據的應用決定了項目會選擇哪種地圖類型，比如項目關注的是省內進出口貿易情況，那么肯定是使用可以展示全省的區劃地圖。如果項目關注的是本區內公安交通的話，那肯定就用街道地圖來防范問題。

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

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

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

所以當項目的可視需求很簡單，在開發資源跟不上，又想用酷炫的視覺效果時，就可能會用這種“偽”3D 視覺效果來實現。

而在交互層面，指的是地圖本身能不能觸發不同的交互事件和反饋。比如上圖案例，實現交互的是地圖上的標簽而不是地圖本身，和一個一般網頁沒有任何區別。

而復雜的地圖應用中，地圖是可以交互的，包括視角的切換、地圖的移動、區域的選中等等。

可交互和不可交互地圖的實現過程完全不同，前者一般由設計主導樣式并切圖，后者往往是直接使用代碼生成的，設計師只能在現成技術框架下做一些微調。

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

類型 1：貼圖地圖形式

即地圖只是一張背景圖，僅作示意，上方有其它的交互層或數據層來實現可視化的要求。

類型 2：引用二維地圖

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

類型 3：引用三維地圖

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

類似 4：平面區劃地圖

平面展示地理區劃信息，且不同區塊可以進行交互和映射不同的數據。

類似 5：三維區劃地圖

把矢量地圖的輪廓立體化，并置入三維畫布中，可以進行視角的調節，且區塊可以產生更多樣的交互效果。

類型 6：獨立建模地圖

通常只有街道地圖會有獨立建模的需要，但建模的過程往往不是設計師從零開始實現。通常要導入地形數據生成基礎地圖，然后再對一些有精度要求的建筑、景觀、地標進行建模后置入進去。

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

二、地圖的設計和實現方式

在真實項目中，設計師必須先判斷項目需要使用的地圖是哪種形式，以及設計稿輸出的效果是 “僅展示”，還是最后要開發出來。

如果設計過程和開發過程是各自獨立的，設計是用來給甲方、領導看的，開發怎么做沒有關系，或者地圖就是個背景位圖，那怎么設計都沒關系，怎么做“科技感”、“酷炫”就怎么來。

下面我們就開始解釋獨立設計地圖的方法，主要介紹的對象是區塊地圖創建和設計的思路。

步驟 1：準備矢量地圖圖形

區劃地圖的重點就在地圖的輪廓和板塊邊界上，而這些圖形通常非常復雜，不會也不應該由設計師自己手動繪制（不精確）。所以我們必須先獲取目標區劃的矢量輪廓圖，作為后續設計的基礎素材。

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

網站鏈接：https://www.nbcharts.com/map

步驟 2：準備衛星地圖

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

步驟 3：區劃的厚度生成

地圖項目為了突出目標區域，往往會給區劃圖形增加 “厚度”，最簡單的實現方式就是使用 Adobe AI 的 3D 工具，簡單調整角度和設置出合適的高度即可。

步驟 4：地圖圖形整合

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

而為了更好的進行后續視覺的處理，衛星地圖要被分隔成兩個部分，區劃內和區劃外。區劃外作為背景層已經有了，所以可以復制一層并使用前面準備的矢量區域做蒙版，得到一個區劃內的獨立衛星圖景。

這里要強調，如果地圖輪廓在 AI 中用了比較大的傾斜角度，那么底部的衛星圖就也需要做透視處理，要放到 PS 中通過獨立設置透視傾斜的參數來獲得相近的結果。

想要效果好，就盡量完成前面的全部工作和準備，不要一邊準備素材再一邊處理視覺效果，這會導致在設計過程中手忙腳亂。

步驟 5：添加視覺效果

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

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

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

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

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

地圖的做法非常多，先掌握上面的基礎才可以進一步拓展到更復雜的平面類地圖的設計中去。

而這類地圖應該如何交付和開發呢？除了整個地圖做為背景外，只能通過代碼來實現地圖輪廓和效果。

因為地圖的不同區塊是不規則的圖形，而這些不規則的圖形沒辦法通過簡單的矢量切圖（導出就是矩形）進行組合，所以可交互的地圖主要是通過瀏覽器獲取相關矢量數據生成的，這些矢量數據程序員會自己去獲取（3D 區劃地圖邏輯一樣）。

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

同時應用的衛星地圖貼圖，也需要進行單獨的導出。而在位圖上添加的效果，就要在導出過程中被合并到位圖內，盡可能減少使用的位圖數量，這就要憑借設計師自己的經驗去判斷。

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

以上就是區劃類地圖實現的基本邏輯。

那街區類地圖應該怎么設計呢？答案是基本沒辦法靠設計軟件來完成獨立設計。想要獲得這些圖形只能從成熟的地圖軟件中截圖或導出，可以使用類似 Mapbox 等工具提前定制地圖的樣式，然后再截圖。

而 3D 地圖建模因為步驟太多，不同軟件做法差異太大，所以不在這里展開，想要學習這種做法的同學可以到 B 站搜索 C4D / Blender 的相關城市、地圖建模教學即可。

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

結尾

因為地圖的類型非常多，所以 3D 地圖的實現方法也多種多樣，不是一句兩句話能說完，有很多前置的知識點。

大屏類項目的復雜性來自需求、設備、技術的多樣性，導致多數單一知識點都沒辦法套用到所有場景中去。所以這些分享放進我們的可視化系列課程內，因為做起來太麻煩只能以付費課的形式輸出。

想要進一步提升對大屏項目的認識，那只能建議你們購買這套課程進行系統的學習了↓

報名鏈接 ??? https://pro.uisdc.com

歡迎關注作者的微信公眾號：「超人的電話亭」