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

（上圖來(lái)自ThingJS用戶 云南唯恒基業(yè)科技有限公司）

今天就來(lái)教大家三維數(shù)據(jù)大屏！

為了方便演示，我們來(lái)制作一個(gè)簡(jiǎn)單的三維城市與傳統(tǒng)二維圖表相結(jié)合的大屏，相信大家學(xué)習(xí)之后都能做出酷炫的三維大屏！

先來(lái)看看結(jié)果：

所需工具

• ThingJS平臺(tái)：面向互聯(lián)網(wǎng)的3D可視化開發(fā)平臺(tái)
• CityBuilder：聚焦城市的3D地圖搭建工具
• DataV：阿里云的數(shù)據(jù)可視化產(chǎn)品

操作步驟

CityBuilder一鍵城市·–·ThingJS在線預(yù)覽·–·DataV創(chuàng)建大屏·–·大屏對(duì)接3D城市

步驟1：CityBuilder一鍵城市

• 打開CityBuilder，在“地圖項(xiàng)目”-“我的”頁(yè)面中新建項(xiàng)目，選擇模板。

• 在彈出的選擇區(qū)域窗口，可搜索、拖動(dòng)區(qū)域框來(lái)確定城市范圍，點(diǎn)擊“確定”，創(chuàng)建3D城市。（現(xiàn)在每人可免費(fèi)體驗(yàn)3次哦）

• 生成項(xiàng)目后，點(diǎn)擊“JS”按鈕，輸出至ThingJS，并獲取預(yù)覽地址:https://www.thingjs.com/guide/sampleindex.html?name=Y2l0eWJ1aWxkZXI=/testDark2.js?n=583

步驟2：DataV模板創(chuàng)建大屏

• 進(jìn)入DataV網(wǎng)站（現(xiàn)在可以體驗(yàn)試用哦，https://data.aliyun.com/visual/datav?spm=5176.8142029.dataTechnology.4.2fad6d3eNyVlXw），進(jìn)入控制臺(tái)。

• “新建可視化”，選擇一個(gè)模板創(chuàng)建大屏。

步驟3：大屏IFrame嵌入3D城市地圖，發(fā)布

• 大屏中有個(gè)全國(guó)地圖，記下組件的位置和大小后，刪掉該組件。
• 在同樣的位置加IFrame組件，把IFrame圖層放到倒數(shù)第二層，輸入第3步驟的3D城市URL。
• 預(yù)覽，如下圖。保存并發(fā)布

p.s. CityBuilder商業(yè)模板更好看哦~