关视化大屏，人看到炫酷的大屏，视效果非常，但是具现来大家就充满疑惑，今天就来聊一聊视化大屏的具现方法。欢迎大家沟通流。
1. WEB
项目中最常用的实现方法，第三方的轻量化图表控件比较多，最常见的 Echarts，来 Enterprise Charts 的缩写，商业数据图表，一个纯 Javascript 的图表库，可以流畅地运行在 PC 和移动备上，兼容当前绝大部浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari 等），底层依赖轻量的 Canvas 类库 ZRender，提供直观、生动、可交互、可高度个性化定制的数据可视化图表。
创新的拖拽重算、数据视图、域漫游特性增强了用户体验，赋予了用户对数据行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K 线图、饼图（环形图）、雷达图（填充雷达图）、弦图、力导向布局图、图、仪表盘、漏斗图、事件流图 12 类图表，同时提供标题，详气泡、图例、域、数据区域、时间轴、具箱 7 可交互组件，支持多图表、组件的联动混搭展。
△ 图片源自 https://threejs.org/截图
threesjs（Three.js 是一款运行在浏览器中的 3D 引擎，你以用它创建各种三场，包括摄影机、光影、材质等各种对象。）threejs.org 网站上有 demo 案例，大家有时间以研究下。
2. U3D
Unity 3D 的简称由 Unity Technologies 发的一让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画类型互动内的多平台的综合型游戏发具，一全面整合的专业游戏引擎。
Unity 类似 Director,Blender game engine, Virtools 或 Torque Game Builder 等用互的图型化开境为首要方式的软件。其编辑器运行在Windows、Linux(目前仅支持 Ubuntu 和 Centos 行版)、Mac OS X 下，游戏至 Windows、Mac、Wii、iPhone、WebGL（需要HTML5）、Windows phone 8 和 Android平台。
也可以利用 Unity web player 插件发布网页游戏，支持Mac和Windows网页浏览。它网页播放也被Mac 所支持。
4. UE4
Unreal Engine4 的简称，由游戏发者制作并供游戏发者使用的一整套游戏发具。UE4 不仅涉及主机游戏、PC 游戏、手游游戏方面，还涉及高精度模拟，战略演练，况模拟，可视化与设表，无人机巡航诸多领域。
段时间发布了虚幻 5 的宣传片刷爆朋友圈，近几 UE4 也可视化中的运用也逐渐多了起。
5. 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 建模的效果。
△ 图片已获得作者聂永真授权作链接（https://www.zcool.com.cn/work/ZMzY4NjM2NDA=.html）
3d 地球的话一是需要建模加贴图实现的，可以在 c4d 中做球体然后贴图，对开发的话只需要提供地图贴图就可以了。贴图的话进行调色理，有的会采用凹凸贴图实现球体凹凸不的效果。
关于地球的实现方法 Echarts 组件库有一些官方示例(如图)，可以在官方示例的基础上进行调整，不过缺点就是粒飞线的效果会些折扣，上图的地球案例是采用 U3D 工开发实现的，在粒飞线效果上都有好的支持。
图打通数据的，颜色色块根据数据区分的，点击会下钻到具体的省份区。需端调用外部图接口，到满意的效果用 3D 自建图结合 H5 反复调试，终实。
图图立体效果图通过三方组件库的实的，缺点端可配置的项目少，好多效果都不支持。好多公司都多多少少会一些屏的需求，但公司端不专业屏的，他们部分都会直接套用三方的组件库去实，实效果会打折扣。
△ 图片已获得作者聂永真授权作品链接（https://www.zcool.com.cn/work/ZMzY4NjM2NDA=.html）
智慧市像种市的 3d 模型我们以直接从 google、高地图购买，它们质上是立空间里的数据，开以通数据将它化，设计师也以导出开提供的模型，在三软件中为底建筑模型，不需要单独去建模。在现有模型基础上进行一效果的处理，比走光、光上升、车流、飞等。
具体实现也是采用 U3D 去实现，前文也说了 U3d 粒子飞线这些效支持性比较好。所以这效大多都会采用 U3D 去做（不是唯 ue4、ventuz 样能实现这效）。
实管是 web 好 u3d、Ue4、ventuz 好都只是一种实现的工具，最重要的还是设计思路。上实现方法作者是了解一些毛，这里就大概了解知道一些效果么工具可实现来就好，没必要深究死磕。我们的重点还是要归到做好设计，更好的务于务。
很多接触可视的友最心的问题就是自己效果来了咋开发实现呢？很人头疼。实可视大屏的对接实现跟普通页 ui 界面交付是一样的道，切图+标注。
1. 标注
现在好多方软件可自生成标注（蓝湖、像素大厨等）。需要注意的是，如果大屏页面需要在同例的终端展示，这就牵扯适配问题了，那么此时的标注与开发可使 rem 作为基本单位来实现，这样实现的大屏页面在后期会有更好的扩展性与适应性，这方工具都可随意转换单位的，大了解就好。
2. 切图
对于切图这需要注意的是要区分界面功，哪些是可直接给参数代码实现的、哪些效果是需要给切图的。我一般会把它区分为有数据效果图表 基于组件库拓展、无数据 ae 做效输 json。一般开发代码写的样式或效，都需要设计师切图作支持：如数据容器的边框、小的效、页面整体大背景、分图标等纯视觉展示的。牵扯到数据界面的就需要开发区自己代码实现了。
总之就是在实现过程中沟通重要，随跟开发沟通进度及效果，做计前也需要去考虑开发实现的，一些不确定能不能实现的效果，一定要在做之前跟开发沟通解决方法。
推荐一款 ae 神器 Bodymovin，把 AE 好的动画导出 json 文件，直接给到发，可以帮提高实动效效率，同时提高动效质，网好多视频教程这块就不再一一阐述了。
bodymovie 插件下载址：https://github.com/bigxixi/bodymovin_cn 。
bodymovin 需要个安装器才能安装，推荐 zxp 安装器下载地址：https://zxpinstaller.com/
下是官支持 ae 效说明：
- 插件支持预合成，形状次，固态，图，空对象以及文字样式。
- 支持遮罩和反遮罩。也许模也会支持，是导致性能造成巨大影响。
- 支持时间重映射。
- 支持形状双层的形状，矩形，椭圆和三角形。
- 目只支持滑块效果。
- 支持部分表达式。更介绍以查看里（英文）
- 不支持：图像序列，视频和音频（也许未来会支持）。
- 要扩展轴向！知为何，扩展轴向会破坏导的数据，要做这个操作。
Bodymovin 工具在 AE 有些预设效和透视功能是不支持，可以把动画渲染成视频，把格转换为 ogg 或者 webm 网页视频格，网页视频格加载是常快，后把文件开发可以了。
注意 Bodymovin导 json 给开发的件中需要有整视频参考，开发可通过整视频查看位置和效果，同时如果现 json 导错误的情况，开发可查看，遇到一样的地方可询问设计师。开发成后需要走查，看是否与你预期一致。
本大概讲了 web、U3d、Ue4、ventuz 等一些可视的实现工具，及地图的一些实现方法，于数据可视大都是摸着石头过河，上是我在工作中了解的一些跟开发对接实现的经验分享给大，大多沟通交流。
欢迎关注作者公众号：「可视化计」
浙公网安备33011002017549号