antv-l7

AntV L7 Geospatial Visualization

AntV L7 is a WebGL-based engine for large-scale geospatial data visualization, supporting multiple map basemaps and a rich variety of visualization layer types.

Quick Start

Create the simplest L7 map application:

import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

// 1. Initialize the scene const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [120.19, 30.26], zoom: 10, style: 'light', }), });

// 2. Add a layer scene.on('loaded', () => { const pointLayer = new PointLayer() .source(data, { parser: { type: 'json', x: 'lng', y: 'lat' }, }) .shape('circle') .size(10) .color('#5B8FF9');

scene.addLayer(pointLayer); });


## Core Workflow

L7 的典型开发流程：

Scene initialization (Scene) → 2. Data preparation → 3. Create a layer (Layer) → 4. Add interactions → 5. Optimize performance


## 📚 Reference Documentation

详细文档按领域组织，根据需要加载：

### 基础功能 (references/core/)

- **[scene.md](references/core/scene.md)** - Scene 初始化、生命周期、方法
- **[map-types.md](references/core/map-types.md)** - GaodeMap、Mapbox、Maplibre、Map 的配置

### 数据处理 (references/data/)

- **[geojson.md](references/data/geojson.md)** - GeoJSON 格式、解析、转换
- **[csv.md](references/data/csv.md)** - CSV 数据加载和处理
- **[json.md](references/data/json.md)** - JSON 数据、OD 数据、路径数据
- **[parser.md](references/data/parser.md)** - Parser 配置、Transform 转换
- **[source-raster.md](references/data/source-raster.md)** - 栅格数据源（GeoTIFF、多波段、遥感影像）

### 图层类型 (references/layers/)

- **[point.md](references/layers/point.md)** - 点图层：散点、气泡、3D 柱状
- **[line.md](references/layers/line.md)** - 线图层：路径、弧线、流线
- **[polygon.md](references/layers/polygon.md)** - 面图层：填充、3D 建筑、choropleth
- **[heatmap.md](references/layers/heatmap.md)** - 热力图：密度分布、网格热力
- **[image.md](references/layers/image.md)** - 图片图层：卫星图、航拍图、平面图
- **[raster.md](references/layers/raster.md)** - 栅格图层：单张栅格图片
- **[tile-raster.md](references/layers/tile-raster.md)** - 栅格瓦片图层：TMS/WMS/WMTS 瓦片服务
- **[base-layer.md](references/layers/base-layer.md)** - 图层通用方法和事件
- **[other-layers.md](references/layers/other-layers.md)** - 其他图层类型

### 视觉映射 (references/visual/)

- **[mapping.md](references/visual/mapping.md)** - 颜色、大小、形状映射
- **[style.md](references/visual/style.md)** - 透明度、描边、纹理等样式

### 交互组件 (references/interaction/)

- **[events.md](references/interaction/events.md)** - 点击、悬停、选中事件
- **[popup.md](references/interaction/popup.md)** - Popup 弹窗组件
- **[layer-popup.md](references/interaction/layer-popup.md)** - LayerPopup 图层弹窗
- **[components.md](references/interaction/components.md)** - Marker、MarkerLayer、Controls、Legend
- **[marker-layer.md](references/interaction/marker-layer.md)** - MarkerLayer 标注图层
- **[controls.md](references/interaction/controls.md)** - 地图控件（Zoom、Scale、Fullscreen 等）

### 动画效果 (references/animation/)

- **[layer-animation.md](references/animation/layer-animation.md)** - 图层动画、轨迹动画

### 性能优化 (references/performance/)

- **[optimization.md](references/performance/optimization.md)** - 数据过滤、聚合、图层管理

## 使用指南

### 按用户需求选择文档

| 用户请求示例   | 加载的文档                                             |
| -------------- | ------------------------------------------------------ |
| "创建一个地图" | core/scene.md, core/map-types.md                       |
| "显示点位数据" | layers/point.md, data/geojson.md                       |
| "绘制路径"     | layers/line.md                                         |
| "热力图"       | layers/heatmap.md                                      |
| "加载卫星影像" | layers/tile-raster.md, data/source-raster.md           |
| "添加点击事件" | interaction/events.md                                  |
| "显示弹窗"     | interaction/popup.md, interaction/layer-popup.md       |
| "添加标注"     | interaction/components.md, interaction/marker-layer.md |
| "添加控件"     | interaction/controls.md                                |

### 技能组合模式

复杂需求需要组合多个技能：

City visualization = scene + polygon + point + events + popup Trajectory animation = scene + line + animation Heatmap analysis = scene + heatmap + data/json


### 依赖检查

使用 `metadata/skill-dependency.json` 检查技能依赖关系：

```json
{
  "point-layer": {
    "requires": ["scene-initialization"],
    "optional": ["source-geojson", "color-mapping"],
    "nextSteps": ["event-handling", "popup"]
  }
}

Version information

Current version: L7 2.x
Browser support: Chrome ≥60, Firefox ≥60, Safari ≥12
Coordinate system: WGS84 (geographic coordinates) / Plane coordinates (standalone Map)
Basemap: Gaode Map, Mapbox, Maplibre, L7 Map (standalone)

Best practices

Prioritize scene initialization: Always start by creating a Scene
Data format standards: Prefer using the GeoJSON standard format
Performance first: Use data filtering and aggregation for large data volumes
Progressive enhancement: Implement basic functionality first, then add interactions and animations
Error handling: Add event listeners and data validation

Quick reference

Common imports

// 核心
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

// 图层
import { PointLayer, LineLayer, PolygonLayer, HeatmapLayer } from '@antv/l7';

// 组件
import { Popup, Marker } from '@antv/l7';

Map style options

'light' - Light style
'dark' - Dark style
'normal' - Standard style
'satellite' - Satellite imagery
'blank' - Blank basemap (standalone Map)

Coordinate format

[经度, 纬度]; // [120.19, 30.26]
// 经度: -180 ~ 180
// 纬度: -90 ~ 90

Metadata

skill-dependency.json - Skill dependency graph
skill-tags.json - Chinese and English tag search
version-compatibility.json - Version compatibility information

View index.md for the complete skill list and navigation.