AG亚游集团

服務電話

028-85283257

13540034978

13540034978 / 028-85283257

461544981@qq.com

contact
成都市武侯區航空路6號豐德國際廣場B1座12A樓02號
聯係我們
可視化大屏如何實現?怎樣對接開發?看這就對了!

前言

關於可視化大屏,好多人看到好多炫酷的大屏,視覺效果都非常棒,但是具體實現起來大家就充滿了疑惑,今天就來聊一聊可視化大屏的具體實現方法。歡迎大家溝通交流。



大屏常見的實現方式

WEB


項目中最常用的實現方法,第三方的輕量化圖表控件比較多,最常見的Echarts,來自Enterprise Charts的縮寫,商業級數據圖表,一個純Javascript的圖表庫,可以流暢的運行在PC和移動設備上,兼容當前絕大部分瀏覽器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底層依賴輕量級的Canvas類庫ZRender,提供直觀,生動,可交互,可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗,賦予了用戶對數據進行挖掘、整合的能力。支持折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、餅圖(環形圖)、雷達圖(填充雷達圖)、和弦圖、力導向布局圖、地圖、儀表盤、漏鬥圖、事件河流圖等12類圖表,同時提供標題,詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件,支持多圖表、組件的聯動和混搭展現。


undefined

圖片源自https://threejs.org/截圖


threesjs(Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創建各種三維場景,包括了攝影機、光影、材質等各種對象。)threejs.org 網站上有好多demo案例大家有時間可以研究下。



U3D

undefined


Unity 3D的簡稱是由Unity Technologies開發的一個讓玩家輕鬆創建諸如三維視頻遊戲、建築可視化、實時三維動畫等類型互動內容的多平台的綜合型遊戲開發工具,是一個全麵整合的專業遊戲引擎。Unity類似於Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的圖型化開發環境為首要方式的軟件。其編輯器可運行在Windows、Linux(目前僅支持Ubuntu和Centos發行版)、Mac OS X下,可發布遊戲至Windows、Mac、Wii、iPhone、WebGL(需要HTML5)、Windows phone 8和Android平台。也可以利用Unity web player插件發布網頁遊戲,支持Mac和Windows的網頁瀏覽。它的網頁播放器也被Mac 所支持。


UE4

undefined


Unreal Engine4的簡稱,是由遊戲開發者製作並供遊戲開發者使用的一整套遊戲開發工具。UE4不僅涉及主機遊戲、PC遊戲、手遊等遊戲方麵,還涉及高精度模擬,戰略演練,工況模擬,可視化與設計表現,無人機巡航等諸多領域。


undefined


前段時間發布了虛幻5的宣傳片刷爆朋友圈,近幾年UE4也在可視化中的運用也逐漸多了起來。


VENTUZ


entuz專注於高端視聽內容的製作,包括交互展示和大型活動、視頻牆、廣播電視在線包裝及演播室舞台及燈光控製等領域。Ventuz十分穩定、功能強大、流程簡單,可以很容易的集成到複雜的硬件和軟件係統中。同樣ventuz也是可交互的,不過ventuz不支持mac係統,有點小遺憾,網上一些資源素材都是英文的,感覺學習成本挺高沒有深入研究,就大概做下講解下有這個工具。


項目用什麽開發工具很大程度決定了設計方法方式,各種工具自有不同的優劣勢,像web輕量化圖表控件多,效果相比u3d會弱很多。u3d對三維支持好,粒子等效果有優勢。U3D、UE4、ventuz都是對於偏三維的效果有很好的支持,效果上都能做出比較驚豔的場景效果,了解這些工具的大致實現效果可為以後做設計產生事半功倍的效果。



地圖常見的實現方法


關於地圖一般分為2d地圖和3d地圖不同的效果實現的方法也不同。


undefined

圖片來源於“雷爾可視化”如侵權刪



2D地圖

下麵是普通2d地圖的截圖可以任意縮放下鑽,基於json技術實現的。一般都是去對接三方平台,如百度地圖、高德地圖、騰訊地圖、穀歌地圖等。


圖片來自百度開放平台


2D地圖效果上可以實現在地圖上進行點、線、麵、區域、熱力等效果隨意配置。


圖片是百度地圖的開放平台模板(百度地圖、高德地圖、騰訊地圖、穀歌地圖等都有自己的地圖開放平台)。他裏麵有大量的配色樣式模板,可以隨意調整,大家有時間可以研究下。

3D地圖

3d地圖大致分為3d地球、3d地圖、智慧城市、智慧工廠等各種3d建模的效果。


