canvas教程

让地图讲故事的秘密:数据可视化

字号+ 作者:H5之家 来源:H5之家 2017-02-18 10:03 我要评论( )

谈到大数据就免不了谈一下数据可视化,因为大数据挖掘、分析,最终都是要将信息呈现给客户。百度地图的数据体量很大,地图开放平台也有很多大数据分析的相关产品

让地图讲故事的秘密:数据可视化

谈到大数据就免不了谈一下数据可视化,因为大数据挖掘、分析,最终都是要将信息呈现给客户。百度地图的数据体量很大,地图开放平台也有很多大数据分析的相关产品,如百度慧眼、交通云等,都需要对数据进行可视化。

目前互联网中有很多数据可视化工具,在技术上,百度地图开放平台的可视化效果都是基于web端来实现的,很多图表的展示我们也会使用市面上的echarts、icharts、highcharts、d3.js等,还有自主研发的在百度地图上展示地理数据的可视化开源库Mapv等。

由于地图产品每时每刻都产生海量的地理空间数据,为相关的可视化技术带来了新的机遇和挑战,接下来主要聊聊地理信息的可视化数据展示部分。

一、百度地图api及个性化地图

百度地图本身就是个很典型的可视化产品。地图开放平台的地图javasript api,就可以给开发者提供地图方面的数据展示能力。

百度地图

除了标准的地图样式外,还可对地图进行个性化的底图配置展示。根据需要选择正确的主题,可以让你的数据更加闪耀。如有时只需要展示城市级别大致的轮廓背景,就可以把无用的小道路,poi给去掉。当需要显示街道级别的数据时,就要保留尽量完整详细的地图数据。还有黑色风格用于大屏dashboard等的展示,会看着更加有科技感。

个性化地图

大家都知道地理空间矢量数据包括三种基本类型:点,线和面。

二、点数据的可视化:

点数据是地理数据中最常见的一种数据,如poi数据,下图所示就是西单附近的银行,直接根据点的坐标标识在地图上。

西单附近的银行点数据

点数据也可以通过点的颜色、大小来区分它的其他属性,或者是除了单纯点的其他图标。如我们地图上的不同的poi图标,下图是用不同的颜色来展示不同类型的poi数据点。

poi数据点

还有如下三维柱状图是百度慧眼团队春节期间出国分析的一个报告,展示是去国外的热门国家分布情况。通过柱状不同的长度和颜色来表示不同国家的数量。

去国外的热门国家分布情况

使用单纯的圆点在地图上展示数据是最直观反应数据在地图上的真实信息,能看出更多的细节。但是当数据量较大的时候,点数据之间会产生相互重叠的情况,这样就会影响对数据的观察。可以通过空间算法减少叠加的数据,或者是进行一些统计归类展示,尽量在有限的地图空间上反应出更多有用的信息。

如下图就是通过点聚合来展示西单周边的银行分布,将距离接近的点都聚合到一个点来。

西单周边的银行分布

还有就是将地图区域规则的按网格来进行划分,如下图按蜂窝状网格来划分,在每个网格中统计相关信息,用不同颜色来展示每个网格数量的大小。

蜂窝状网格来划分

3d柱状图也可以用来展示每种网格区域所包含的数量大小,如下图就是某个时间百度地图用户的网格聚合效果展示。

d柱状图

除了单纯的按网格来归类展示数据外,还有一种热力图展示的形式,如下也是刚才西单周边的银行数据用热力图的形式展示的效果。可以通过不同颜色来看出整体的分布情况,和网格区块划分展示相比,热力图可以提供更多一点的分布信息。

西单银行热力图

还有一种情况就是单纯的想看海量的poi点的数据,不要求看出具体的数据细节,能反应出大体的分布趋势。海量的数据除了要解决视觉复杂度问题外,对我们的计算能力也是非常大的挑战,还需要对数据做适当的处理和聚合。如下图就是我们百度地图某一时候的用户定位情况,颜色越白的地方代表用户使用定位越频繁。

海量的poi点的数据

标签云也是很常见的一种数据可视化形式,我们这里举例标签云与地图的结合,一些与位置点相关的文本信息也可在地图上展示出来,同时可通过不同大小和颜色来反应对应的属性。这里主要还是要做好标注的避让,防止标注叠在一起,就看不清文字了。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript+html5 canvasСЧ

    JavaScript+html5 canvasСЧ

    2017-02-15 10:00

  • html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像...

    html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设

    2017-02-14 18:00

  • Canvas使用技巧 相关文章

    Canvas使用技巧 相关文章

    2017-02-14 08:00

  • canvas技术整理

    canvas技术整理

    2017-02-13 11:05

网友点评
a