介绍

在数据可视化大屏这块领域我们经常可以看到以行政区域为主体的场景，本文将介绍这类场景是如何从数据到美术是怎么搭建的，并简易介绍交互的脚本如何实现。

如果你是对建模和GL方面有一定基础的UI设计人员，那么本文的操作将会非常简单，几乎不需要写代码。本文的方法适用于那些想要快速出效果的场景，而不需要花费大量时间和精力。

使用工具

L7Editor：编辑GeoJSON数据

illustrator：用于拆分GeoJSON到模型的中间状态数据

C4D R20：用于简单的建模

UE 4.26：用于给模型做材质和交互效果

我们可以通过网上免费的GeoJSON编辑工具（本文使用antv）获取并调整GeoJSON，通常情况下GeoJSON数据层级知道区县一级，再往下的镇街村居则需要从其他渠道获取或自行绘制。

Untitled 1.png

Untitled 2.png

从svg中得到的是行政区域的轮廓线，从轮廓线就可以建模获取立体的区块或者边界线模型，因此我们需要的仅仅是整体区域和子区域的边界轮廓线polyline就可以了。
将上面都两个polyline对准画布中心并分别保存，这里需要注意所有元素不做组合，也不加任何样式（填充、描边），否则到了建模阶段会直接变成带宽度的路径，调整非常麻烦。直接将文件储存为illustrator 8格式即可。
打开C4D，把步骤2的文件拖入，即可得到南沙区域多边形的路径线，检查所有路径线是否都勾选了闭合样条。路径必须是闭合的，才能保证生成期望的模型
通过挤压和扫描操作，可以生成对应的区域块和边界线，也可以生成边界面等基础模型。下图是南沙整体区域的模型，子区域的同理。
将当前可编辑的工程文件保存一个备份，然后把现有所有的模型转为静态网格体（快捷键C），这就是UE最终使用的元素。

打开UE新建关卡，初始最基本的几个组件：天光、定向光源、天空球、后期处理体积（用于调整真个画面的氛围）、指数级高度雾（远处的物体模糊化）。
使用dataSmith相关插件直接将C4D文件导入到UE关卡中，安装后需要重启，把模型导入UE资产面板后模型会自动添加到主场景，将根目录位置调整为0,0,0便于后续定位和操作。
给模型贴材质，在建模渲染领域“三分靠模型，七分贴图”，可想而知材质有多重要，单拎出来讲估计需要大量篇幅。在本文例子里我们只需要调整几个基础材质属性就可以了。

如图所示在资产面板新建材质，最初的节点就包含了刚刚提到的基础属性，我们可以通过右键单个属性将属性提升为可配置参数，或者通过一些中间计算过程创造材质效果。比如下图的例子是将基础颜色和贴图合并

Untitled 9.png 材质的蓝图

Untitled 10.png 基础颜色+纹理贴图组成了最终材质

Untitled 11.png 在材质实例中可以直接修改参数组调整材质

在最终的截图中看到的动画效果，大部分是靠调整材质贴图的位移，这里讲几个关键效果是如何实现的。

比如场景中循环放射放大的蜂窝纹理圆环。它的贴图其实是一条能够循环从左到右移动的光带，而模型是一个放射状的由扇形组合的圆形平面，贴上材质后每个平面都会同时执行贴图的位移，视觉上看就是自动扩散的圆环效果了。
行政区域的地形图是如何贴到模型顶部面的，这个原理也很简单。将行政区域在地图上对应的卫星地图裁剪出来为贴图Tex1，然后再在模型上面单独做一个没有厚度且外轮廓与模型一致的平面Plane1，把Tex1作为基础颜色贴到Plane1上面并调整UV缩放尺寸和位置偏移，直到Tex1与Plane1的外轮廓对上即可。另外如果要做出地形的凹凸质感，则需要依法炮制添加法线属性，法线图可以通过DEM高程图获得，DEM图通常是一张黑白灰图片。