antvis/antv-l7

AntV L7 Geospatial Visualization

AntV L7 是基于 WebGL 的大规模地理空间数据可视化引擎，支持多种地图底图和丰富的可视化图层类型。

Quick Start

创建最简单的 L7 地图应用：

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

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

// 2. 添加图层
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 的典型开发流程：

1. 场景初始化 (Scene) → 2. 数据准备 → 3. 创建图层 (Layer) → 4. 添加交互 → 5. 优化性能

📚 Reference Documentation

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

基础功能 (references/core/)

• scene.md - Scene 初始化、生命周期、方法
• map-types.md - GaodeMap、Mapbox、Maplibre、Map 的配置

数据处理 (references/data/)

• geojson.md - GeoJSON 格式、解析、转换
• csv.md - CSV 数据加载和处理
• json.md - JSON 数据、OD 数据、路径数据
• parser.md - Parser 配置、Transform 转换

图层类型 (references/layers/)

• point.md - 点图层：散点、气泡、3D 柱状
• line.md - 线图层：路径、弧线、流线
• polygon.md - 面图层：填充、3D 建筑、choropleth
• heatmap.md - 热力图：密度分布、网格热力
• image.md - 图片图层：卫星图、航拍图、平面图
• raster.md - 栅格瓦片图层：XYZ/TMS 瓦片服务
• other-layers.md - 其他图层类型

视觉映射 (references/visual/)

• mapping.md - 颜色、大小、形状映射
• style.md - 透明度、描边、纹理等样式

交互组件 (references/interaction/)

• events.md - 点击、悬停、选中事件
• components.md - Popup、Marker、Controls、Legend

动画效果 (references/animation/)

• layer-animation.md - 图层动画、轨迹动画

性能优化 (references/performance/)

• optimization.md - 数据过滤、聚合、图层管理

使用指南

按用户需求选择文档

| 用户请求示例 | 加载的文档 | | -------------- | -------------------------------- | | "创建一个地图" | core/scene.md | | "显示点位数据" | layers/point.md, data/geojson.md | | "绘制路径" | layers/line.md | | "热力图" | layers/heatmap.md | | "添加点击事件" | interaction/events.md | | "显示弹窗" | interaction/components.md |

技能组合模式

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

城市可视化 = scene + polygon + point + events + popup
轨迹动画 = scene + line + animation
热力分析 = scene + heatmap + data/json

依赖检查

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

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

版本信息

• 当前版本: L7 2.x
• 浏览器支持: Chrome ≥60, Firefox ≥60, Safari ≥12
• 坐标系: WGS84 (地理坐标) / Plane coordinates (独立 Map)
• 底图: 高德地图、Mapbox、Maplibre、L7 Map (独立)

最佳实践

1. 场景初始化优先: 始终从创建 Scene 开始
2. 数据格式规范: 优先使用 GeoJSON 标准格式
3. 性能优先: 大数据量时使用数据过滤和聚合
4. 渐进增强: 先实现基础功能，再添加交互和动画
5. 错误处理: 添加事件监听和数据验证

快速参考

常用导入

// 核心
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';

地图样式选项

• 'light' - 浅色风格
• 'dark' - 深色风格
• 'normal' - 标准风格
• 'satellite' - 卫星影像
• 'blank' - 空白底图（独立 Map）

坐标格式

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

元数据

• skill-dependency.json - 技能依赖关系图
• skill-tags.json - 中英文标签检索
• version-compatibility.json - 版本兼容性信息

查看 index.md 获取完整技能列表和导航。