圖片已獲得作者聶永真授權作品鏈接(https://www.zcool.com.cn/work/ZMzY4NjM2NDA=.html)


3D地球的話一般是需要建模加貼圖實現的,可以在c4d中做球體然後貼圖,對接到開發的話隻需要提供地圖貼圖就可以了。貼圖的話進行調色處理,有的會采用凹凸貼圖實現球體凹凸不平的效果。



關於地球的實現方法Echarts組件庫裏有一些官方示例(如圖),可以在官方示例的基礎上進行調整,不過缺點就是粒子飛線的效果會打些折扣,上圖的地球是采用U3D工具開發實現的,在粒子飛線效果上都有很好的支持。

地圖是要打通數據的,顏色色塊根據數據量區分的,點擊會下鑽到具體的省份地區。需要前端調用外部地圖接口,要做到滿意的效果用3D自建地圖結合H5反複調試,最終實現。



上圖地圖立體效果圖也可以通過三方組件庫的實現的,缺點是前端可配置的項目少,好多效果都不支持。現在好多公司都多多少少會有一些大屏的需求,但是公司前端不是專業做大屏數據的,他們大部分都會直接套用三方現有的組件庫去實現,在實現效果上會大打折扣。


圖片已獲得作者聶永真授權作品鏈接(https://www.zcool.com.cn/work/ZMzY4NjM2NDA=.html)


智慧城市像這種城市的3d模型我們可以直接從google、高德地圖購買,它們本質上是立體空間裏的數據,開發可以通過這些數據將它實體化,設計師也可以導出開發提供的模型,在三維軟件中作為底層建築模型,不需要單獨去建模。在現有模型基礎上再進行一些效果的處理,比如走光、光線上升、車流、飛線等。具體實現也是采用U3D去實現的,前文也說了U3d對粒子飛線這些效果的支持性比較好。所以這種效果大多都會采用U3D去做(不是唯一ue4、ventuz同樣能實現這種效果)。


其實不管是web也好u3d、Ue4、ventuz也好都隻是一種實現的工具,最重要的還是設計思路。以上實現方法作者也是了解一些皮毛,這裏就大概了解下知道一些效果用什麽工具可以實現出來就好,沒必要去深究死磕。我們的重點還是要回歸到做好設計,去更好的服務於業務。


拆解下一些對接開發的方法

很多剛接觸可視化的朋友最關心的問題自己效果出來了咋讓開發實現呢?很讓人頭疼。其實可視化大屏的對接實現跟普通網頁ui界麵交付是一樣的道理,切圖+標注。

標注

現在好多三方軟件可以自動生成標注(藍湖、像素大廚等)。需要注意的是,如果大屏頁麵需要在不同比例的終端展示,這就牽扯適配問題了,那麽此時的標注與開發可以使用rem作為基本單位來實現,這樣實現的大屏頁麵在後期會有更好的擴展性與適應性,這塊三方工具都可以隨意轉換單位的,大家了解就好。

切圖

對於切圖這塊需要注意的是要區分界麵效果,哪些是可以直接給參數代碼實現的、哪些效果是需要給切圖的。我一般會把它區分為有數據效果圖表 基於組件庫拓展、無數據 ae做動效輸出json。一般開發用代碼寫不出的樣式或動效,都需要設計師切圖作支持:比如數據容器的邊框、小的動效、頁麵整體大背景、部分圖標等純視覺展示的。牽扯到數據接口的就需要開發區自己代碼實現了。
總之就是在實現過程中溝通很重要,隨時跟開發溝通進度及效果,做設計前也需要去考慮開發實現的,一些不確定能不能實現的效果,一定要在做之前跟開發區溝通解決方法。

推薦一款ae神器Bodymovin  把在AE上做好的動畫導出為json文件,直接給到開發,可以幫助提高實現動效效率,同時提高動效質量,網上有好多視頻教程這塊就不在一一闡述了。


undefined

公眾號回複 “ae插件”


 bodymovie插件下載地址:https://github.com/bigxixi/bodymovin_cn 

bodymovin需要這個安裝器才能安裝 推薦zxp安裝器下載地址https://zxpinstaller.com/ 


下麵是官方支持的ae效果說明:

  • 插件支持預合成,形狀層次,固態層,圖片,空對象以及文字樣式。
  • 支持遮罩和反向遮罩。也許別的模式也會支持,但是導致性能造成巨大影響。
  • 支持時間重映射。
  • 支持形狀雙層的形狀,矩形,橢圓和三角形。
  • 目前隻支持滑塊效果。
  • 支持部分表達式。更多介紹可以查看這裏(英文)
  • 不支持:圖像序列,視頻和音頻(也許未來會支持)。
  • 不要擴展軸向!不知為何為何,擴展軸向會破壞導出的數據,所以不要做這個操作。


Bodymovin工具在AE中有些預設效果和透視功能是不支持的,可以把動畫渲染成視頻,把格式轉換為ogg或者webm網頁視頻格式,網頁格式視頻加載是非常快的,之後把文件給開發就可以了。
注意Bodymovin導出json給開發的文件中需要有完整視頻參考,開發可以通過完整視頻查看位置和效果,同時如果出現 json 導出錯誤的情況,開發可以查看,遇到不一樣的地方可以詢問設計師。開發完成後需要走查,看是否與你預期一致。

總結

本文大概講了下web、U3d、Ue4、ventuz等一些可視化的實現工具,以及地圖的一些實現方法,關於數據可視化大家都是摸著石頭過河,以上是我在工作中了解的一些跟開發對接實現的經驗分享給大家,歡迎大家多溝通交流。



原文鏈接: 


Source
成都AG亚游集团科技
date
2020-05-26 15:34:28
share
真心愛爾·誠意服務

多一份了解,多一個選擇

即可開啟一站式服務體驗
預約麵談可撥打 135-4003-4978 / 028-85283257
取消谘詢