数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

大家好,我是灰色执照。

先说重点,一款可以自动绘制三维地图的网页工具开发好了。你可以调整颜色、修改地图的厚度和角度、更换字体的样式。弄成你喜欢的样子后,就可以下载透明背景的 PNG 地图图片了!

我简单的介绍一下工具的部分功能:

1. 可以生成各个角度的透明背景图片

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

拖拽鼠标,地图可以调整不同的角度。滑动滚轮,地图可以放大缩小

2. 可以录制成你视频,拖入 AE,在周边加上图表,就变成可以演示的效果了。

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

3. 可以调整地图的高度。

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

4. 可以调整字体的大小,甚至可以让字体旋转过来

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

5. 可以调整地图和地图边界线的颜色、透明度。

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

6. 给地图每个板块输入相应的数值,地图还会以“柱状图”的形式显示。

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

在左侧可以设置每个地区的数值,比如每个省的 GDP 不同。

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

应用后,地图就像柱状图一样,根据数值生成不同的高度。

如果你是数据可视化设计师,你可以只设计界面的四周,然后把设计稿上传为背景,这样你就可以免去设计你的主视觉了:

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

NB Map 的功能其实还有很多,由于篇幅有限,我这里就不一一介绍了,大家自己去体验一下吧。

工具的入口如下:https://nbcharts.com/map/map.php

我还特意录制了一个功能很全的高清视频教程,已经放到 B 站了。

.video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } } 当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

几年前,我的工作从 UI 设计师转变成了设计数据可视化方向。工作中,我需要在界面的正中央绘制一个立体感觉的武汉市地图。那是我第一次接触数据可视化,没有任何经验。我清晰的记得我用了整整一个下午,使用 PS 的钢笔工具勾画地图的每个边界。那一个下午,我累得眼睛都疼了。当时我的心里只有一个想法:类似的工作应该交给工具来批量完成!

多年以后,我虽然学会了编程,但是我的工作并不涉及三维方面的内容。所以也就没有太把这件事情放在心上。直到今年过年期间,趁着国庆 7 天假期,自学了一下三维方面的一些编程知识(甚至还研究起了 C4D)

通过 1 个月时间的努力,一款自动绘制三维地图的工具开发好了。代码部分的内容其实不多。更多的是整理 400 多个省市区的数据。处理这些数据非常的繁杂,很多时候都想过放弃,但是想起我曾经用钢笔勾画的那个下午,咬咬牙又坚持了下来。“我一个人累一下,却可以方便无数个人。这波绝对稳赚不亏!”

开发这款工具主要是想帮助那些真正有需要的人。有可能他们从事和设计无关的工作,没有接触过 PS、C4D、Blender,他们只是想在 PPT 里面加入一个地图来示意一下,也可能他们是平面设计师,想在海报里面加入一个地图;还可能一个初入行的 UI 设计师想做一个更好看一点的可视化界面…无论你是谁,都可以方便的使用这个工具来完成你的工作。

准确的说,开发这款工具更多的是想帮助几年前刚跨入可视化行业的我自己~

你们的下午由我来守护。你们去喝茶、去聊天、去享受午后的阳光,让地图绘制的工作交给我开发的工具来完成吧。工具是免费的,大家放心使用~

后续我将给这个地图增加材质功能,如果你使用 NB Map 的过程中有什么其他需求,欢迎你在微信群里向我提出。

最后,感谢微信群里为 NB Map 提供地图背景的每个设计师。

超详细!从零到一带你制作可视化地图(一)

今天分享下在做可视化中一些地图的获取方法、常见的一些效果的实现方法以及跟开发如何对接的一些经验分享给大家,欢迎大家沟通交流。

阅读文章 >

欢迎关注作者微信公众号:「灰大设计」

数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps

文章来源:

Author:灰色执照
link:https://www.uisdc.com/nb-maps