課程6：建立基本頁面互動

哈嘍，小夥伴們大家好~歡迎大家來到圖觀應用編輯器零基礎入門課程第6課，上節課程給大家講解了建立元件的操作方法，並且跟大家演示講解了如何利用元件建立詳情檢視和聯動對話方塊。

本節課程簡介

本節課主要通過6小節的內容來教大家，如何使用應用編輯器配置出：

（1）3個頁面的切換互動

（2）多個場景狀態的切換互動

（3）圖表與圖表聯動以及圖表

（4）圖層聯動4種頁面互動型別

這些互動也是數字孿生應用最基礎最常用的互動手段。那麼我們開始學習這些操作吧~

本節課完整版視訊

（點選視訊，觀看本節完整版教程）

本節課程詳解

1.通過導航欄配置多頁面切換

我們用“社群概覽”頁面為例給大家講解頁面切換如何配置。首先是修改頁面模板中的一級導航文字。

之前的課程我們講到了頁面模板中文字修改的方法，在左側控制元件列表或畫布中依次選中“一級導航”控制元件，在右側的屬性皮膚中，修改控制元件名稱和基礎設定中的文字為“社群概覽”“人車感知”“安全態勢”，然後把多餘的一級導航、二級導航刪掉。

然後點選畫布中的導航欄的“人車感知”控制元件，點選右側屬性皮膚下的互動設定，點選“新增互動行為”，觸發事件選擇：“頁面-跳轉頁面-確定”，點選“編輯”，選擇跳轉頁面至“人車感知”。

然後點選畫布中的“安全態勢”控制元件，點選右側屬性皮膚下的互動設定，點選“新增互動行為”，觸發事件選擇：“頁面-跳轉頁面-確定”，點選“編輯”，選擇跳轉頁面至“安全態勢”，點選“確定”並“儲存”。

同樣的將：“人車感知”“安全態勢”頁面中的3個主題按鈕也配置完成，點選“確定”並“儲存”，點選“預覽”，就可以看到3個頁面切換配置成功了。我們可以預覽整個系統，點選導航欄就可以進行頁面切換了。

2.配置場景多狀態切換

我們以“安全態勢”頁面-狀態導航欄-“社群全景”“自動旋轉”“自動漫遊”為例來和大家講下場景狀態的切換是怎麼配置的。

（1）狀態配置

首先來講一下“社群全景”按鈕的配置方法，我們從 【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件拖拽到畫布相應位置，選中畫布中的圖片按鈕，在右側 【屬性皮膚】中，設定控制元件名稱和按鈕文字為“社群全景”，切換至“樣式設定”，在 【基礎屬性】中對圖片按鈕的尺寸和位置進行配置，對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定，文字點選“開啟”，對文字的偏移量、陰影、樣式等內容進行自定義設定。

切換至“互動設定”，點選“新增互動行為”，觸發事件選擇：“場景-切換狀態-確定”，點選“編輯”，選擇切換狀態至“全景展示”，點選“確定”並“儲存”。

點選“新增互動行為”，觸發事件選擇：“場景-圖層-顯隱圖層-確定”，點選“編輯”，顯隱方式選擇“顯示圖層”，勾選全部圖層，點選“確定”並“儲存”。

同樣的操作方法，我們把“頂檢視”“閘機”“1號樓”“戶型剖分”“預設狀態”這幾個狀態也配置出來。值得注意的是，點選不同狀態按鈕會涉及到不同的視角，為了在不同視角下圖層展示的美觀，可以點選“新增互動行為”選擇顯隱部分圖層。

（2）自動旋轉

接下來講一下“自動旋轉”按鈕的配置方法，我們從 【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件拖拽到畫布相應位置，選中畫布中的圖片按鈕，在右側 【屬性皮膚】中，設定控制元件名稱和按鈕文字為“自動旋轉按鈕”，切換至“樣式設定”，在 【基礎屬性】中對圖片按鈕的尺寸和位置進行配置，對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定，文字點選“開啟”，對文字的偏移量、陰影、樣式等內容進行自定義設定。

切換至“互動設定”，點選“新增互動行為”，觸發事件選擇“攝像機-旋轉視野-確定”，點選“編輯”，設定旋轉一週時間“60”，旋轉方向“順時針”，點選“確定”並“儲存”。

（3）自動漫遊

