快速搭建併發布第一個數字孿生應用
課程2
哈嘍，小夥伴們大家好~歡迎大家來到圖觀™應用編輯器零基礎入門課程第2課。
本節內容簡介
本節課程中，我們把主要講解的內容分為13個小節，並且會給大家手把手講解操作，使用圖觀應用編輯器快速搭建併發布自己的第一個數字孿生應用。同時會和大家講解專案建立、頁面建立、呼叫場景服務的操作方法。
本節課程完整版影片
（點選影片，觀看本節完整版教程）
本節內容詳解
1. 登陸圖觀™應用編輯器
首先我們開啟谷歌瀏覽器，輸入圖觀網址
https://www.tuguan.net
並訪問，然後我們就進到了圖觀的官網。
如果第一次訪問圖觀，首先需要註冊一個賬戶，可以
新增圖觀客服微信索取邀請碼
。填寫邀請碼和基本資訊後，就開通了圖觀的賬號。
點選官網導航欄右側的【登入】按鈕，就看到了登入介面，輸入已開通好的賬號和密碼後
點選【登入】
，我們就進到了圖觀業務管理介面，能看到在“我的業務”中有“租戶服務”、“端渲染場景服務”、“介面偵錯程式服務”、“應用編輯器服務”4種服務，我們
選擇“應用編輯器服務”點選【前往】按鈕
，這樣我們就進入到了應用編輯器的首頁了。
2. 應用編輯器首頁介紹
進入到應用編輯器的首頁頁面， 頁面左側是專案管理列表，在這裡我們可以對所有專案進行分類整理，便於後續對專案的查詢和管理。中間tab欄切換工作臺和資產庫，工作臺可新建專案並展示所有已建立專案；資產庫中的資產內容可以在各個專案中共享使用，頁面右上顯示公告，幫助及使用者設定。
3. 建立專案"智慧社群運營中心"
點選“新建視覺化專案”，在彈出的視窗中輸入中文名稱、英文名稱，點選“確定”按鈕即可完成專案的建立。
滑鼠懸停在專案面板上可以喚醒隱藏的功能選單，我們可以
對該專案進行“重新命名”“移動”“複製”“刪除”，也可以點選“進入專案”按鈕
，系統將會進入該專案首頁。
4. 專案首頁介紹
進入到編輯中的專案首頁。我們可以看到左側為頁面管理列表，在這裡我們可以對所有頁面進行分類整理，中間為tab欄切換顯示
“頁面編輯”“元件編輯”“引數編輯”“介面編輯”“資料編輯” ”圖片素材”
等六大管理頁籤。預設的是選中了“頁面編輯”，可新建頁面並展示所有已建立的頁面。介面右上角可以對專案進行設定、重新整理、預覽、釋出等操作。
5. 新建頁面“社群概覽”
在專案首頁中，預設選中“頁面編輯”的頁籤。點選“新建頁面”按鈕，在新建頁面面板中，有兩種建立頁面的方式可以選擇——【建立空白頁面】和【建立模板頁面】。
【建立空白頁面】
：是在介面的左上側，選擇“空白頁”，滑鼠點選右側面板“建立”按鈕，在彈出的“新建頁面”輸入框中輸入所建立頁面的名稱，再點選“確定”按鈕即可完成頁面的建立。
【建立模板頁面】
：是指在基於系統自帶的模板庫建立頁面，目前模板庫包括紅、橙、黃等不同色系的模板，還有簡約、現代、科技等不同風格的模板。
可以依據個人喜好及孿生應用需求在豐富的頁面模板庫中選擇自己心儀的模板，一般呢我們會強烈推薦第一次使用圖觀的小夥伴採取【建立模板頁面】的方式 ，這種方式可以減少UI設計的工作，同時模板中也預置了標題/卡片/圖表/圖片等多種控制元件，我們可直接編輯修改即可，大大提高了我們的配置效率。
選擇選用的模板頁面，滑鼠點選右側面板“建立”按鈕，在彈出的“新建頁面”輸入框中輸入所建立頁面名稱：“社群概覽”，再點選“確定”按鈕即可完成頁面的建立。
同樣的操作我們把另外2頁面“人車感知”、“安全態勢”新建出來，這樣整個“智慧社群運營中心”孿生應用涉及的3個頁面“社群概覽”“人車感知”“安全態勢”我們就建立完成啦~
6. 頁面操作介紹
那對於已建立的頁面我們做哪些操作呢？
大家可以看到
頁面卡片上有“重新命名”，"鎖定/解鎖"的按鈕
，當我們把滑鼠懸停頁面卡片上時就能喚醒隱藏的功能選單，可以看到有
"設為首頁""預覽"“移動”“複製”“刪除”"隱藏" "匯入租戶資產"“編輯”
等按鈕。
*點選頁面卡片左下角的
“重新命名”
按鈕，可修改專案的名稱；
*點選頁面右下方的
“鎖定/解鎖
”按鈕，即可對頁面進行解鎖或是鎖定。當頁面處於鎖定狀態時，只可以進行“設為首頁”和“預覽”操作，無法對其進行“編輯”等操作。
*滑鼠懸停某個指定頁面卡片，點選功能選單中的
“設為首頁”
按鈕，即可把當前頁面設為首頁。大家可以看到，設為首頁的頁面卡片左上角會有一個小圖示；
*點選
“預覽”
按鈕，即可預覽該頁面。一般是等我們將頁面配置完成後，想要預覽該頁面內容的時候，可點選這個按鈕；
*點選
“移動”
按鈕，在彈出面板中選擇指定頁面資料夾，點“確定”按鈕即可將此頁面移至所選資料夾下；當頁面較多時可以進行分類管理；
*點選
“複製”
按鈕，會在同級目錄下為該頁面生成一個新的副本；
*點選
“刪除”
按鈕，即可刪除當前頁面；
*點選
“編輯”
按鈕，即可進入編輯介面；
*點選
“隱藏頁面”
按鈕，即可隱藏當前頁面；隱藏的頁面在左側下方，滑鼠懸浮隱藏頁面可喚醒“反隱藏”按鈕，點選該按鈕可取消頁面隱藏；
*點選
“匯入租戶資產”
按鈕，即可把當前頁面匯入租戶資產下，方便其他專案複用該資產。
7. 頁面編輯介面介紹
滑鼠懸停指定頁面喚醒隱藏的功能選單，點選“編輯”按鈕，進入頁面編輯介面。
我們可以看到
介面上方是選單欄、工具欄
，選單欄可以顯隱控制我們的“物件列表”“控制元件列表”和“屬性面板”。
在工具欄中可以看到“儲存”按鈕，如果修改頁面的引數“儲存”按鈕會一直閃爍，直到重新儲存，並且儲存會自動擷取當前畫布效果為頁面封面。大家在做的時候
一定要記得隨時點選這個按鈕儲存我們的頁面
；
在“儲存”按鈕右邊是
“釋出”
按鈕：當我們頁面配置完成後可以點選此按鈕進行釋出；
再旁邊是
“預覽”
按鈕：當我們想看到自己配置頁面當前狀態時；點選“預覽”按鈕，則預設自動儲存當前頁面，即可跳轉到預覽頁面；
最後是
“設定”
按鈕：點選“設定”按鈕，切換到專案設定介面。在後續課程中會詳細講到該功能。
介面左側是物件列表
，我們畫布中所有新增的物件都會在該列表中顯示。我們可以對列表中的某個物件進行鎖定和隱藏操作，點選列表中某個物件，畫布中就可聯動顯示選中的物件。
介面最中心位置就是我們的畫布
，在右下角畫布編輯欄，我們可以對畫布的大小進行控制。
介面右側是屬性面板
，我們對頁面、場景、控制元件所有的引數設定都在這個位置進行編輯。
介面下方就是控制元件列表，控制元件列表包括“資產庫”頁籤和“本專案”頁籤兩個部分
：
“資產庫“頁籤中包含系統資產和租戶資產
，系統資產裡放置了我們豐富多樣的資產控制元件：包括柱狀圖、條圖、折線圖、比例圖、比較圖、列表、儀表盤、控制元件、媒體等型別，租戶資產是我們租戶賬號下匯入到租戶資產的圖片和元件。
8. 操作物件列表顯隱
我們可以選中左側的物件列表中的多個控制元件，右擊滑鼠進行控制元件成組的操作，選中單個/成組的控制元件可進行置頂、置底、上移一層、下移一層、鎖定、隱藏、重新命名、複製、刪除的操作。
根據模板建立的頁面，模板會預設帶一個圖片背景，為了後續操作需要隱藏“背景組”中的“底背景圖”，我們可以找到該物件，並點選“隱藏”按鈕。可以看到該物件被我們隱藏起來了。
這裡要跟各位小夥伴介紹一下
物件列表中鎖定和隱藏的區別，鎖定是指物件可見但是在編輯器中不可以被選中和修改，一般用於介面元素，如遮罩。
隱藏是指在編輯器中不可見，同樣也不能被選中和修改。
所以在後續的頁面編輯中我們要隱藏背景圖，並鎖定遮罩物件和標籤背景圖片。
9. 頁面設定面板介紹
點選中心頁面空白處，在右側屬性面板下，點選“頁面設定”按鈕，即可對頁面相關引數進行編輯：修改頁面名稱、修改頁面尺寸大小、設定頁面縮放型別，點選下拉選單可以看到有固定解析度（可滾動）、拉伸縮放鋪滿（無滾動）、等比縮放鋪滿（無滾動）、寬度鋪滿（縱向可滾動）和高度鋪滿（橫向可滾動）5種類型可以選擇，
一般建議選擇等比縮放鋪滿（無滾動）
。
10. 場景設定面板介紹
點選中心頁面空白處，在編輯頁面的右側屬性面板下，點選“場景設定”按鈕，可在頁面中呼叫心儀的場景並且可對場景狀態，場景預覽、場景大小位置等進行設定操作。
11. 獲取並設定"智慧社群"場景
在場景設定面板中，點選場景類別的下拉選單顯示，有三個選項：
1、選擇“無”場景：是指無需三維場景的情況
2、選擇“端渲染場景”：是指頁面需要載入一個端渲染的場景
3、“流渲染場景”：是指頁面需要載入一個流渲染的場景。
根據場景的實際型別進行選擇，本教程案例“智慧社群”的場景型別是“端渲染場景”，因此我們選中“端渲染場景”。點選“選擇場景”按鈕，彈出“選擇場景”視窗，賬號下已有“智慧社群”場景的租戶，可
在【租戶資產】中選擇已釋出的“智慧社群”場景
，點選確定，等待場景載入成功。
新租戶首先要獲取到"智慧社群"端渲染場景二次開發地址（小夥伴們掃一掃影片中的二維碼，新增圖觀客服微信獲取~）。
點選“選擇場景”按鈕，彈出“選擇場景”視窗，在【本專案】中點選“新增資料夾”按鈕，隨後輸入資料夾名稱“智慧社群”，點選回車即可完成專案資料夾的建立，選中資料夾，點選“新增場景”，彈出“新增場景”視窗，在文字框中輸入獲取的“智慧社群”場景二次開發地址，點選“確定”，選中呼叫的場景後點擊“選擇場景”視窗中的確定按鈕，等待場景載入成功。
12. 進入“社群概覽” 頁面 呼叫場景設定
我們進入到 “社群概覽”頁面的編輯介面，在編輯頁面的右側屬性面板下，點選
“場景設定”
按鈕，對場景進行相應的設定操作。
最上方點選
“預覽場景”
按鈕，進入場景預覽狀態，可在編輯器中對場景進行了拖動/放大/縮小/旋轉等操作，前提是完成場景選擇載入後，才可以進行預覽場景。
場景狀態選項
：是指預設載入的三維場景狀態，點選下拉選單顯示場景的狀態列表，根據需求選擇相應的狀態。本頁面選擇“社群概覽”狀態，當三維場景進行了拖動/放大/縮小/旋轉等操作時，點選“復位”按鈕，可將場景狀態復原到場景的預設狀態。
場景初始化程式碼選項
：是指場景初始化完成後，若對場景初始化有特殊需求，可開啟“勾選框”按鈕，點選“初始化程式碼”按鈕，輸入想要執行的場景初始化程式碼，點選確定即可。本案例沒有場景初始化程式碼，此處就不設定了。
場景尺寸選項
：預設可自定義場景尺寸寬1920，高1080。
場景位置選項
：預設可自定義場景位置左為0，上為0。
全屏模式選項
：是指場景尺寸即全屏頁面尺寸，“場景尺寸“和”場景位置“就不可以更改了。
載入場景選項
：是指在編輯頁面時，是否載入場景，關閉這個選項可以最佳化應用編輯器的頁面效能，只編輯二維圖表，關閉載入場景不會影響釋出後的頁面，也不會丟失已經配置的圖層設定和模型設定。
一般建議點選開啟該按鈕
。
等待場景載入完成選項
：是指在預覽頁面或者釋出後的瀏覽頁面，是否等待場景載入完成後頁面上二維圖表才可以點選。
一般建議開啟該按鈕
。
圖層在最前選項
：是指在場景中新增的圖層和場景底座模型的遮擋關係，如果開啟圖層永遠會在模型前，如果關閉，圖層和模型會有三維空間中的透視遮擋關係。一般建議開啟該按鈕。
至此，點選頁面右上角的“儲存”按鈕，我們就成功的把“智慧社群”孿生場景整合到“社群概覽”頁面裡了，同樣的我們把“人車感知”頁面和“安全態勢”頁面的場景也進行設定一下，三個頁面的孿生場景就都呼叫設定成功了。
本節
總結
本節課和大家介紹了應用編輯器的介面組成及功能，講解如何透過應用編輯器建立“智慧社群“專案，如何建立“社群概覽”“人車感知”“安全態勢”3個頁面，如何在頁面呼叫孿生場景，並且我們對已建立的專案和頁面可進行哪些操作方法也做了初步的講解，相信大家已經掌握了今天課程的內容，那本節課程到這裡就結束啦~
下節預告
至此，小夥伴可能會有疑問，頁面是初步搭建完成，那三維場景上的地標圖、氣泡圖、區域圖、路徑圖、軌跡圖、熱力圖等這些資料圖層又是怎麼新增進來的呢？下節課，我們用智慧社群頁面中的資料圖層為例給大家講解一下三維圖層建立及編輯的具體方法~
圖觀
線上試用地址
圖觀™引擎現可申請免費試用！現在試用還可獲得1對1技術支援和專屬大禮包~還等什麼，快快聯絡我們體驗圖觀™引擎的強大功能吧~
1.訪問圖觀™官方網站，在瀏覽器中輸入網址：
https://www.tuguan.net
在圖觀™官方網站中，您可獲取圖觀™最新產品技術動態以及全面的開發指引，幫助您快速瞭解圖觀™數字孿生視覺化引擎。
2.新增數字冰雹客服微信，稽核通過後可獲取體驗邀請碼。
掃碼新增好友
內測申請/一對一諮詢
關注公眾號，瞭解更多資訊