基于WebGL的三維資料可視化大屏開發流 ThingJS

三維資料大屏可視化系統包含多源資料連接配接、生成二維/三維視圖、建構可視化大屏、大屏功能應用等一體化服務，基于多年可視化項目經驗， ThingJS平台 得出從資料源上傳到可視化大屏應用的完整流程，供參考。

多源資料連接配接功能

系統提供對資料的多種連接配接方式，包括：多種資料庫資料源連接配接、實時資料表和靜态檔案資料源，具體可檢視資料檔案清單頁。

可視化視圖建構功能之圖形展現

可視化大屏提供豐富的二維及三維圖形展現, 平面圖表是常見的視圖元素。界面側邊欄提供應有盡有的可視化視圖清單,包含了太陽圖、柱狀圖、餅圖、玫瑰圖、折線圖、雷達圖、靜态和動态地圖、環狀圖、文本标簽雲等常用圖形。使用者點選可視化視圖選項後，系統會進行視圖類型與資料結構比對。

登入ThingJS線上平台，點選上方菜單欄的“圖表”圖示，由charterbuilder提供二維圖表模闆（即将接入阿裡雲dataV全模闆），囊括了關系、柱形、熱力圖、儀表盤等常用的可視化監控圖形，VIP使用者有更豐富的樣式選擇。

可視化大屏的城市地理資料以2D/3D的視角呈現，火柴盒一樣堆在地圖上的三維效果不再吸睛，三維城市模型有更進階的表現形式，外形栩栩如生，連路邊的綠化帶都清晰可見，這正是thingjs的可視化開發業務。

ThingJS可視化元件支援模型導入、場景搭建和可視化增效，基于CityBuilder+ThingDepot+3D源碼二次開發輕松實作：

1. 城市級場景搭建工具 CityBuilder 操作簡單，利用可視化元件設定參數和互動動畫；
2. 3D場景搭建完成後，線上接入ThingJS開發平台進行代碼調試；
3. 基于完整3D源碼開發更炫酷的效果；
4. ThingDepot提供海量甄選3D模型，避免重複模組化！

   

ThingJS内部可視化開發流程

可視化大屏建構功能之模闆選擇

建構可視化大屏時提供不同的大屏版式選擇，如dataV提供智慧城市、智慧交通、安全監控、商業智能等場景模闆，所需要的資料分析次元各具特色，滿足各行各業的業務需求。一切基于可視化元件進行操作，單擊每個子圖，直接操作每類圖形的可配置項。

可視化大屏應用功能

可視化大屏應用層包括實時大屏、輪播展示和線上通路等功能。

應用功能的主要作用是對已建構完成可視化大屏，提供進一步的大屏應用服務，使得系統不再僅限于對可視化大屏的檢視、更新、删除和重命名等管理操作。主要應用服務為:

1. 實時大屏。系統采用訂閱釋出者模式，設計實時資料字典及訂閱者資訊管理字典，實作資料可視化視圖對實時資料的及時響應，進而實作實時大屏。
2. 大屏輪播。使用者可自定義輪播大屏數目、輪播間隔和期望輪播大屏配置完成後，可實作大屏輪播展示功能。系統采用延遲加載的設計，降低首屏時間提高使用者體驗。
3. 大屏嵌入。系統釋出生成可通路的URL，使用者可通過 iframe标簽在其他應用中直接呈現，用于線上示範。

   

某指揮中心的大屏可視化應用

系統中的建構層位于應用層之下，主要實作可視化大屏的建構功能，其主要作用是通過一系列界面操作，生成完整美觀的可視化大屏！

ThingJS線上平台

聚焦于城市大屏可視化應用建構，利用dataV、Echarts api接口進行優化配置，開放性強，自由定制自己想要的大屏應用效果！