制作全景圖的效果并不復雜。我們只需要借助的1比例尺背景素材圖，根據(jù)需要添加即可。一、案例效果演示二、組件結(jié)構(gòu)全景容器組件:我們簡單地將其結(jié)構(gòu)分為三個層次結(jié)構(gòu):1.最外面的元素/背景2.中間層元素/背景

制作全景圖的效果并不復雜。我們只需要借助的1比例尺背景素材圖，根據(jù)需要添加即可。

一、案例效果演示

二、組件結(jié)構(gòu)

全景容器組件:我們簡單地將其結(jié)構(gòu)分為三個層次結(jié)構(gòu):

1.最外面的元素/背景

2.中間層元素/背景

3.最里面的元素(交互元素放置層，縮寫為交互層)

最外面的元素/背景由全景容器組件最外面的圖片元素層組成，在手機上看離我們的視線最遠；

中間層元素/背景由全景容器組件的中間層中的圖片元素層組成。在手機上看，比最外面的背景更接近視線，介于最里層和最外層之間。

最里面的元素，在手機上看，比最外面的背景離視線最近；一般我們用一個圖層頁面來做這一層，可以在這一層做一些交互的觸發(fā)設(shè)置。

可以使用最外面的背景(2:1圖)作為全景容器本身的背景，中間的背景(2:1圖)，或者直接使用頁面作為全景容器的背景(普通全屏尺寸740X1136分辨率72dpi或者加畫布)。

提示:在層間滑動屏幕時，會出現(xiàn)錯位的視覺差異效果。做的層數(shù)越多，視覺差異效果就越豐富。

三、應用場景

全景容器組件，可以將長寬比為2:1的圖片以Y軸為中心軸連接起來，旋轉(zhuǎn)360。目前有該組件的案例供大家參考。

三、材料準備

下載文末附件中的素材，不用于商業(yè)用途，僅供學習。

1.如果要讓最外面的背景可見，中間的背景不能是JPG格式，可以是PNG格式的圖片，有透明區(qū)域；此外，大小比例為2:1的JPG格式繪圖不能放置在圖層中。

2.相關(guān)尺寸規(guī)格。默認的大背景尺寸比例為2:1(2000 x 1000 px分辨率72dpi)，其他所有小元素在PS中設(shè)計好之后逐一導出。注意:PNG格式的圖像被裁剪掉不必要的透明區(qū)域。大圖尺寸比較大，但是要盡量控制和壓縮。

3.在PS等設(shè)計軟件中完成所有元素或大圖。在PS等設(shè)計軟件中設(shè)計排版元素后，逐個導出PNG或JPG，然后上傳到:1)上并導出為一個單獨的圖層，并將它們放在中間的背景或圖層層中，以查看個人需求。

四、組件教程

基本用法

1.添加全景容器組件:高級組件-交互組件-全景容器。

2.單擊Panorama容器以添加組件。

3.點擊【使用中間背景圖片】和【使用外部背景圖片】的縮略圖，將圖片替換為2:1的尺寸比例(2000 x 1000 px分辨率72dpi)，兩個背景圖層可以不設(shè)置。

4.點擊上圖中任意一層背景圖片，顯示素材上傳界面，僅支持上傳JPG/PNG格式的圖片。

4.雙擊圖層設(shè)置直接切換到圖層頁面添加或修改材質(zhì)。

5.點擊進入圖層中的排版效果如圖。點擊左上角的黑色小三角，切換回頁面。

交互式圖層設(shè)置。用戶最關(guān)心的是全景容器中的交互設(shè)置，一般主要在層(最內(nèi)層)進行。

四個步驟。

1.數(shù)據(jù)采集

數(shù)據(jù)來源主要有兩種:內(nèi)部數(shù)據(jù)收集和外部數(shù)據(jù)收集。

2.數(shù)據(jù)處理和轉(zhuǎn)換

數(shù)據(jù)處理和轉(zhuǎn)換是數(shù)據(jù)可視化的前提，主要包括數(shù)據(jù)預處理和數(shù)據(jù)挖掘兩個過程。

3.視覺映射

將處理過的數(shù)據(jù)信息映射成可視元素的過程。從而實現(xiàn)動態(tài)交互圖形。

4.人機交互

在數(shù)據(jù)可視化的過程中，需要進行組織和過濾。