最後在講一下“自動漫遊”按鈕的配置方法，我們從【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件拖拽到畫布相應位置，選中畫布中的圖片按鈕，在右側【屬性皮膚】中，設定控制元件名稱和按鈕文字為“自動漫遊按鈕”，切換至“樣式設定”，在【基礎屬性】中對圖片按鈕的尺寸和位置進行配置，對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定，文字點選“開啟”，對文字的偏移量、陰影、樣式等內容進行自定義設定。

切換至“互動設定”，點選“新增互動行為”，觸發事件選擇“其他-API指令集-確定”，點選“編輯”，將API程式碼貼上到文字框。

小夥伴們可以通過以上3種方式獲取“智慧社群配套素材”

點選“新增互動行為”，觸發事件選擇“場景-圖層-顯隱圖層-確定”，點選“編輯”，顯隱方式選擇“顯示圖層”，隱藏全部圖層，點選“確定”並“儲存”。

點選“預覽”，我們可以預覽整個系統，點選狀態按鈕，可以看到三維場景在進行相應的切換狀態，證明狀態切換配置成功了。

3.配置圖表與圖表之間的聯動

接下來我們講解一下“安全態勢”頁面中安防事件處理狀態、事件型別、事件列表三個圖表之間的聯動是怎麼配置的。

首先回到上一級引數編輯中，引數名稱新增“安全態勢”，引數設定為“意外傷害、黑名單人員、點位著火、周界告警”；引數名稱新增“安防事件處理”，引數設定為“已完成、處理中、待處理”。

在進入 “安全態勢”頁面編輯介面，點選安防事件處理狀態環圖， 在右側屬性皮膚點選互動行為，被動接收引數開啟，預設繫結引數為安防事件處理，其他接收引數為安全態勢，點選傳送引數開始，預設繫結引數為安防事件處理；

點選安防事件型別分析弧形圖，在右側屬性皮膚點選互動行為，被動接收引數開啟，預設繫結引數為安全態勢，其他接收引數為安防事件處理，點選傳送引數開始，預設繫結引數為安全態勢；

點選安防事件列表，在右側屬性皮膚點選互動行為，被動接收引數開啟，其他接收引數為安全態勢、安防事件處理，點選傳送引數關閉。點選“儲存”，點選“預覽”，點選安防事件處理狀態或者安防事件型別中的各個列舉，其他圖表資料都伴隨切換展示，證明三個圖表之間的聯動配置成功了。

4.配置圖表與場景圖層之間的聯動

我們可以看到在“安全態勢”頁面下，點選【安防事件總數】卡片，三維可顯示安防事件點位分佈情況。那這個表圖聯動的互動是怎麼做出來的呢？

首先點選畫布中的“安防事件總數”控制元件，點選右側屬性皮膚下的互動設定，點選“新增互動行為”，觸發事件選擇“場景-圖層-顯隱圖層-確定”，點選“編輯”，顯隱方式選擇“隱藏圖層”，勾選除告警事件、告警氣泡以外的全部圖層，點選“確定”並“儲存”。

另外保證該互動是在安全態勢預設狀態下顯示的，還要 增加一個互動行為：點選右側屬性皮膚下的互動設定，點選“新增互動行為”，觸發事件選擇“場景-切換狀態-確定”，點選“編輯”，選擇切換狀態至“安全態勢”，點選“確定”並“儲存”，點選“預覽”，就可以看到表圖聯動的互動配置成功了。

5.配置其他頁面、場景多狀態切換

同樣的操作方法，我們將“社群概覽”頁面、“人車感知”頁面的場景狀態切換按鈕逐一進行配置。點選“確定”並“儲存”。

6.預覽“智慧社群運營中心”專案階段成果

在3個頁面的主題切換、狀態切換編輯完成並儲存後，點選“預覽”按鈕，點選一級導航及狀態切換按鈕，檢視在3個頁面中我們所新增的互動行為。

本節總結

好的，本節課和大家操作演示瞭如何使用應用編輯器配置出：頁面切換、場景狀態切換、圖表與圖表聯動以及圖表與圖層聯動4種頁面互動型別，相信大家已經掌握了今天課程的內容，那本節課程到這裡就結束啦~

下節預告

下節課程呢，我們要繼續來教大家建立配置頁面中複雜互動的方法，包括：視訊接入、閘機模型開啟關閉的動畫控制、層級下鑽都是怎樣實現的。小夥伴一定要持續關注哦~

圖觀 線上試用地址

圖觀™引擎現可申請免費試用！現在試用還可獲得1對1技術支援和專屬大禮包~還等什麼，快快聯絡我們體驗圖觀™引擎的強大功能吧~

訪問圖觀™官方網站