B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

编辑导语:GIS地图是一种新型的地图,用来反映和分析数据,直观地表达数据间的空间关系。那么,如何制作数据可视化地图呢?本文作者对此作出了分析,一起来看一下吧。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

地理信息系统(英语:Geographic Information System,缩写:GIS)是以可视化和分析地理配置信息为目的,用于描述和表征地球及其他地理现象的一种系统。

B端设计师会在数据可视化大屏设计中或多或少有所接触,GIS地图是一种新型的地图,其所呈现的内容远非静态地图所能及。

在一些新闻报道中,也经常看到使用地图来分析显示各类数据信息,这样使用地图来反映和分析数据的形式就是GIS地图实际应用。由于GIS地图能够最直观地表达数据间的空间关系,所以它被广泛应用于各种数据分析场景。

GIS是数据可视化的高频应用之一,去网上搜索以下“数据可视化大屏”,基本上是以GIS地图作为大屏的主视图来呈现的。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

为什么数据可视化大屏展示总是以GIS地图作为主视图?

可视化大屏多用于外部展示或给领导汇报情况。在大屏的中央放置地图,讲解者在介绍整体数据情况时可以从这里说明。整个交流过程有获得重要决策信息的感觉,而且不论是政务事务,还是市场化的商业活动都在一定的空间范围内进行,需要报告的重要数据基本上与地区直接相关,整体信息的获取也非常方便。因此,地图是数据可视化设计中必不可少的一个元素。

随着数据可视化技术的发展,企业需要把数据和地理联系起来,数据地图应运而生,在准确传达数据的基础上使界面更加直观,更具有观赏性。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

01 数据地图有哪些要求?

地理数据可视化是可视化决策系统中的关键,往往将地图要素、业务管理、物联网感知、视频监控等多种数据集成,并且进行高度融合和挖掘分析,构建智能化管理相关应用,帮助用户对现实地理空间中的各种监测对象作出快速、准确的判断,为城市规划、建设、管理和决策提供可视化支持。

正因GIS地理信息数据的重要基础支撑作用,具体到可视化决策系统中,地理信息可视化必须满足以下几个要求:

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

1. 功能强大

数据地图的重要功能是加载显示各个地域的数据信息,并进行融合分析,因此必须具有超强的功能性,才能承载大型城市的运行态势。数据地图可载入高精度地形资料、三维建筑物资料、BIM资料、城市倾斜摄影资料、感应器资料、车辆、人员、摄像机、基础设施、事件资料等要素资料,全面、详尽地再现各类数据在地理空间上的运行态势。

2. 数据精确

随着GIS地理空间技术的不断提高,对于地理空间数据的精确度要求也越来越高。数据地图上的地理要素数据显示必须具备高度的准确性,精准定位并且真实反应各个地理要素的空间位置信息和状态,为用户决策研判提供全面、准确的事实依据支持。逐步实现地理信息管理空间的细化、管理对象的精确、数据指标的精准,保障各类决策、管理能够真实有效的推进。

3. 效果震撼

对需要加载到数据地图中进行显示的,汇集出来的城市各个领域的要素数据,不应该是简单的信息堆砌,而是要有良好的视觉、风格设计。高水准的视觉效果,可以为管理者提高决策的判断力,提高工作效率。

02 如何去选择数据地图?

首先,你需要确定你所要显示的数据是否与地理位置或地理信息相关。然后,确定你所要展示的地域范围。我举个例子,拿一个面向国内业务的销售公司来说,他们更关注的是全国、各个销售大区以及各省的销售数据,你就可以使用2D或3D中国地图来显示您的销售数据。

或者你的销售范围只有某个城市,你更新了解某一家店的具体销售情况,周边的竞争对手等更准确的数据,GIS地图和数据指标都可以满足需求。

最后要思考的是,如何在大屏上将地图与其他元素进行整合,确定最终的地图展现形式。这个步骤是数据可视化大屏视觉的一个重要步骤,大屏中各个元素的协调统一,决定了最终的大屏展示效果。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

面对不同的业务场景,数据地图可以怎么玩?

与普通的图表相比,数据地图的呈现效果更好,更美观震撼。

