L7 2.7 持续打磨可视化能力

导读

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

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

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

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

本次发布重点包括：

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

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

官网更新案例集锦

图层能力升级

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

点图层

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

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

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

两种点图层对比

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

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

柱状图颜色渐变

线图层

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

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

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

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

线图层支持边框配置

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

带有边框的路线图

线图层支持绘制地形

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

带有地理高度的线图层

面图层

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

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

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

性能优化

新增简单点图层

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

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

简单点图层实现原理

新增简单线图层

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

简单线图层配置颜色渐变

新增图层

新增墙图层

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

新增风场图层

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

风场图层

动画和交互

新增柱图的增长动画

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

增长动画

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

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

城市扫光

拾取效果优化

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

更加精细的控制。

官网升级

目录结构升级

随着 L7 生态日渐繁荣，相关上层建设如 L7Reat、L7Draw、L7Boundary、L7Plot、DipperMap 等均建设了自己的站点，为了更聚焦于 L7 本身的能力，这一次升级后 L7 官网将不再保留上层生态的内容。

新旧官网结构对比

文档补齐优化

本次官网升级对 L7 全量 API 提供了详细的说明，同时为了用户方便理解，在对应的地方提供了相应的图解和使用代码。

官网文档图解

新增 demo 、覆盖更多的场景

L7 官网新增 了 16 + 的案例用来演示 L7 新增的能力，同时对现有的 demo 进行效果的优化。改进后的案例集合可以覆盖更多更实际的业务场景，给用户提供更多的使用、借鉴意义。

未来规划

L7 在 2022 新的一年有许多新的计划

• 引入 worker 计算
• 提供完善的后处理特效

• 新增瓦片方案
• 完善小程序端的兼容

• 可视化能力持续打磨

相信在新的一年，L7 会给大家带来更加专业好用的地理可视化能力！

欢迎大家点点 star ✨  Github

官方钉钉群号：32292906

二维码：