圖觀™應用編輯器 零基礎入門課（第三講）

課程3:建立資料來源並新增資料圖層

哈嘍，小夥伴們大家好，歡迎大家來到圖觀™應用編輯器零基礎入門課程第3課，上節課程介紹了應用編輯器的介面組成及功能，教大家如何通過應用編輯器建立“智慧社群“專案，如何建立“社群概覽”“人車感知”“安全態勢”3個頁面，以及如何在頁面中呼叫三維孿生場景，並且演示了我們可以對已建立的專案和頁面可進行哪些操作（ 第二課內容可點選連結檢視 ： 圖觀™應用編輯器 零基礎入門課 第二講 ）。本節課程，我們將為大家講解如何使用圖觀™應用編輯器 建立資料來源並新增資料圖層。

本節內容簡介

本節課程，我們主要講解的內容分為10個小節，首先會和大家回顧一下“智慧社群運營中心”應用中有哪些業務圖層，然後教大家如何製作這些圖層，如何上傳資料並繫結到業務圖層上，如何製作圖例等等。最後給大家預覽呈現下“智慧社群運營中心”孿生應用製作的階段成果。

本節課完整版視訊

數字冰雹大資料視覺化

，贊6

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

 本節內容詳解

1.“智慧社群運營中心”資料圖層回顧

首先我們來回顧一下“智慧社群運營中心”應用案例中，涉及哪些資料圖層：

“社群概覽”頁面 涵蓋監控設施、警務室、避難所等地標點圖層、安防告警事件圖層等；

“人車感知”頁面 涵蓋監控設施、人臉閘機、車輛閘機等地標圖層，社群人流熱力圖層等；

“安全態勢”頁面 中包含監控設施的地標點等圖層；

接下來我們以“安全態勢”頁面的圖層為例，手把手的教大家把這些圖層配置出來~

2.建立資料來源（資料編輯）

建立圖層前，首先要建立資料來源，編輯器可以對接的資料來源有三種：

（1）手動靜態輸入資料

（2）本地Excel資料或資料庫

（3）動態介面資料

本節課我們將通過靜態Excel資料給大家演示，各位小夥伴可以掃描螢幕上的二維碼，直接下載測試資料，也可以新增數字冰雹客服微信獲取哦~ 也可在瀏覽器中輸入網址： 直接獲取。

我們回到“智慧社群運營中心”專案首頁，中間Tab頁籤切換至資料編輯頁籤，點選“新增資料”按鈕選擇“上傳資料”，將獲取到的成套測試靜態資料excel檔案逐一新增進來。在左側資料管理列表中，我們可以建立資料夾，方便資料管理和查詢。

3.場景圖層皮膚介紹

我們進入到“安全態勢”頁面的編輯介面中，點選中間場景空白處，在右側屬性皮膚中，選擇 “場景設定 ”頁籤，在下方就是“圖層設定“皮膚。 點選【新增圖層】按鈕，在彈出的新增圖層皮膚中可以選擇我們需要新增的圖層型別，包括地標圖層、柱圖圖層、熱力圖層、柵格圖圖層等。

4. 新增圖層-地標圖：如監控設施、告警事件

我們先新增監控設施地標圖層， 點選“新增圖層”選擇“地標圖層”， 點選“新增”。在右下方可看到已新增的“地標圖層”， 滑鼠選中“地標圖層”，點選 【編輯】按鈕可進入圖層編輯頁，我們先 修改“地標圖層”名字為“監控設施”。然後對資料型別進行編輯， 資料類別選擇資料來源 。然後 【資料來源】選擇之前上傳好的“監控設施”資料。 【座標系選擇】經緯度座標系，新增【經度】、【緯度】、【ID】、【高度】欄位。

接下來切換到樣式設定中，我們對新增完成的散點圖圖示進行樣式編輯，可以讓它們更美觀一些，編輯器中內建了多種圖示可供選擇，我們也可以在場景編輯器的 【資產庫】-【圖示】中自定義上傳我們所需要的圖示，這樣我們就完成了監控設施地標圖層的新增。同樣的方式我們把安防告警事件地標圖層也新增進來。

