从0-1带你制作可视化地图(一)

第三方地图的获取和对接

普通地图一般都是去对接三方平台,如百度地图、高德地图、腾讯地图、谷歌地图等。他们都会提供对应的地图开放服务。

以高德地图为例,实操下地图的获取和调色方法以及最后跟开发交付的流程。

首先登录高德开放平台,点击右上角控制台

进入控制台会进入下图页面(大家可以多点点查看下平台的相关功能内容,比如点击数据可视化里面会有集成的地图可视化效果,这里就不做过多说明了)

数据可视化里面后有一些集成的模板化的效果,大家可以点点看看
回到主题点击自定义地图就可以对地图进行自定义配置了,如下图:
页面上会有好多配置好的模板供你选择,也可以选择自己自定义配置,根据需要选择一个点击进去,就进入地图配置页面。
上图中左侧为地图的可配置项目,点击选择可根据自己的需求对地图进行配置,包括颜色字体界线等等都可以配置。每个配置项下面都会有很多配置子项,非常详细,当然里面会有些收费的配置项需要付费后使用,这块大家可以多点点,根据自己需求来做调整。

如果想要获取3d建筑的样式把右下角层级超过17后,会显示建筑,可根据需求调整角度和位置。

最后将调整好的样式,直接放大全屏后截屏后就可以在设计稿里使用了。
关于开发样式的对接
将配置好的文件点击右上角的发布,直接继续点击发布
发布成功后会出现如下的弹框,里面会有一些调用和使用地图的方法。
根据使用需求可选择不同平台的使用方式,直接复制链接丢给开发就好了。

3D地图建模及贴图的制作获取方法

首先看下网上找的两张参考图的效果

(图片源自网络,如侵权删)

(图片源自关启元,如侵权删)

先说下3d地图的获取和建模的流程

首先大家可以在网上下载地图的边界轮廓文件,这里推荐网站-阿里云Data V 的一款地图选择器(文末有链接)这里可以下载对应的各个省份 城市的边界地图轮廓模型的svg文件,点击左下角进行下载
以山东省为例将下载好的svg文件导入ai里转换成ai格式,这里要注意的是另存的时候一定要选择比较早的版本,建议存为Illustrator 8图中箭头所指的那个版本,要不然c4d会是识别不出来。

将转换好的ai文件导入c4d,执行挤压。山东省的3d模型就建好了。

模型建好之后需要将模型进行展UV处理(展uv:将一个3D立体的模型拆开,展开成一个平面2D图片。作用:使模型的贴图效果更真实。)这里用到展uv的插件(FDUVToolkit 1.0)后台回复 uv插件可获取插件。下图是在c4d中展完uv的样图,截图保存下做备用(为后面的贴图位置做参考,后面的贴图需要和展uv的这个图一一对应上)。
将处理好的模型导出obj备用(后面给开发和在ae中处理效果都会用到这个格式)
说下漫射贴图制作的思路:
首先在Google Eaet‍h Pro 上面找个省份对应的位置然后执行文件-保存就能保存当前展示得地图纹理了(建议保存两张贴图,一张带边界和地名的方面后面制作贴图的时候方便对上位置,第二张就是无边界地名的作为最终的漫射贴图)。

将c4d展完uv的截图、还有制作模型下载的地图边界路径、和刚才的截图一一拖入ai里面 ,新建一个4k(这里根据需求建就行)的画布,将展uv的截图缩放到画布大小,如下图,然后根据边界轮廓都对应好 执行剪切蒙版,最终会得到下面的图的效果。(切记贴图的位置一定要和上面uv截图的位置一致,要不然贴上会是乱的)

高度贴图的思路(用到软件QGIS)
首先去地理空间数据云上下载素材:
高级检索-数据集(一般选择30m高程数据或者90m高程数据)具体看文件的数量,然后选择对应的行政区位置。
将下载好的数据解压后倒入QGIS软件;倒入的图片稍微有些明显的拼接的缝隙 将图片位移处理后导出备用。
最后处理完的贴图如下:(切记贴图的位置一定要和上面uv截图的位置一致,要不然贴上会是乱的)
法线贴图的获取和处理思路
首先将处理好的高度贴图导入到ps中 执行-滤镜-3D-生成法线图
直接点击确定,法线图就做好了,直接导出就可以了,最终效果如下:
这样整个3d地图所需要的贴图就都做好了 。
下面是处理效果,因篇幅原因本期暂时不分享了,大家可以看下我上一篇文章的思路,点击查看
《实操!医疗科技人物实现教程》
思路其实都是一样的 把模型导入ae将做好的贴图都贴在对应位置 运用E3d插件做效果。

关于开发对接

一般这种效果都会有好多种实现方法,threeJS,webgl,U3D,Ue4,Ventuz等等,如何对接开发给开发提供那些东西,这都取决于开发使用的工具和实现的方式,这里建议做之前充分跟开发沟通想要的效果,可以让他们做个调研方案,这样会事半功倍,免得做一些无用功,出现设计和开发相互甩锅来回扯皮的情况。
不管是基于什么实现大致的实现思路都是差不多的,基本都是会需要设计师提供地图模型、UV贴图、烘焙贴图、材质参数等等。
这些东西对接其实跟咱们自己建模贴图然后在处理材质灯光(有些不支持灯光渲染,就需要把灯光的效果烘焙到贴图上直接给贴图)这些参数是一个原理,把基础模型和对应的参数和贴图,给到开发就可以了。
总结
本期分享了第三方地图的获取和使用对接方法和3d地图贴图的制作和对接的思路。下期预告,三维城市模型的获取制作的方法,敬请期待。好了,今天的分享就到此结束了。希望今天的教程让你有所收获~

想要了解更多干货可点击关注

《纯干货,可视化实战教程

最后分享可视化福利资源,获取方法看下图。

将文章转发朋友圈截图发给小编限时领取

(0)

相关推荐