数据地图能够做出2D、3D多种矢量、边界、瓦片地图,支持交互、漫游,如点击下钻到区县;支持增加多层数据,每一层数据可以设置不同的显示效果,如基础的飞线层、气泡层、散点层、热力层、柱状层、风场图、提示框、标牌、环境光层、直射光层等。

借助第三方数据可视化工具,如阿里云 DataV-数据可视化平台、腾讯云图数据可视化展示平台、百度智能云数据可视化Sugar BI、袋鼠云EasyV数据可视化,可以通过快速选择添加地图组件、配置数据和显示效果。

利用矢量图、提示框、标志、散点层等组件,形象地展示企业的国内经营情况。通过直观的可视化语言,集中展示大数据平台的建设成果。通过专业的故事策划,突出企业的经营状况和未来发展,为媒体宣传、企业接待等场景提供宣传资料。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

构建了以GIS地图为核心,以数据指标为辅助的数据大屏,通过交互下钻的方式,可以对特定区域进行监控和实时监控,对景区各种智能系统进行监控调度,并接入IOT设备,实现自动触发、主动报警、联动指挥监控、广播、巡检等工作,实现管理工作有记录、可追溯。整个数据地图集成了监控、控制、维护和管理功能,实现了所有系统的联动指挥调度和大数据分析决策。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

03 数据地图如何制作

1. 第三方地图百度地图的获取和对接

数据地图一般都是去对接三方平台,如百度地图、高德地图、腾讯地图等。他们都会提供对应的地图开放服务。下面以百度地图为例,介绍下地图的获取和调色方法以及最后跟开发交付的流程。

百度地图整合智能定位、路线规划、导航、路况、地图影像服务、轨迹服务、人口迁徙服务、位置搜索服务、智能小程序等,百度地图提供城市研究、商圈分析、人群热力分布、人群洞察、目标人群识别、地块价值分析等多维服务,赋能政府、规划等多个行业。

1)首先登录百度开放平台(https://lbsyun.baidu.com/index.phptitle=首页),点击功能与服务-地图。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

2)进入地图页面之后,下拉找到个性化地图,点击按钮查看详情。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

3)进入个性化地图编辑平台,开始使用。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

4)个性化地图里面有一些预置的地图模版,大家可以点击查看了解一下。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

5)回到主题点击一个预设地图就可以对地图进行自定义配置了,如图:

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

6)图中左侧为地图的可配置项目,点击选择可根据自己的需求对地图进行配置,包括颜色字体界线等等都可以配置。每个配置项下面都会有很多配置子项,非常详细,这块大家可以多点点,根据自己需求来做调整。同样高德地图的地图样式获取与上面百度地图差不多,可以自行尝试下。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

7)将配置好的文件点击右上角的发布,会有弹窗,里面会有调用和使用地图的方法。直接复制链接丢给开发就好了。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

2. 3D地图的制作

除了上述第三方地图制作,地图还有其它方法制作,本次主要介绍地图自主制作的方法。可通过三维软件制作如3dmax、C4D、Maya等等,本次选择一个比较简单的方法用到的一款PS插件是:3D Map Generator。

3D Map Generator 是一个三维立体地图自动生成 Photoshop模板,也就是三维地图生成ps插件。3D Map Generator插件可以快速制作3D地形图,格式可储存zxp,atn和psd等等。

3D Map Generator-Terrain ,官方全称:3D Map Generator-Terrain From Heightmap, 适用于PS的3D高程地图地形生成插件。

3D Map Generator 作为第一款适用于Photoshop的高度地形生成插件,你不需要是 PS 或者 GIS 的高手,就可以轻松的生成真实地点的三维地形,并且可以编辑生成的各种地形要素(比如:山、水等),形成你想要的风格。它的主要功能就是,基于准确的地理信息生成三维地形,而且地形要素可编辑。还提供各种纹理贴图和笔刷,方便3D地图的制作。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

3D Map Generator 示例:

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

简单来说,该插件可以将 google 地图的照片效果和 heightmapper 高程地图的高度灰度图(高度灰度图是用于存储数值,例如高程数据的光栅图像,可用于在计算机图形中做3D显示。高度图包含一个通道,解释为距离表面的“地坪”的位移或“高度”的距离,并且可表现为灰度图像的亮度,黑色表示最小高度,白色表示最大高度)数据,通过PS整合为一,形成类似3D可视化效果。

理论上来说,只要能有相应的高度灰度图(高程栅格图),就可以生成全球任一地方的3D地形。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

3D Map Generator 的使用方法案例:打开3D MapGenerator-Terrain,选择Find Real Location。插件会自动打开它自带的heightmapper网站,这里就是插件中附带的强大的实际的高程信息数据库,是地形生成准确性的重要保障。

进入Heightmapper之后,可以选择连接Googlemaps 或者 OpenStreetMap。这次的教程中选择Googlemaps作为讲解,感兴趣的小伙伴也可以试试使用OpenStreetMap,操作方法类似。

1)点击Googlemaps,进入界面,选择所要制作地形的位置,我们以台北市为例,并滑动鼠标找到想要分析的片区。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

2)在右上角任务栏里,去掉地图线/map lines和地图标签/map labels这两个选项,同样选择出口/export保存图片。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

3)打开浏览器,选择Googlemap或者百度地图等地图找到相同位置。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

4)将保存好的三张图片导入ps,根据标签、地形等将卫星图和地形图对齐,裁掉多余部分。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

5)点击创建3d地形(可根据需要选择适合角度),等待几分钟后便可得到一张地形图。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

6)这时我们打开图层top_layer_groups中top_layer_hd的第一个图层双击进行编辑。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

7)打开我们有三个地图的第一个界面选择Googlemap的图层复制到top_layer_01.psd。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

8)Ctrl s 保存后打开地形图界面我们就可以看到地形已经出现在了模型上。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

9)我们可以再复制图层后加入描边,添加各种小标志,除了指北针比例尺之外,还有云、树木、船等,可以进一步增强图面信息。只需要短短几分钟,结合卫星地图和地形就可以做出不同风格的地形分析图。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

04 结语

以上与大家分享了数据可视化地图的一些制作方法。

关于数据可视化地图,一个出色的数据地图,必然是GIS与BI的完美结合。整个数据地图具有多层次的图形显示功能,并具有多方面的控制功能,配合一些个性化的交互功能,能够更好的满足业务使用、数据管理、开发运营等不同应用场景的图形查询和辅助分析需求。

地图具有重要的作用,每个人都可以从高质量的地图中方便地获取信息。

GIS 用户每天都会创建和使用地图, 这些地图为 GIS 应用提供了基本体验和实用界面。地图也是 GIS 用户与组织内部其他人员以及其他组织的用户共享工作的主要方式。地图提供了重要的上下文,因为它们既可以进行分析,又充满艺术效果。地图老少皆宜,提供世界范围的信息和形状。

所有人都可以使用 GIS 地图。这些地图使 GIS 进入到了我们的生活,并可随时随地通过智能手机和平板电脑进行查看。

05 地图平台推荐

用过百度、高德、腾讯地图平台的应该都知道平台内地图的参数调整都有一定局限性,只能通过他们提供的选项进行调整,有的地不可配置就很难受。今天给大家整理了下国外的一些地图平台,有的配置项会多一些相对可控,缺点就是国内楼宇数据没有国内地图的全,大家需要的自取。

1)Mapbox https://www.mapbox.com/maps

基于矢量渲染与webgl技术,交互、可定制的前端框架。里面有好多的地图样式,可控性较高,缺点就是国内街景视图楼宇的数据较少。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

2)Snazzy Maps https://snazzymaps.com/

Snazzy Maps主要面向网页设计师以及开发人员,网站上现有近130种不同地图主题,每种主题下还有多种细分风格可选,地图样式比较丰富,配置项也挺多。设计人员可以根据应用或网站整体风格自行挑选适配方案。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

3)Mapv https://mapv.baidu.com/

Mapv 是基于百度地图的大数据可视化开源库,可以用来展示大量的点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据。

B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)B端设计师必看,数据可视化地图制作指南(地图信息可视化设计)

本文由 @Color可乐 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年9月22日 上午8:09
下一篇 2022年9月22日 上午8:11

相关推荐