分享
查看: 4462|回复: 1

[分享] 一个快速制作【3D城市大屏】的流程

[复制链接]

一个快速制作【3D城市大屏】的流程

发表于 2019-6-4 15:42:41 来自 分享 阅读模式 倒序浏览
zzv_icon4462 zzr_icon1 查看全部

 目标:

直接套用模板,0代码创建如下图的3D城市大屏

一个快速制作【3D城市大屏】的流程

所需工具

·       ThingJS平台:面向互联网的3D可视化开发平台

·       CityBuilder  聚焦城市的3D地图搭建工具

·       DataV         阿里云的数据可视化产品

操作步骤

1       步骤总览
·CityBuilder一键城市·--·ThingJS在线预览·--·DataV创建大屏·--·大屏对接3D城市
2       步骤1CityBuilder一键城市

    2.1 打开CityBuilder,在“地图项目”-“我的”页面中新建项目,选择模板

一个快速制作【3D城市大屏】的流程

    2.2 在弹出的选择区域窗口,可搜索、拖动区域框来确定城市范围,点击“确定”,创建3D城市

一个快速制作【3D城市大屏】的流程

    2.3 生成项目后,点击“JS”按钮,输出至ThingJS,并获取预览地址。我的演示地址是:https://www.thingjs.com/guide/sampleindex.html?name=Y2l0eWJ1aWxkZXI=/testDark2.js?n=583

一个快速制作【3D城市大屏】的流程一个快速制作【3D城市大屏】的流程 一个快速制作【3D城市大屏】的流程

3       步骤2:DataV模板创建大屏

    3.1 进入DataV网站(现在可以体验试用哦,https://data.aliyun.com/visual/datav?spm=5176.8142029.dataTechnology.4.2fad6d3eNyVlXw),进入控制台。

    3.2“新建可视化”,选择一个模板创建大屏。

一个快速制作【3D城市大屏】的流程

一个快速制作【3D城市大屏】的流程

4       步骤3:大屏IFrame嵌入3D城市地图,发布

    4.1 大屏中有个全国地图,记下组件的位置和大小后,删掉该组件。

    4.2 在同样的位置加IFrame组件,把IFrame图层放到倒数第二层,输入第2.3步骤的3D城市URL。

    4.3 预览,如下图。保存并发布(https://datav.aliyuncs.com/share/6473b979eccca089d68947a68142ee08)。

一个快速制作【3D城市大屏】的流程

p.s. 商业模板中的雾蓝风格跟这个更搭配~

一个快速制作【3D城市大屏】的流程

一个快速制作【3D城市大屏】的流程

avatar

77

主题

224

帖子

1176

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1176
橘子酱该减肥啦 发表于 2021-5-20 17:56:36 显示全部楼层
目前一键城市更改为3D城市页面供大家进行选择,点击 https://www.thingjs.com/guide/speedcityshow/进入页面搜索查看对应城市效果
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t