【场景切换地图】用上它,老板口中别人家的大屏你也能搞定!

楼主
FVS产品运营
酷炫的大屏效果谁都想做出来,但是要付出的时间精力令人望而却步。尤其是占据视觉中心地位的地图,不精心雕刻个十天半月的,如何承托起整个大屏的逼格?
图图今天给大家送上FineReport全新场景地图,多场景切换、沉浸式背景、无缝钻取轮播......让大屏的空间感、立体感、精致度瞬间提升!

话不多说,先看效果:
点击进入demo系统,PC端chrome浏览器打开体验更佳 大屏demo系统展示


一、场景地图有哪些亮点?
1、多种场景切换

新地图的全名为场景切换地图,适用于展示多场景下的多维度地图数据,是数据+地图组合在维度数量上的改良。“场景设置”里有点、线、柱形和区域地图类型可选,数据匹配、样式调整、特效设置一应俱全。场景地图的每一个场景下,都可以精心搭建出一个立体的数据世界。



2、沉浸式背景

从单场景画面看,新地图的背景采用全新的引擎技术精心雕刻,效果不亚于游戏画面。星空风格的背景是场景地图的视觉精华,为酷炫的大屏效果做了极大的贡献。


本次更新的地图背景效果有粒子、流星、齿轮、扫光、底部图层和天空背景6种,可以自定义开启或关闭。如果大屏需要更强的视觉冲击力,建议打开全部背景效果项。地图背景即大屏背景,不需要专门做区分或融合的考量,其它组件跃然其上,结合效果浑然天成,层次分明恍若伸手可触,毫无冲突感和违和感。


3、无缝钻取轮播

从动画效果看,地图可选择轮播/暂停轮播和手动切换,区域地图类型下还可以有向下钻取的效果,这看起来好像和普通地图差不多?
不,场景地图不仅可以切换地图展示的数据维度、内容,还可以调整视角、远近和地图边界,真正实现“场景”的切换。场景地图在“钻取”的过程中可以平滑过渡视角,视角切换过程如同乘坐飞机从高空滑下,到达城市的上空,比单纯的地图钻取来得更加震撼。





地图在配置时可以直观地看到实时更改效果,所见即所得。鼠标拖拽可以自由切换地图视角,在高空俯视和水平线远眺之间零间断调整;上下滑动则可以调整视物的远近,中国地图下最大视野可以一览全亚洲边界背景下的中国,放大则可以逼近某个省,直至精确找到某个市。


点击“保存为初始视角”可以将调整好的角度设置为页面初始化的效果,随需展现地图最美的角度。

4、细节更精致

新地图在细节上的视觉效果几乎全面优于普通地图,例如,在样式配置方面,点形状上就可以有三角锥点、四角锥点、菱形角锥点光点四种可选样式,可谓是大屏地图的“点睛之笔”。


柱形图+地图的组合下,体现了数据量大小的光柱在地图上“平地起高楼”,光柱宽高比例、光圈效果可以调整,在数据和图形的结合方面更加生动形象。





二、一起看看制作过程

1、图表获取

只要你能正常使用FineReport设计器,上手10分钟就能get这个场景地图啦,不信更新图表插件一起试试?

ps:最新版安装包在这里哦:下载链接


强烈建议大家让场景地图布满全屏幕,并置于最底层,这样才能将地图组件的“场景感”发挥到淋漓尽致!


2、配置数据和样式

接下来的操作与普通地图很相似,选择地图类型、配置数据和样式。

ps:适用场景地图时,若地图边界内的某区域缺少数据,该区域也不会灰化,不用担心缺失数据对画面美观性的影响啦!


3、调整视角

配置完场景的数据和样式后,需要对地图主体的远近,观察者的视线进行精细调整,且调整效果所见即所得!


4、添加场景

以上只是单个场景的单独配置,此图表最精彩之处还不在此。右上角点击“+”添加第二个以上的场景进行轮播才是精髓啊!


以上,一个可视化地图就完成啦!看下效果:


此时的模板还不能称之为大屏,需要大家再添加其它组件,将表格、图表合理分布在场景地图的四周。
当然还可以设置地图和周围组件之间的联动效果,在场景切换的同时轮播周围的组件,营造更好的沉浸式场景体验。  





本次更新的扩展图表插件是免费试用的,大家可以直接在插件商城进行更新。(注意:设计器和服务器端都需要更新,内网环境请在链接下载最新安装包,选择从本地安装。插件的具体使用方法请参照帮助文档

再好的工具光看也没有产出,真正做出效果良好的大屏还需要多多练习呀!这里图图给大家提供了大屏demo和相关素材,帮助大家更快上手场景地图。点击下方链接获取demo素材:

分享扩散:

沙发
发表于 2020-9-11 10:26:26
点赞!
参与人数 +1 F豆 +10 理由
海拉鲁魔头 + 10 骚年,我看好你哦

查看全部评分

板凳
发表于 2020-9-11 10:27:09
会不会图片有点大,我这里咋没加载好。有几个图一直不显示
地板
发表于 2020-9-11 10:52:15
太棒了,真的以前地图的效果太少了
一直想要酷炫的地图展现
5楼
发表于 2020-9-11 11:40:34
6楼
发表于 2020-9-11 14:10:39
(*@ο@*) 哇~
7楼
发表于 2020-9-11 16:14:52
8楼
发表于 2020-9-12 08:54:03
震撼来袭
9楼
发表于 2020-9-12 08:57:11
10楼
发表于 2020-9-12 09:56:15

够炫酷
11楼
发表于 2020-9-12 11:11:36
这也太厉害了吧
12楼
发表于 2020-9-14 09:18:56
是不是有点太卡了0.0.。。1050Ti完全带不动0.0
13楼
发表于 2020-9-14 09:30:49
为什么市场登录不上去呢
14楼
发表于 2020-9-14 13:43:37
这个地图科技感十足,喜欢
15楼
发表于 2020-9-14 14:15:34
能震注领导了
16楼
发表于 2020-9-14 14:43:45
显示屏尺寸太小都配不上这地图了
17楼
发表于 2020-9-15 09:29:26
这个效果不错
18楼
发表于 2020-9-17 11:11:35
太棒了,这个效果!
19楼
发表于 2020-9-23 11:50:25
我觉得除了炫之外,不是很实用。运用到现实中,很简单的一个对话。
我:领导,我做了一个很酷炫的大屏报表。
领导:发来我去看看。
我:您先升级一下电脑,显卡1660以上,1050TI都不行,分辨率要高一些的。
领导:kao,原来数据化分析+大屏报表,不止XXX,还需要给这个领导配置新电脑,各大会议室全部置换新电脑。
我:那也没办法呀。官方是这样的。
领导:... ...
20楼
发表于 2020-9-23 13:53:06
66666  点赞
21楼
发表于 2020-9-24 14:08:55
很炫酷,可打开,浏览器给蹦了
22楼
发表于 2020-9-30 09:12:04
23楼
发表于 2020-10-21 11:52:15
调整视角的那一步,显示 not support realtime preview,是显卡原因吗,rx570,本地设计器和服务器的插件版本是一致的
24楼
发表于 2020-10-23 15:01:17
某省某市缺少区域咋整,怎么添加
25楼
发表于 2020-11-2 16:07:55
为什么我的地图提示没有接口呢?是不是版本问题?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表