前言：本文将介绍可视化大屏的实现几种工具，包含WEB,U3D,UE4,VENTUZ，以及2D地图和3D地图常见的实现方法。最后还会分析可视化与开发人员对接的方法，比如切图和设计的AE动效怎样输出给开发，用什么插件等等，学习这些经验，让大家走少很多弯路哦。
1、WEB
项目中最常用的实现方法，第三方的轻量化图表控件比较多，最常见的Echarts，来自EnterpriseCharts的缩写，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
2、U3D
Unity3D的简称是由UnityTechnologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。
Unity类似于Director,Blendergameengine,Virtools或TorqueGameBuilder等利用交互的图型化开发环境为首要方式的软件。其编辑器可运行在Windows、Linux(目前仅支持Ubuntu和Centos发行版)、MacOSX下，可发布游戏至Windows、Mac、Wii、iPhone、WebGL（需要HTML5）、Windowsphone8和Android平台。也可以利用Unitywebplayer插件发布网页游戏，支持Mac和Windows的网页浏览。它的网页播放器也被Mac所支持。
3、UE4
UnrealEngine4的简称，是由游戏开发者制作并供游戏开发者使用的一整套游戏开发工具。UE4不仅涉及主机游戏、PC游戏、手游等游戏方面，还涉及高精度模拟，战略演练，工况模拟，可视化与设计表现，无人机巡航等诸多领域。
4、VENTUZ
Ventuz专注于高端视听内容的制作，包括交互展示和大型活动、视频墙、广播电视在线包装及演播室舞台及灯光控制等领域。Ventuz十分稳定、功能强大、流程简单，可以很容易的集成到复杂的硬件和软件系统中。同样ventuz也是可交互的，不过ventuz不支持mac系统，有点小遗憾，网上一些资源素材都是英文的，感觉学习成本挺高没有深入研究，就大概做下讲解下有这个工具。
项目用什么开发工具很大程度决定了设计方法方式，各种工具自有不同的优劣势，像web轻量化图表控件多，效果相比u3d会弱很多。u3d对三维支持好，粒子等效果有优势。U3D、UE4、ventuz都是对于偏三维的效果有很好的支持，效果上都能做出比较惊艳的场景效果，了解这些工具的大致实现效果可为以后做设计产生事半功倍的效果。
关于地图一般分为2d地图和3d地图不同的效果实现的方法也不同。
1、2D地图
下面是普通2d地图的截图可以任意缩放下钻，基于json技术实现的。一般都是去对接三方平台，如百度地图、高德地图、腾讯地图、谷歌地图等。
图片来自百度开放平台
2D地图效果上可以实现在地图上进行点、线、面、区域、热力等效果随意配置。
2、3D地图
3d地图大致分为3d地球、3d地图、智慧城市、智慧工厂等各种3d建模的效果。
3d地球的话一般是需要建模加贴图实现的，可以在c4d中做球体然后贴图，对接到开发的话只需要提供地图贴图就可以了。贴图的话进行调色处理，有的会采用凹凸贴图实现球体凹凸不平的效果。
关于地球的实现方法Echarts组件库里有一些官方示例(如图)，可以在官方示例的基础上进行调整，不过缺点就是粒子飞线的效果会打些折扣，上图的地球案例是采用U3D工具开发实现的，在粒子飞线效果上都有很好的支持。地图是要打通数据的，颜色色块根据数据量区分的，点击会下钻到具体的省份地区。需要前端调用外部地图接口，要做到满意的效果用3D自建地图结合H5反复调试，最终实现。
上图地图立体效果图是通过三方组件库的实现的，缺点是前端可配置的项目少，好多效果都不支持。现在好多公司都多多少少会有一些大屏的需求，但是公司前端不是专业做大屏的，他们大部分都会直接套用三方现有的组件库去实现，在实现效果上会大打折扣。
智慧城市像这种城市的3d模型我们可以直接从google、高德地图购买，它们本质上是立体空间里的数据，开发可以通过这些数据将它实体化，设计师也可以导出开发提供的模型，在三维软件中作为底层建筑模型，不需要单独去建模。
在现有模型基础上再进行一些效果的处理，比如走光、光线上升、车流、飞线等。具体实现也是采用U3D去实现的，前文也说了U3d对粒子飞线这些效果的支持性比较好。所以这种效果大多都会采用U3D去做（不是唯一ue4、ventuz同样能实现这种效果）。
其实不管是web也好u3d、Ue4、ventuz也好都只是一种实现的工具，最重要的还是设计思路。以上实现方法作者也是了解一些皮毛，这里就大概了解下知道一些效果用什么工具可以实现出来就好，没必要去深究死磕。我们的重点还是要回归到做好设计，去更好的服务于业务。
很多刚接触可视化的朋友最关心的问题就是自己效果出来了咋让开发实现呢？很让人头疼。其实可视化大屏的对接实现跟普通网页ui界面交付是一样的道理，切图+标注。
标注
现在好多三方软件可以自动生成标注（蓝湖、像素大厨等）。需要注意的是，如果大屏页面需要在不同比例的终端展示，这就牵扯适配问题了，那么此时的标注与开发可以使用rem作为基本单位来实现，这样实现的大屏页面在后期会有更好的扩展性与适应性，这块三方工具都可以随意转换单位的，大家了解就好。
切图
对于切图这块需要注意的是要区分下界面功能，哪些是可以直接给参数代码实现的、哪些效果是需要给切图的。我一般会把它区分为有数据效果图表基于组件库拓展、无数据ae做动效输出json。一般开发用代码写不出的样式或动效，都需要设计师切图作支持：比如数据容器的边框、小的动效、页面整体大背景、部分图标等纯视觉展示的。牵扯到数据接口的就需要开发区自己代码实现了。
总之就是在实现过程中沟通很重要，随时跟开发沟通进度及效果，做设计前也需要去考虑开发实现的，一些不确定能不能实现的效果，一定要在做之前跟开发区沟通解决方法。
推荐一款ae神器Bodymovin把在AE上做好的动画导出为json文件，直接给到开发，可以帮助提高实现动效效率，同时提高动效质量，网上有好多视频教程这块就不在一一阐述了。
Bodymovin官方支持的AE效果说明：
Bodymovin工具在AE中有些预设效果和透视功能是不支持的，可以把动画渲染成视频，把格式转换为ogg或者webm网页视频格式，网页格式视频加载是非常快的，之后把文件给开发就可以了。注意Bodymovin导出json给开发的文件中需要有完整视频参考，开发可以通过完整视频查看位置和效果，同时如果出现json导出错误的情况，开发可以查看，遇到不一样的地方可以询问设计师。开发完成后需要走查，看是否与你预期一致。