亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)保姆級(jí)教程!可視化大屏地圖制作技巧

保姆級(jí)教程!可視化大屏地圖制作技巧

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

一、大屏中的地圖種類

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

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

對(duì)地圖數(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í)教程!可視化大屏地圖制作技巧

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

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

所以當(dāng)項(xiàng)目的可視需求很簡(jiǎn)單,在開發(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)可視化的要求。

保姆級(jí)教程!可視化大屏地圖制作技巧

類型 2:引用二維地圖

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

保姆級(jí)教程!可視化大屏地圖制作技巧

類型 3:引用三維地圖

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

以上 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ì)地圖的方法,主要介紹的對(duì)象是區(qū)塊地圖創(chuàng)建和設(shè)計(jì)的思路。

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

步驟 4:地圖圖形整合

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

步驟 5:添加視覺效果

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

保姆級(jí)教程!可視化大屏地圖制作技巧

保姆級(jí)教程!可視化大屏地圖制作技巧

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

但是地圖描邊上使用的發(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í)教程!可視化大屏地圖制作技巧

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

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

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

保姆級(jí)教程!可視化大屏地圖制作技巧

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

作者:超人的電話亭

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/20011.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。