課程5：利用元件編輯功能建立一個彈出皮膚

哈嘍，小夥伴們大家好~歡迎大家來到圖觀應用編輯器零基礎入門課程第五課，上節課程我們和大家介紹了圖觀應用編輯器中包含的豐富多樣的控制元件，以及如何在頁面中新增編輯這些控制元件。並且對於管理自定義圖片素材和介面資料繫結等常用功能也做了教學示範。

本節課程簡介

本節課將接續之前的課程案例，再給大家介紹一個常用的業務功能如何實現。我們將通過5小節的內容講解來教會大家如何使用編輯器建立元件，並且通過點選互動，彈出元件皮膚的功能。

本節課完整版視訊

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

本節課程詳解

1."智慧社群運營中心"案例互動功能回顧

首先我們來回顧一下應用案例的“安全態勢”頁面，有哪些常用互動功能。

在三維場景中點選消防設施散點圖示彈出標牌顯示消防設施的詳情資訊。點選介面中的【疫情防控】卡片，彈出對話方塊展示該社群疫情資料詳情分析內容。

我們可以發現這兩個互動功能都需要彈出一個詳細的皮膚，皮膚中呈現更細節的資料和圖表。那麼這個彈出皮膚怎麼製作呢？是否可以通過拖拉拽方式配置呢？是否可以根據點選物件的不同呈現不同的資料指標呢？

大家可以帶著這些問題，跟隨我們一起看後面的教學視訊。

2.通過元件編輯功能實現彈出皮膚

剛才大家看到頁面中所有涉及到彈出皮膚的內容都可以 通過元件編輯新增進來。那接下來就要拿“消防設施”為例，和大家講解一下如何建立元件了。

首先我們回到編輯器中“智慧社群運營中心”專案首頁， tab頁籤切換至資料編輯可以看到提前上傳好的“消防設施”資料表。

然後tab頁籤切換至引數編輯，新增引數名稱“ID”,點選確定，選中“ID”，勾選接收未設定的列舉值，點選儲存。然後tab頁籤切換至元件編輯，點選“新建元件”，輸入中文“消防設施”並輸入英文“xfss”點選“確定”按鈕，就可以看到我們建立了一個新的元件。

滑鼠移動到元件物件上，點選“編輯”按鈕，頁面進入元件編輯頁面。在右側屬性皮膚中設定元件寬度、元件高度及背景顏色。

接下來從 【資產庫】-【本專案】-【媒體】中選擇圖片控制元件拖拽到畫布相應位置，選中畫布中的圖片控制元件，在右側【屬性皮膚】中，設定控制元件名稱和圖片地址，切換至“樣式設定”，對圖片的尺寸、位置、全域性樣式各項引數進行自定義配置。

從【資產庫】-【系統資產】-【列表】中選擇屬性表拖拽到畫布相應位置，選中畫布中的控制元件，在右側【屬性皮膚】中，設定控制元件名稱，資料類別選擇資料來源， 基礎設定中依次設定資料來源、ID、行內容，引數繫結ID。

切換至“樣式設定”，對列表的尺寸、位置、全域性樣式各項引數進行自定義配置。

切換至“互動設定”，“被動接受引數” 開啟，“點選傳送引數” 關閉，點選儲存。這樣“消防設施”元件就建立好了。

同樣方式我們把頁面中涉及到的所有元件都在元件編輯中建立好。然後我們進入“安全態勢”頁面編輯介面，介面下方的應用編輯器的控制元件列表-“本專案”-元件中就可以看到我們剛才新增的元件了。

3.頁面互動-彈出元件框-詳情檢視

點選場景設定-圖層列表-消防設施，設定控制元件名稱，資料類別選擇資料來源，基礎設定中依次設定 資料來源、座標系、經度、緯度、ID、高度，引數繫結ID，切換至“樣式設定”，對圖層全域性樣式、提示框進行自定義配置。切換至“互動設定”，被動接收引數關閉，點選傳送引數開啟，引數名勾選“ID” 。

點選“新增互動行為”，觸發事件選擇“頁面-彈出皮膚-確定” ，點選“編輯”，選擇位置偏移“相對自身”，對話方塊選“消防設施”，點選“確定”並“儲存”。點選“預覽”按鈕，可以在頁面中找到消防設施圖層，並找到任意一個消防設施圖示，並“點選“該點點陣圖表就可以彈出標牌詳情。

這樣就證明了該詳情檢視元件和點選互動功能配置成功了。

4.頁面互動-彈出元件框-聯動對話方塊

首先我們要把聯動對話方塊的“疫情防控詳情分析”做成一個元件，同樣的我們回到編輯器中“智慧社群運營中心”專案首頁， tab頁籤切換至元件編輯，點選“新建元件”，輸入中文“疫情防控詳情分析”並輸入英文“yqfkxqfx”點選“確定”按鈕，就可以看到我們建立了一個新的元件。

滑鼠移動到元件物件上，點選“編輯”按鈕，頁面進入元件編輯狀態。首先在右側屬性皮膚中 設定元件寬度、元件高度及背景顏色。

然後從 【資產庫】-【系統資產】-【媒體】中選擇圖片控制元件拖拽到畫布相應位置，選中畫布中的圖片控制元件， 在右側【屬性皮膚】中，設定控制元件名稱和圖片地址，切換至“樣式設定”，對圖片的尺寸、位置、全域性樣式各項引數進行自定義配置。

同樣的將其他3個圖表進行配置，點選儲存，“疫情防控詳情分析”元件就建立完成了。

然後回到頁面編輯介面，從 【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕，控制元件拖拽到畫布相應位置，選中畫布中的圖片按鈕，在右側【屬性皮膚】中，設定控制元件名稱和按鈕文字。

切換至“樣式設定”， 在【基礎屬性】中對圖片按鈕的尺寸和位置進行配置，對圖表的全域性樣式等各項引數進行自定義配置。切換至“互動設定”， 點選“新增互動行為”，觸發事件選擇“頁面-彈出皮膚-確定”，點選“編輯”，選擇位置偏移“相對介面”，對話方塊選“疫情防控詳情分析”，點選“確定”並“儲存”。

點選“預覽”按鈕，可以在頁面中找到疫情防控卡片，點選該卡片，彈出對話方塊展示疫情防控的詳情分析對話方塊。這樣就證明了詳情對話方塊和點選互動功能配置成功了。

5.配置其他彈出對話方塊

同樣的操作方法，我們把“安全態勢”頁面剩餘的人臉閘機、警務室等彈出對話方塊及“社會概覽”和“人車感知”頁面的警務室、避難所、網格員等彈出對話方塊逐一進行新增設定，這樣3個頁面的彈出對話方塊就都新增設定完成了。

本節總結

好的，本節課和大家講解了建立元件的操作方法，並且跟大家演示講解了一下如何使用應用編輯器配置詳情檢視和聯動對話方塊的頁面互動功能。相信大家已經掌握了今天課程的內容，那本節課程到這裡就結束啦~

下節預告

下節課程呢，我們要繼續來教大家建立配置頁面中基本互動的方法，如：“社群概覽”“人車感知”“安全態勢”3個頁面的切換、“社群全景”“頂檢視”“閘機”“1號樓”“戶型剖分”5個狀態的切換、表與表、表與圖之間聯動控制都是怎樣實現的。歡迎小夥伴們收看哦~

圖觀 線上試用地址

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

1.訪問圖觀™官方網站

在圖觀™官方網站中，您可獲取圖觀™最新產品技術動態以及全面的開發指引，幫助您快速瞭解圖觀™數字孿生視覺化引擎。