FVS模型數據預警應用實例

適用場景：安裝了「FineVis數據可視化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

注：不支援行動端。

1.1 版本

1.2 場景介紹

本文主要介紹 FVS三維組件 中的模型資料預警功能，即當滿足某個條件時，模型可突出顯示。

例如下方 智慧校園視覺化大屏 效果示範中，「安防狀態」一頁攝像頭狀態為異常時，三維城市對應攝像頭位置顯示為紅色標簽。

1.3 實現效果

本文僅做簡單示範，實現思路如下：

1）攝像頭狀態使用「點-資料圖層」，當狀態為異常時，點及標簽顯示為紅色。

2）圖書館樓體模型使用「模型-資料圖層」，當狀態為異常時，模型及標簽顯示為紅色。

3）表格中安防裝置詳情，當裝置狀態為異常時，所在行顯示為紅色。

效果如下圖所示：

2.1 建立範本

建立一張大屏範本，可自訂名稱、畫布尺寸等。如下圖所示：

點選組件區「三維組件>三維城市」，將組件新增到畫布中，點選右側配置區「編輯組件」，進入三維城市編輯頁面。如下圖所示：

2.2 建立場景

首次進入三維組件編輯介面時，需要建立場景上傳資料，需提前準備好 geojson 檔案。

注：geojson 相關知識和獲取方式請參見 獲取三維城市所需geojson檔案的操作步驟 。

點選下載 三維城市.zip 並解壓，選擇解壓後的 三維城市.geojson 檔案，點選「生成場景」即可。

如下圖所示：

2.3 準備資料

本例中需要建立 3 個 內建資料集 ，均為虛擬資料。分別如下：

1）安防裝置詳情

該資料集用於表格，可自訂一些裝置資料，裝置狀態分為「正常」和「異常」兩種。

如下圖所示：

2）攝像頭位置

該資料集用於三維城市新增「點-資料圖層」使用，經緯度位置需保證在三維城市範圍內，例如本例三維城市的範圍是武漢大學，則位置需要選取武漢大學範圍內的位置。

獲取經緯度可以直接使用百度地圖拾取座標，或使用 FineGeoJSON Editor 工具新增標記點獲取經緯度，詳細操作過程不多贅述。

資料範例如下圖所示：

3）圖書館異常

該資料集用於三維城市新增「模型-資料圖層」使用，資料集中模型名稱需與三維城市模型列表中的模型名稱保持一緻，才能正確匹配資料並顯示。

如下圖所示：

2.4 設定攝像頭異常預警

1）綁定資料

在三維城市編輯介面右側配置區，點選「資料>新增資料圖層」，選擇「點-資料圖層」。修改圖層名稱並綁定「攝像頭位置」資料集資料。

如下圖所示：

2）設定標簽和樣式

可根據自己的喜好或 UI 設計修改標簽和樣式的顯示效果。

注：V1.5.0 版本及之後的插件，點/柱體/線-資料圖層中，可支援設定光圈和光柵的顔色。

點選「新增事件>資料更新後>資料標籤」，為模型設定顯示內容、字元大小、色相即顯示形式。

完成以上步驟後，可適當調整三維城市視角，使其資料標籤顯示完整。效果如下圖所示：

3）設定資料預警

點選「新增資料預警」，設定預警條件為 '座標點內容'等於'異常' ，在預警內容中可修改預警標簽及樣式。

具體操作示範如下：

2.5 設定圖書館模型預警

新增資料圖層為「模型-資料圖層」，綁定資料、設定標簽、新增資料預警等步驟均與 2.4 節相同。此處不再贅述。

如下圖所示：

模型的預警內容如下圖所示：

完成所有設定後，效果如下圖所示：

最後點選「傳回視覺化看板」回到畫布頁面。

2.6 設定表格組件

1）新增表格組件

點選組件區「文字>表格」，將組件新增到畫布中，點選右側「編輯組件」進入表格編輯介面。如下圖所示：

2）設計表格內容

將「安防裝置詳情」資料集中欄位拖入儲存格，並設定標題行。如下圖所示：

3）設定儲存格條件屬性

要實現設定狀態為「異常」時，該行內容突出顯示，則需要新增條件屬性。

選中 D2 儲存格，該儲存格並無內容。在右側屬性面板選擇「條件屬性」，新增兩個條件，分別顯示兩種裝置狀態的圖示。

當條件為公式 C2="異常"，設定當前行文字顔色為紅色，當前格子背景為圖片。如下圖所示：

當條件為公式 C2="正常" ，當前格子背景為圖片。如下圖所示：

4）設定表格自適應屬性

在表格編輯介面，點選「範本>PC端自適應屬性」，根據實際情況設定記錄。如下圖所示：

注：一般資料較少可設定「雙向自適應」，資料較多可設定「橫向自適應」並設定 跑馬燈 效果。

5）設定完成後在畫布頁面，為表格新增背景標題等即可。

點選右上角「儲存」，本文範例到這裏就完成了。

注：三維組件不支援行動端。

點選下載本文範例範本及資料：FVS模型實現數據預警.zip

範本資源線上體驗：智慧校園視覺化大屏

範本資源下載位址：智慧校園視覺化大屏