5.新增圖層-氣泡圖，如告警事件

同之前操作一樣，我們 在【新增圖層】介面選擇氣泡圖圖層， “氣泡圖層”文字框處修改圖層名字為“告警氣泡圖層”，新增完成後繼續進行 【資料來源】繫結“告警事件”、 【座標系選擇】經緯度座標系，【經度】、【緯度】、【數量】填 寫對應欄位。

切換到 “樣式設定”頁籤，可以對氣泡的全域性樣式進行設定，如： 資料最大值上限、資料最小值下限、氣泡最大半徑，氣泡最小半徑、氣泡動畫速度、氣泡顏色等，這樣我們的告警氣泡圖層也就新增完成啦。

6. 新增圖層-區域圖，如疫情管控區

區域圖層和其他圖層不一樣的地方在於它不是一個點圖層，而是面圖層，我們在 【新增圖層】介面選擇區域圖層， 文字框處修改圖層名字為“疫情管控區域-3號樓”。新增完成後繼續進行 【資料來源】繫結“電子圍欄_3號樓”、 【座標系選擇】經緯度座標系、 【經度】、 【緯度】填寫對應欄位。

切換到 “樣式設定“頁籤，可以 對區域邊界樣式類別、顏色、圍欄高度、區域填充樣式類別、區域填充位置進行設定，設定完成後我們的電子圍欄也就新增完成啦。

7.新增圖層-路徑圖，如：安防人員巡邏路徑

我們在 【新增圖層】介面選擇路徑圖層，文字框處 修改圖層名字為“安防人員巡邏路徑”。新增完成後繼續進行 【資料來源】繫結“安防人員巡邏路徑”、 【座標系選擇】經緯度座標系、 【經度】、 【緯度】 填寫對應欄位。切換到 “樣式設定“頁籤，可以 對路線樣式類別、路線顏色、路徑寬度進行設定，設定完成後就可以看到路徑圖層啦。

8.其他圖層新增

同樣的操作方法，我們把“安全態勢”頁面剩餘的資料圖層及“社會概覽”和“人車感知”頁面的資料圖層逐一進行新增設定，這樣3個頁面的資料圖層就都新增設定完成了。

9.新增圖例

孿生場景中的所有圖層都新增完成後，我們還需要新增圖例， 圖例是所有圖層的控制檯，可以控制圖層的顯隱操作。進入頁面編輯狀態，首先在 【資產庫】的 【控制元件】中找到 【三維圖例】並拖拽到頁面合適的地方，然後 在基礎設定裡可以勾選需要顯示的圖層名稱。接下來根據圖例中的資料進行樣式設定： 尺寸、位置、圖例單元高度、圖層間距、文字樣式、背景顏色、邊框顏色、邊框粗細等屬性引數。設定完成後那我們的圖例就新增好啦。

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

在圖層和圖例都編輯完成並儲存後我們就完成了場景圖層的編輯操作，這個時候我們就可以點選預覽按鈕檢視在三維場景中我們剛才所新增的資料圖層了。

本節總結

我相信，通過本節課程的學習，大家掌握了各式各樣場景圖層的新增設定方法，資料上傳 -圖層新增-資料繫結-樣式設定-儲存，就是這麼簡單。 相信大家已經熟知了今天課程的內容，大家可以在課後使用圖觀應用編輯器來實戰操作一下，在三維場景中新增自己心儀的圖層吧。 那本節課程到這裡就結束啦~

下節預告

下節課程呢，我們要來和大家詳細介紹一下應用編輯器豐富的控制元件，並和大家講解如何使用這些控制元件在頁面中新增設定成想要的圖表。 同時也會和大家講一下圖片素材上傳及資料介面配置的方法。 小夥伴們一定要持續關注哦 ~

圖觀 線上試用地址

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

1.訪問圖觀™官方網站，在瀏覽器中輸入網址：

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