腾讯位置服务数据可视化API(Web),是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎。为用户提供基础地图、三维立体、动态轨迹模拟、人流热力分析等风格各异的展示场景和效果,使得繁杂的数据更具场景感和酷炫的视觉体验.
让数据的美,直观的呈现在你眼前! 利用视觉,让数字易于理解,这就是可视化需要解决的问题。
1)简单先说说,什么是数据可视化?
数据可视化,是将需要表达的数据库中的每个数据元素作为单个图元来表达,大量的数据集构成数据图像,同时将数据的各个属性值以多维数据的形式表现出来,提供给用户更多维度来更加直观的观察数据的属性和变化,从而对数据进行更深入的分析。例如现在很多人在使用的echarts,就是一种通过多维度更加直观的视觉来表达比较生硬的数据。例如下图,更加直观的用曲线来展示数据的变化规律。
2)腾讯位置服务可视化API
随着互联网的发展,人们往往会利用位置信息来辅助做一些出行、安全、热点推荐等方面的选择和决策信息的参考。例如,通过旅游的历史数据来推荐用户最优的路线、景点,以便优化用户的出行体验。同样,通过采集大量用户的位置信息,了解众多用户的位置分布,在公共出行方面也会有很多参考价值。例如,节假日期间的用户迁徙分布,商场或者景区的人流的人力分布,可以帮助分析到人流的实时分布情况,以便可以及时应对公共安全等问题。
由于位置服务的可视化通常是帮助用户或者决策方通过大量位置信息的变化来了解人群的位置信息变化,所以数据量会非常大,经常是百万级、千亿级的数据量需要表达给决策者。位置数据可视化就是用来将空间分布上的规律信息更加简洁直观的展示出来,同时挖掘更深层次的信息。例如下图所示,就是腾讯地图展示的全球定位次数,通过在地图上打点的方式,表达出人流的位置分布,通过疏密度和点的闪耀亮度来直观的告诉用户,某个时间人流的变化情况。
所以,你不在需要去理解一长串的数字是什么含义,需要的仅仅是,看图。
用户所需要的,就是我们旨在解决的!
近期上线的腾讯位置可视化API,是一套基于JavaScript API GL实现的专业地理空间数据可视化渲染引擎。提供用户在浏览器环境下的高效可视化渲染效果呈现。将数据库的一个一个生硬和冰冷的数据变成屏幕上生动且动感的图形影像,帮助用户更好的理解数据,进行决策。
由于可视化API是基于JavaScript API GL的地图渲染引擎基础之上实现的,所以,具备了webgl渲染引擎本身的性能特性以及渲染优势。地图上更加真实的楼块拔起、动态的数据poi名称碰撞效果都会呈现一种更加接近真实场景的体验。例如下图所示的地图绘制方式。支持选择多种个性化样式,满足不同场景下的地图需求。
那么可视化API 可以帮助你解决什么场景下的,什么问题呢?
下面,具体介绍几个新更新的可视化组件,分别适合什么场景使用,如何使用。
a) 弧线图:
弧线图用以展示两点之间的关联,可以用在迁徙图等表示流向的场景中。
例如,人流迁徙的数据展示就可以通过弧线图来表达。过年期间,想更加直观的看到城市之间的人流变化情况,弧线图是非常合适的。
b) 热力图:
用颜色来表示数据强弱和分布趋势,而不是一系列无法从视觉感知的数字。
例如,在节假日的景区,如何能避开人流错峰出行,通过观察人流的人力情况,红色的区域就代表当前人流非常密集的区域,就可以绕行了。在一些安保的场景下也是非常实用的,更好的掌握人群的实时密度情况,及时调整安保策略,以便出现公共危机。
c) 散点图:
用来展示海量独立数据点,支持多种形状的设置以及用户设置的自定义图标。目前支持百万级的数据点的展示。
例如,在需要更加直观的将用户位置直接展示在图上,通过点的密集程度来观察人员的分布,散点就是比较好的选择。散点图通常遇到的问题是,数据量非常大,那么性能就是一个很大的跳转。可视化API的散点图对性能进行了定向的优化,现在可以支持百万级的数据点展示,后续性能优化,敬请期待。
以流动的线条展示目标移动轨迹,可以查看特定时间内物体的定位变化。例如,邮政车的行驶轨迹,外卖小哥的送餐轨迹都可以用轨迹图来动态的展示和表达到地图上。
例如,在外卖的场景下,想了解外卖小哥的送餐轨迹,以及轨迹的合理性,可以通过轨迹图来直接呈现,通过轨迹线的流动性,可以帮助判断出出行人员某个时间段的行径情况。
e) 蜂窝热力图:
蜂窝热力主要是将离散的数据点以六边形区域进行聚合,根据落入区域的数据点数量渲染不同颜色的高度的六边形棱柱。例如图(七)所示,可以让一些连锁商超的商户看到各个商超所在的分布区域的人流量趋势。
例如,蜂窝热力是通过六棱柱的高度、色值来表达出位置数据的变化和密度。在一些连锁商超,不同的店铺在各自区域内的到店人数就可以通过蜂窝来呈现, 可以帮助决策者掌握每家店铺的人流情况,以便进行货物的配送调整、店铺的营销策略优化等。
说了那么多,看着显示出来的效果还是比较复杂的,那么使用这套api绘制的开发难度呢?
只给展示效果,不提供实现示例?不,我们包学包会[emoji]。
以热力图为例,如何使用api来绘制数据。
//创建热力图
var heat = new TMap.visualization.Heat({ max: 120, // 热力最强阈值 min: 0, // 热力最弱阈值 height: 100, // 峰值高度 gradientColor: { // 渐变颜色 0.25: "rgb(0,0,255)", 0.35: "rgb(0,255,0)", 0.65: "rgb(255,255,0)", 0.9: "rgb(255,0,0)", 1.0: "rgb(255,0,0)" }, radius: 30 // 最大辐射半径 }).addTo(map);
heat.setData(heatData);//设置数据 就这么简单。。。 更多的”朋友“,欢迎大家登陆https://lbs.qq.com/visualization_api/index.html 去认识认识!
3) 只是个开始。。。,未完待续
在需要行业纵深的现在,我们希望通过可视化的方式来帮助行业在web环境下提供更多的解决方案,更好的优化用户的数据体验,更好的在大屏上展示酷炫的效果和高效的性能是我们未来会持续做的事情。 后续我们会推出更多的可视化api组件,也会更加丰富现在的接口和使用方式。
欢迎使用,欢迎吐槽:lbs.qq.com/visualizati…
让数据驱动产品进步
让数据跃然图上
让可视化诠释数据的多维之美