楼主是个喜欢探索的好猿,自从上次玩了下阿里云物联网数据分析的二维可视化以后,发现还有很多新玩法可以解锁(参见楼主的上一篇博文将你的物联网设备位置快速接入到地图上,只需要10分钟!)。说到这里,楼主的眼睛又开始冒星星了。
楼主的吐槽
楼主在的公司总是会接很多可视化大屏项目,什么智慧城市,智慧物流,智慧园区bulabulabula……,技术含量不说多高,但是看起来确实很抓人眼球。是向领导汇报,咳咳,不对,是提升用户体验的不二利器。
做过可视化大屏的都知道,可视化大屏有很多现成的可视化控件可以用,比如echarts,d3js之类。这些控件都已经很成熟,只要用熟练了,效果不会太差,而真正比较让人头疼的地方,在于大屏中用到的三方地图之类的组件、监控、从端上到大屏的数据打通之类的东西。
说到这里,有人会发现,之前楼主玩的二维可视化好像没有数据大屏能力,它只是解决了地图展示,数据打通的工作,可视化大屏组件从哪里来呢?别忘了,阿里云上还有DataV这个专门为大屏打造的产品。下面跟着楼主一起来快速打造一个从终端设备到可视化大屏,一体化打通的智能物联网可视化系统吧。
二维可视化分享功能
之前楼主在玩物联网二维可视化的时候发现了二维可视化里一个比较好用的功能:
点开你会发现,编辑好的二维可视化地图,可以通过两种方式分享出去,脱离阿里云控制台单独使用。这一点和datav比较类似。
- 第一种方式是用手机号加验证码登录,这种方式估计是给那些要把二维可视化单独展示的用户使用的;
- 第二种方式是用一个带加密串的url,直接访问场景;这种方式我理解上更适合用来做系统集成,作为一个模块或者一个图层嵌入到其他系统里去。
楼主要用来和datav集成的就是这个第二种方式。
DataV第三方页面嵌入
在控制台里搜DataV,之前楼主因为工作关系,已经开通了这个服务,这里直接进去:
创建一个大屏,这里我直接用模板建一个
楼主这里只是展示,所以偷懒一下,直接选一个带地图的模板:
在这里选择组件Iframe
把之前的地图组件删掉,调整新的Iframe组件到合适的大小和位置:
在右边可以看到设置Iframe链接的地方:
回到二维可视化编译页面,先修改地图的主题配色,使风格和大屏靠近
然后复制分享链接,这里我们复制免登的链接,复制以后填到刚才的设置IFrame链接的地方:
最后一步,把DataV大屏分享一下:
最后我们来看看成品的效果如何:
这里楼主偷懒,周围的字样的数据都没有改,但是已经可以看到比较ok的效果了,怎么样,是不是很简单!
后续楼主发现其他好玩的玩法,会持续分享……