L7 2.7 持续打磨可视化能力-阿里云开发者社区

L7 2.7 持续打磨可视化能力

2022-01-24 429

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 导读L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 专注于空间数据的可视化表达。图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。欢迎关注和 star 我们的 GitHub：https://github.com/antvis/L7官网：https://l7

导读

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 专注于空间数据的可视化表达。图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

欢迎关注和 star 我们的 GitHub：https://github.com/antvis/L7

官网：https://l7.antv.vision/zh

在过去几个月中，L7 持续打磨本身的可视化能力，在进行可视化基础能力建设的同时改善性能，为用户带来更加极致的可视化体验。同时我们在这一版本同时对官网进行了大的升级改造，补充了更多更炫酷的案例，补齐更详细的文档，让用户可以更加容易的使用 L7 进行开发。

本次发布重点包括：

点、线、面各个图层效果的优化
新增墙、风场等全新的图层

提供了优化性能的简单图层
全面升级官网和文档

官网更新案例集锦

图层能力升级

本次发布我们不仅对现有图层的可视化效果进行了优化，还提供了更多新的图层，能满足用户在不同场景下多样的可视化表达的需求。

点图层

点图层支持固定米单位大小

原本 L7 只支持绘制固定像素大小的点，某些情况下我们可能需要绘制固定面积的点。如在地图上绘制一个固定半径为 500 米的圆。

之前我们只能通过绘制矢量图形来模拟（PolygonLayer），而现在点图层本身支持了这一能力（目前只有高德底图支持）。


固定像素大小	固定半径大小为 100 米的点图层

两种点图层对比

点图层的柱图支持颜色渐变

用户可以配置柱状图的上下颜色渐变，顶部颜色到底部颜色均匀过度。

柱状图颜色渐变

线图层

平面弧线支持动态设置弧度

在许多情况下，我们需要绘制两点之间的多条连线，通过点之间的连线的数量，我们可以表示点之间某种联系的紧密程度。如航线图，我们可以通过表示航班架次弧线数量表示两地航线的繁忙程度。

现在 L7 支持配置弧线图层的 thetaOffset 参数控制弧线的弧度，同时该参数支持用户通过映射手段根据数据动态配置。通过一定的数据和简单的配置，我们可以很容易得到一系列密集排布，弧度不同的弧线。

几个机场之间航线的可视化表示

线图层支持边框配置

本次发布我们为线图层增加了边框的支持，支持配置边框的颜色以及边框的宽度。通过配置边框，我们可以为道路的表示带来更细致的可视化配置。

带有边框的路线图

线图层支持绘制地形

通常我们只需要经度和纬度两个参数可以描述一个点在地图上的位置，而现在我们支持提供第三个参数来控制这个点在地图上的高度。如下图，线图层的数据支持传入除了经度纬度之外的第三个参数，由此我们就可以用线图层来绘制实际地形。

带有地理高度的线图层

面图层

2D 填充图增加径向渐变效果

2D 填充图增加了由外向内和由内向外渐变两种渐变方向，渐变中心是图形的几何中心，渐变值是透明度。通过配置径向渐变，我们可以得到一些更美观可视化效果。

添加了径向渐变的中国地图填充图

性能优化

新增简单点图层

用户使用点的简单模式，在加载大量点数据的情况下带来更小的性能消耗。


简单点在 2D 模式下展示效果	简单点在 3D 模式下展示效果

我们可以通过简单的图示理解加单点图层提升性能的原理。


普通点图层的实现原理	简单点图层的绘制原理

简单点图层实现原理

新增简单线图层

简单线图层是固定宽度是 1px 的线图层，在简化一部分能力的情况下带来了部分性能的提升。

简单线图层配置颜色渐变

新增图层

新增墙图层

我们通常在地图上使用线图层表示边界、围墙、栅栏等非实体对象或是实体对象，为了带来更立体的效果，我们扩展了原有的线图层，新增了墙图层。墙图层是垂直地图的连续墙面，墙图层支持颜色上下渐变、动画模式以及贴图模式。


墙图层配置上下颜色渐变	墙图层配置纹理贴图

新增风场图层

风场图层用来表示台风路径，海洋洋流等带有流动趋势的数据，新增的风场图层提供风场颜色、速度、粒子数量、风度系数等参数的配置。

风场图层

动画和交互

新增柱图的增长动画

柱状图的增长动画是常见的可视化效果，我们通过扩展柱状图的 animate 方法支持增长动画的配置，支持配置动画的速度以及动画的重复次数。

增长动画

优化城市图层，支持扫光效果

我们为原有的城市图层增加了常见的扫光特效，支持配置扫光的颜色、中心点以及扫光的速度。

城市扫光

拾取效果优化

L7 原本的拾取只支持配置拾取选中的高亮色，在某些场景下会丢失图层本身的细节，这一次发布我们对拾取效果提供了

更加精细的控制。


优化前拾取效果	优化前拾取效果

优化拾取效果，支持混合（保留选中元素本身的细节）	优化拾取效果，支持对拾取结果进行光照计算