L7 是基于 WebGL 的开源大规模地理空间数据可视分析引擎,L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达,通过颜色、大小、纹理,方向,体积等视觉变量设置实现从数据到信息清晰的呈现。
1、数据驱动渲染 支持 CSV、JSON、GeoJSON 等格式,不需要复杂的转换就能直接接入数据。
通过字段映射(如 size
、color
)实现动态可视化效果,例如根据空气质量指数(AQI)动态调整点图层颜色与大小。
2、高性能渲染 基于 WebGL 技术,可实时渲染百万级空间数据,支持动态交互。
3、地图底图支持
提供高德地图(国内合规方案)和 Mapbox(国际化方案)的无缝切换,支持离线部署。
初始化时通过 type
参数指定底图类型(amap
或 mapbox
)。
4、图表类型 点图层:气泡图、散点图、3D柱状图、聚合地图等。
线图层:路径地图、弧线、等值线。
面图层:填充图、3D地形图。
热力图:蜂窝热力、网格热力等聚合统计形式。
1、安装
npm install @antv/l7
2、初始化地图
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'light',
center: [107.054293, 35.246265],
zoom: 4.056,
}),
});
3、添加数据图层
import { PointLayer } from '@antv/l7';
const pointLayer = new PointLayer()
.source(data)
.shape('circle')
.size('mag', [1, 25])
.color('mag', ['#5B8FF9', '#5CCEA1'])
.style({ opacity: 0.3 });
scene.addLayer(pointLayer);
1、全球 AQI 可视化
数据来源:World's Air Pollution 实时 AQI 数据(JSON 格式)。
实现:通过颜色映射(绿/蓝/红)区分不同污染等级,动态调整点大小。
2、轨迹与路网分析
轨迹数据:从 GPS 平台(如六只脚)获取 CSV 数据,解析后生成亮度图或三维路网。
路网叠加:结合 OSM 数据,通过线图层颜色分类显示不同类型道路(如高速公路、步行道)。