玩转前端可视化，你准备好了吗？

文章来源：企鹅号 - 超图集团

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

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们进行选择，我们总结了二者在特性上的几点差异：