玩转前端可视化,你准备好了吗?

在大数据时代,地球空间信息科学的内容和形式日趋丰富。随着空间大数据存储、管理和分析的重要性不断提高,可视化将是空间大数据应用的最后一公里。与此同时,前端技术不断更迭换代,海量大数据集传往浏览器端进行快速的可视化已不再受限,这使得用户可以更加详细、准确、快速地识别抽象数据的隐藏规律。

SuperMap iClient for JavaScript 9D版本,支持了30万级别的高效率散点图层(GraphicLayer),GraphicLayer采用Canvas渲染十分密集的点数据集,可通过图中数据点的密度,直观地获取对应数据的地理分布和强度。

范例地址:

http://iclient.supermap.io/examples/openlayers/examples.html#viz-graphiclayer

高性能渲染图层再升级SuperMap iClient JavaScript 9D(2019)

超图研究院Web客户端研发团队将WebGL渲染机制引入了高性能渲染图层(GraphicLayer),大幅提升了渲染性能。例如,数据量由之前的30万提升至100万,相较SuperMap GIS 9D版本有了3倍以上的性能提升,实现了100万数据可在1秒内出图。同时,该版本新增了支持任意带经纬度的点数据格式,例如GeoJSON、TopoJSON、二维表等多种格式,还可以实时改变点的样式,并支持交互操作,如根据属性筛选和过滤、支持鼠标事件等。

范例地址:

http://iclient.supermap.io/dev/examples/mapboxgl/examples.html#viz-graphicLayer

GraphicLayer真的这么高效吗?

针对这个问题,我们分别对Leaflet、OpenLayers的默认点图层(橙色柱子)和GraphicLayer(蓝色柱子)的性能进行了对比测试:

性能评测

▶▶GraphicLayer在加载和缩放操作上比开源图库的默认图层渲染时间缩短至少100倍(所以Leaflet的对比图几乎看不到蓝色柱子);

▶▶OpenLayers的默认图层在渲染50万和100万点时,浏览器无响应,而GraphicLayer的渲染时间仍然保持在1s以内。

对接最新ECharts,渲染千万级数据

2018年1月,ECharts发布了最新的4.0版本。该版本最大的亮点是支持千万级数据的可视化渲染,将数据分块后便可进行加载。相比于之前等所有数据加载完成后再进行绘制,新版本的ECharts以增量渲染的方式对数据进行可视化,进而提升了性能。超图研究院Web客户端研发团队同时也对EChartsLayer进行了升级,目前Leaflet、OpenLayers、MapboxGL均可以支持ECharts 4.0的增量渲染能力。

for Leaflet范例地址:

http://iclient.supermapol.com/dev/examples/leaflet/examples.html#viz-ECharts

for MapboxGL范例地址:

http://iclient.supermap.io/dev/examples/mapboxgl/examples.html#viz-ECharts

for OpenLayers范例地址:

http://iclient.supermapol.com/dev/examples/openlayers/examples.html#viz-ECharts

需要注意的是,ECharts的增量渲染只支持带经纬度的TypedArray二进制格式。我们基于node编写了一个小工具,以支持ECharts的增量渲染场景,数据来源支持GeoJson、SuperMap iServer REST数据服务和SuperMap iServer Json 格式文件,现已在Github上开源,项目地址:

https://github.com/SuperMap/clip-tool-for-echarts

渲染大数据,GraphicLayer还是EChartsLayer?

GraphicLayer和EChartsLayer所拥有的高性能,让我们轻而易举就可以对百万级别的大数据集进行可视化渲染。为了方便WebGISer们进行选择,我们总结了二者在特性上的几点差异:

▶▶渲染方式:GraphicLayer为一次渲染,EChartsLayer为增量渲染;

▶▶交互方式:GraphicLayer支持鼠标交互,EChartslayer暂不支持;

▶▶数据来源:GraphicLayer支持直接传入常用文件格式,EChartslayer需要使用工具对数据进行预处理。

如果有交互操作需求,建议采用GraphicLayer;如果数据量在千万级以上,则建议采用EChartsLayer。

玩转前端可视化,你准备好了吗?

前端可视化的优势

▶▶从表达方法看,更加直观快速:

可以在浏览器中更加流畅地创建和展示复杂的数据可视化效果;

对可视化风格和样式进行动态调整;

对数据进行快速的筛选、变化和交互等互动操作;

无需对图层进行重新加载,也不需要对数据进行切图预缓存。

▶▶从渲染技术看,更加流畅:

应用WebGL(Web Graphics Library)为HTML5 Canvas提供的硬件3D加速渲染能力,可以借助系统显卡在浏览器里更流畅地渲染复杂、高质量的图形元素,以及动画效果、光效等。

图片来自DECK.GL

复制以下链接至浏览器中,来体验更多酷炫的前端可视化实践吧!

https://github.com/SuperMap/iClient-JavaScript

本期编辑 | 周强

本期责编 | 王宇卫

【近期回顾】

欢迎转载~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180523B1IWC600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励