ThingJS:3D城市大屏成為靚麗風景線,教你3分鍾制作


ThingJS和阿里雲IoT合作開發空間數據可視化,3D城市大屏是一大亮點。

還在制作上圖這種千篇一律的數據大屏?OUT啦!酷炫的3D次世代數據大屏幫你一秒俘獲甲方爸爸的芳心!

本圖片來自ThingJS用戶 雲南唯恆基業科技有限公司

今天就來教大家三維數據大屏!
為了方便演示,我們來制作一個簡單的三維城市與傳統二維圖表相結合的大屏,相信大家學習之后都能做出酷炫的三維大屏!
先來看看結果:

所需工具

• ThingJS平台:面向互聯網的3D可視化開發平台
• CityBuilde r:聚焦城市的3D地圖搭建工具
• DataV:阿里雲的數據可視化產品

操作步驟

CityBuilder一鍵城市·--·ThingJS在線預覽·--·DataV創建大屏·--·大屏對接3D城市

步驟1:CityBuilder一鍵城市

• 打開CityBuilder,在“地圖項目”-“我的”頁面中新建項目,選擇模板。

• 在彈出的選擇區域窗口,可搜索、拖動區域框來確定城市范圍,點擊“確定”,創建3D城市。(現在每人可免費體驗3次哦)

• 生成項目后,點擊“JS”按鈕,輸出至ThingJS,並獲取預覽地址:https://www.thingjs.com/guide/sampleindex.html?name=Y2l0eWJ1aWxkZXI=/testDark2.js?n=583

步驟2:DataV模板創建大屏

• 進入DataV網站(現在可以體驗試用哦,https://data.aliyun.com/visual/datav?spm=5176.8142029.dataTechnology.4.2fad6d3eNyVlXw),進入控制台。

• “新建可視化”,選擇一個模板創建大屏。

步驟3:大屏IFrame嵌入3D城市地圖,發布

• 大屏中有個全國地圖,記下組件的位置和大小后,刪掉該組件。
• 在同樣的位置加IFrame組件,把IFrame圖層放到倒數第二層,輸入第3步驟的3D城市URL。
• 預覽,如下圖。保存並發布 點擊查看

p.s. CityBuilder商業模板更好看哦~

三維場景采用ThingJS CityBuilder即可搭建,這是一個注冊即用的場景搭建工具,豐富的內容組件滿足日新月異的3D開發需求!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM