【雷火UX数据分析】当我们谈论地图数据可视化时我们在谈论什么

原创雷火UX数据分析网易雷火UX用户体验中心

认知科学的研究表明图文并茂能帮助人们更快地理解知识和进行更长期的记忆。在大数据的时代我们也已经达成共识：数据可视化能协助我们洞察数据里的意义。地图数据可视化能以最直观的形式表达出数据之间的空间关系，具有任何其他方法不具备的能力。那么地图数据可视化是什么？它有哪些应用场景？在Web上有哪些实现方案？这篇文章接下来会一一讲述，文章的最后也会介绍一些用于地图可视化的工具。

地图可视化是什么以及它的应用场景

地图数据可视化没有非常官方的定义，可以将其总结为：地图数据可视化是将具有地域特征的数据或者分析结果形象地表现在地理信息图上的一种数据可视化方式，它使得用户可以更加容易理解数据规律。文字的定义并不直观，下面的应用场景举例将使定义更容易理解。

从我们身边说起，通过地图软件（网页）查询景点、路线是一种地图可视化，它将地点、路径、路况等信息形象地标注在真实的地理信息上。

从更高的角度看，统计一段时间范围内世界各地的地震情况，下图将地震点标于世界地图上，可以直观看出地震带。

在商业活动中，地图可视化经常出现在各类报告里，用于清晰地表示数据在地理空间的分布情况。

除了真实的世界、国家等地理信息，其他的与空间位置有关的数据可视化也都可以称为地图数据可视化。例如在游戏地图上做数据可视化，展示出生点人数分布、人物活动轨迹等等。

通过上述的举例，可以总结出地图可视化的规律：

地图可视化以地理信息作为底图，在上层使用点、线、面的形式表示数据。

地图可视化通常用来表示数据在地理空间上的分布和流动情况。

web上地图数据可视化的相关技术

既然地图是以地理信息作为底图然后在上层加入点、线、面的数据展示，那么技术方案的讨论也都可以分成两个步骤：地理信息底图绘制、数据层可视化。数据层的可视化与其他的数据可视化方法基本一样，使用canvas、svg或者他们的上层技术，只是需要选择各种各样的投影函数将位置映射到底图上。因此本文会侧重于地理信息底图的可视化技术。

很多系统里地理信息底图并非真实渲染了一个地图，而是仅仅贴上了一张图片。上层的数据则通过绝对或相对的定位展示，这是一种视觉欺骗，但它行之有效还能节约资源。

可以看到前面提到的报表地图里的底图由一系列多边形构成，这是一种简单的底图渲染方式。Web应用里Canvas和SVG都能进行多边形（包括弧形边）的渲染。

下面是一张飞机座位图的可视化，底图就是通过SVG的图形元素得到，数据层则是对图形元素进行了颜色填充。

中国省份地图、世界国家地图这样的我们熟知的地图多边形描述有一种统一的格式：GeoJSON（GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式），后面也衍生出了TopoJSON等数据格式。GeoJSON中的坐标点由经纬度构成，所以数据层的每条数据也应含有经度、维度和数值。一些成熟的可视化库看上去不需要用户提供经纬度，其实是在内部完成了计算。例如下面的来自Echarts官网的示例里，传入地区的名字就可以完成数据层的绘制。

类似前面一节的地震分布图里，地图含有地形信息（需要渲染出不同的高度），或者如下图所示的需要展示球体，则需要使用WebGL技术（WebGL是一个JavaScript API，与 OpenGL ES 2.0有非常一致的API，用于Web 3D绘制）进行绘制。像Threejs等成熟的3D 绘图库都是基于WebGL的上层封装，实际使用时选择这些成熟的底层库可以提高开发效率。

而文章一开始举的地图导航的例子使用了高精度的底图，是完全不同的绘图技术。它们或许使用矢量地图的方案，或者使用瓦片地图（瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变）。当视窗内的地图以一块一块的矩形分批加载出来时，它使用的就是瓦片地图的技术方案。这类地图的精度远远高于多边形地图，基本都可以精确到楼栋、店铺，在缩放交互中天然优于多边形地图，所以被用于高精度需求的地图数据可视化。数据层方面也使用经纬度标识数据位置。现在的地图服务提供方例如Mapbox、高德地图、天地图等都提供了SDK for JavaScript，成熟的图表库里也封装了这些SDK的调用，使用起来还是比较方便的。网上也能找到离线的瓦片数据，用于给开发者构建离线地图服务。不过这类底图开发难度比多边形地图高，调用次数和商业准入都有不同的规定。

地图数据可视化工具

Excel

Excel提供了地图的绘制功能，需要引入Microsoft Power Map for Excel。这适合熟悉Excel的人用来进行静态的地图数据可视化，不同的Excel版本的使用方式不完全一样。