海量大数据地图可视化

在浏览器中基于地图构建应用已经是很广泛的业务需求，随着大数据在地图可视化中的出现，我们遇到了不小的挑战。用户会拿出十万甚至百万数量级的数据，正如您所想象的，在显示此数量的地理编码信息方面存在着一些技术上的难题。一个难题是确保数据以一种有意义且对最终用户可操作的方式准确地呈现；另一个是因为信息的数量使得它在浏览器上产生了巨大负载，需要花长时间才可以看到的结果。

为了寻找最佳解决方案，我们测试了各种开源地图渲染组件，通过加载大数据集将它们的相对性能呈现出来。对于这些测试,，我们不使用服务器端分页和前端聚合的手段，就是为了找出最佳的组件组合。

我们准备了20万个纬度/经度点的数据集。分别使用了百度地图的BMap.PointCollection组件、Openlayers的ol.source.Vector组件，但效果不是很理想，操作画面有明显的卡顿，很明显浏览器承受力已经到了极限。我们把目光转向了同样是开源的地图组件Leaflet，近些年它在大数据展现方面可是名声大作，也感谢必应搜索，让我很快找到了关于它在大数据处理方面的技术博客。

Leaflet是用于适用于移动端交互地图的主要的开源JavaScript库。JS库的大小为38k左右，但是拥有大部分开发者需要的全部地图功能。Leaflet保持着简单、性能和实用性的设计思想，可以在所有主要的桌面和移动端平台上高效的运转。

Leaflet.CanvasLayer。Leaflet提供CanvasLayer(全屏幕画布覆盖)类，它调用定制的用户函数进行绘图，在这个函数中，我们可以使用canvas绘制自定义图形。我们使用这个方案测试了20万条的数据，渲染的时间约为1293毫秒，操作画面流畅度较以前有了很大的提升。它的原理是使用了canvas来绘制地图元素，画布的内存使用率低于 SVG， 因为它没有将每个点插入到 DOM 中。但是，该方案只支持地图元素的快速渲染，不支持在每个地图元素上设置事件处理程序，使得在交互扩展受到了很大的限制。

图：使用Leaflet.CanvasLayer渲染效果图

Leaflet与D3。为了支持在每个地图元素上设置事件处理程序，我们最后选择了Leaflet与D3结合的方案，向Leaflet的overlay图层添加SVG元素，利用D3的data方法为每条数据创建path元素，将数据转换成SVG的坐标并绘制成图形，在图形上绑定事件处理程序，最后当地图漫游时，Leaflet自动重新定位overlay框。

使用这个方案，数据在渲染上加快了一些速度，使得整体上获得更好的交互体验。事实上D3并没有绘制所有的点，它使用了D3中的输入、更新、退出模式，来动态更新地图上的点，在地图进行缩放、漫游操作后，根据地图的可视范围重新检索数据，过滤掉不能有效渲染的点，从而减少SVG中的点数，最终的结果就是，数据渲染的更快了。

图：使用Leaflet与D3渲染效果图

在做大数据地图可视化时，基于浏览器客户端进行渲染优化的手段并不多。使用聚合手段，通过缩减显示点的数量可以提高渲染效率，但遗憾的是，它在视觉上减少了实际位置和密度的感观，导致分析结果打了个不小的折扣。我们的结论是，Leaflet与D3结合的方式，不仅比其他选项更快、更灵活，而且它允许对单个数据点进行绑定和操作，真正实现地图的可视化与交互，地图元素的分布更实际，数据的分析结果也更准确。