介绍
在数据可视化大屏这块领域我们经常可以看到以行政区域为主体的场景,本文将介绍这类场景是如何从数据到美术是怎么搭建的,并简易介绍交互的脚本如何实现。
如果你是对建模和GL方面有一定基础的UI设计人员,那么本文的操作将会非常简单,几乎不需要写代码。本文的方法适用于那些想要快速出效果的场景,而不需要花费大量时间和精力。

使用工具
L7Editor: 编辑GeoJSON数据
illustrator:用于拆分GeoJSON到模型的中间状态数据
C4D R20: 用于简单的建模
UE 4.26:用于给模型做材质和交互效果
操作步骤
获取数据
- 我们可以通过网上免费的GeoJSON编辑工具(本文使用antv)获取并调整GeoJSON,通常情况下GeoJSON数据层级知道区县一级,再往下的镇街村居则需要从其他渠道获取或自行绘制。


- 把坐标系切换为国际通用都WGS84坐标,下载数据文件,使用线上的GeoJSON-to-svg工具 做转换,就可以得到svg矢量格式的文件。

获取模型
-
从svg中得到的是行政区域的轮廓线,从轮廓线就可以建模获取立体的区块或者边界线模型,因此我们需要的仅仅是整体区域和子区域的边界轮廓线polyline就可以了。
-
将上面都两个polyline对准画布中心并分别保存,这里需要注意所有元素不做组合,也不加任何样式(填充、描边),否则到了建模阶段会直接变成带宽度的路径,调整非常麻烦。直接将文件储存为illustrator 8格式即可。
-
打开C4D,把步骤2的文件拖入,即可得到南沙区域多边形的路径线,检查所有路径线是否都勾选了闭合样条。路径必须是闭合的,才能保证生成期望的模型
-
通过挤压和扫描操作,可以生成对应的区域块和边界线,也可以生成边界面等基础模型。下图是南沙整体区域的模型,子区域的同理。
-
将当前可编辑的工程文件保存一个备份,然后把现有所有的模型转为静态网格体(快捷键C),这就是UE最终使用的元素。
美术制作
基本操作
-
打开UE新建关卡,初始最基本的几个组件:天光、定向光源、天空球、后期处理体积(用于调整真个画面的氛围)、指数级高度雾(远处的物体模糊化)。
-
使用dataSmith相关插件直接将C4D文件导入到UE关卡中,安装后需要重启,把模型导入UE资产面板后模型会自动添加到主场景,将根目录位置调整为0,0,0便于后续定位和操作。
-
给模型贴材质,在建模渲染领域"三分靠模型,七分贴图",可想而知材质有多重要,单拎出来讲估计需要大量篇幅。在本文例子里我们只需要调整几个基础材质属性就可以了。
属性 | 名称 | 作用 |
---|---|---|
基础颜色 | Base Color | 可以是单一颜色也可以带纹理 |
高光度 | Specular | 调整材质表面反射光线的能力 |
金属感 | Metallic | 控制表面在多大程度上"像金属" |
透明度 | Opacity | 物体可见程度 |
法线 | Normal | 轻度控制材质表面的凹凸质感 |
自发光 | Emissive | 物体作为光影的发亮程度 |
粗糙度 | Roughness | 材质表面的粗糙或平滑程度 |
如图所示在资产面板新建材质,最初的节点就包含了刚刚提到的基础属性,我们可以通过右键单个属性将属性提升为可配置参数,或者通过一些中间计算过程创造材质效果。比如下图的例子是将基础颜色和贴图合并
材质的蓝图
基础颜色+纹理贴图组成了最终材质
在材质实例中可以直接修改参数组调整材质
关键操作
在最终的截图中看到的动画效果,大部分是靠调整材质贴图的位移,这里讲几个关键效果是如何实现的。
-
比如场景中循环放射放大的蜂窝纹理圆环。它的贴图其实是一条能够循环从左到右移动的光带,而模型是一个放射状的由扇形组合的圆形平面,贴上材质后每个平面都会同时执行贴图的位移,视觉上看就是自动扩散的圆环效果了。
-
行政区域的地形图是如何贴到模型顶部面的,这个原理也很简单。将行政区域在地图上对应的卫星地图裁剪出来为贴图Tex1,然后再在模型上面单独做一个没有厚度且外轮廓与模型一致的平面Plane1,把Tex1作为基础颜色贴到Plane1上面并调整UV缩放尺寸和位置偏移,直到Tex1与Plane1的外轮廓对上即可。另外如果要做出地形的凹凸质感,则需要依法炮制添加法线属性,法线图可以通过DEM高程图获得,DEM图通常是一张黑白灰图片。
交互脚本
-
控制整个场景画面的视角,这里创建了一个基于Pawn的蓝图类,作用就是实现通过鼠标左右键和滚轮动作,调节弹簧臂和摄像机之间位置和旋转关系。
-
主场景元素对鼠标事件的反馈
对于具有同类外观和交互行为的对象,我们可以通过蓝图类实现其外观和交互,这样做的好处是只需要编写一次逻辑就行了,大程度实现代码复用(虽然在整个过程中不会真的编写代码)。
鼠标悬浮时向上浮动、离开时返回原位置
最终实现效果
总结
至此整个流程就结束了,本文蜻蜓点水地介绍了可视化大屏开发其中的一个细分类,从数据到场景是如何搭建的,这里面其实涉及到非常多的细节需要在实践中才能体会。有兴趣可以看看文末的免费教程。
事实上这套思路也可以运用到WebGL的开发中,只不过three.js和UE之间差了一个好用的低代码编辑器,这是我之前的想法,直到发现了这款3D编辑器nunuStudio,忽然发现WebGL的开发做到接近客户端OpenGL开发的80%应该还是有希望的。