canvas教程

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

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

三、线数据的可视化: 地理空间中的线数据是指一系列的点两两连线。如地图上的道路、河流、铁路等都可以用线数据来展示,可视化应用场景上经常用来展示驾车的路径轨迹,如下就是展示的某辆车一天的行车轨迹情况。

标签云

三、线数据的可视化:

地理空间中的线数据是指一系列的点两两连线。如地图上的道路、河流、铁路等都可以用线数据来展示,可视化应用场景上经常用来展示驾车的路径轨迹,如下就是展示的某辆车一天的行车轨迹情况。

某辆车一天的行车轨迹

描绘线数据的样式为了让它更丰富,可以使用不同的笔刷样式来描绘线路,呈现更多的样式,如下举例展示2种样式的笔刷效果。

2种样式的笔刷效果1

2种样式的笔刷效果2

在地图上展示大量的轨迹数据容易会有叠加情况,造成视觉混淆,所有还是得分场景来展示。如上面是为了查看具体的某辆车的具体行驶轨迹,所以我们需要尽可能详细的展示这辆车的行驶轨迹细节,其他与之无关的信息尽量减少。但如果要是为了查看大数据的轨迹,目的就是理解我们数据的整体模式,而不是展现每一条线段,这时我们就可以对我们的轨迹进行简化抽稀合并处理。如下图我们展示的就是南京的出租车轨迹情况,轨迹叠加的越多的地方让它的颜色更亮一点,尽管有大量的轨迹重叠和交叉,还是可以看出大致的数据分布情况的。

轨迹数据分布情况

还有单纯的两点连线数据展示,如下是慧眼团队春节国外迁徙报告中把中国来源城市和出国国家之间进行连线展示,大部分人们选择的出国国家还是主要分布在中国的周边。

春节国外迁徙报告

除了单纯的连线外,还可以对连线进行一些连线捆绑处理。如下展示的就是西二旗区域上班的人通勤的od连线捆绑效果。

连线捆绑处理

四、面数据的可视化:

面数据即由一系列的点组成的封闭空间。如展示地图上的建筑物面、行政区域边界、湖泊的面等。可视化展示方面主要是想展示面的属性,如密度数量等。最常使用到的是通过不同的颜色来表示这些属性值的大小情况。

如按省份、按城市来展示人口密度、销量等密度图。

如用echarts绘制的全国省份某产品用户分布情况:

全国省份某产品用户分布情况

还有如下展示是北京一些景区的客流热力情况:

客流热力情况

五、其他一些应用:

人口迁徙,使用的是echarts和地图的结合,用来展示人们在各城市之间的迁徙情况,关注人类活动的地理分布。

各城市之间的迁徙

各城市之间的迁徙2

景区热力图,可以用来查看各景点的热力情况,可为人们出行提供一些参考。

各景点的热力情况

室内客流分析,也是我们慧眼产品的一项能力。如下图展示的是某个商场内部的示例客流分布数据,可为商场一些规划提供决策支持。

商场内部的示例客流分布数据

六、应用到的前端技术:

在我们做的这么多数据可视化效果中,都是基于web来开发的,用到了canvas、WebGL、svg、node-canvas等一些技术。

这里面使用最多的就是canvas,选择它的原因主要还是因为在大数据量的呈现、像素级操作更好控制、还有在动画方面的绘制能力,都相比dom、svg有更多的优势。

同时我们也根据我们日常的可视化产品,开源了基于百度地图api的可视化库Mapv(),能更方便的展示点、线、面的地理位置数据

 

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

网友点评