Skip to content

antvis/L7

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

* fix: docs: lint error

* fix: 文件å??大å°?写

* chore: 更新版本

* fix: 支�自定义图形
3c9829c

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
November 21, 2022 23:26
March 19, 2023 23:15
April 21, 2020 11:28
November 21, 2022 23:26
November 22, 2019 20:18
April 10, 2020 19:43
March 21, 2023 10:26
March 19, 2023 23:15
September 13, 2022 11:25
November 20, 2022 14:39
November 29, 2022 23:35

English | 简体中文

L7

� 地�空间数��视分�引擎

travis ci 最近æ??交

教程 • 文档 • 示例 • 贡献

L7 demo

L7 是由蚂èš?金æœ? AntV æ•°æ?®å?¯è§†åŒ–团队推出的基于 WebGL 的开æº?大规模地ç?†ç©ºé—´æ•°æ?®å?¯è§†åˆ†æž?å¼€å?‘框架。L7 中的 L 代表 Location,7 代表世界七大洲,寓æ„?能为全ç?ƒä½?置数æ?®æ??ä¾›å?¯è§†åˆ†æž?的能力。L7 专注数æ?®å?¯è§†åŒ–化表达,通过颜色ã€?大å°?ã€?纹ç?†ï¼Œæ–¹å?‘,体积等视觉å?˜é‡?设置实现从数æ?®åˆ°ä¿¡æ?¯æ¸…晰,有效的表达。

L7 能够满足常�的地图图表,BI 系统的�视化分��以� GIS,交通,电力,国土,农业,城市等领域的空间信�管�,分�等应用系统开�需求。

🌟 核心特性

� 数�驱动�视化展示

数�驱动,�活数�映射,从数到形,支�丰富的地图�视化类型,更好洞察数�。

� 2D,3D 一体化的海�数�高性能渲染

海�空间数�实时,�交互,动�渲染,

� 简��活的数�接入

支� CSV,JSON,GeoJSON 等数�格�接入,�以根�需求自定义数�格�,无需��的空间数�转�。

� 多地图底图支�,支�离线内网部署

�蔽��底图之间的差异,用户�需�关注数�层表达,交互。高德地图国内�法�规的地�底图,Mapbox 满足国际化业务需求。

🌈 支�丰富的图表类型

点图层

  • 气泡图
  • 散点图
  • 符å?·åœ°å›¾
  • 3D 柱状地图
  • è?šå?ˆåœ°å›¾
  • å¤?å?ˆå›¾è¡¨åœ°å›¾
  • 自定义 Marker

线图层

  • 路径地图
  • 弧线,支æŒ? 2D 弧线ã€?3D 弧线以å?Šå¤§åœ†èˆªçº¿
  • 等值线

�图层

  • 填充图
  • 3D 填充图

热力图

  • ç»?典热力图
  • 蜂çª?热力图
  • 网格热力图

栅格地图

  • 图片
  • Raster

📦 如何使用

安装

npm install @antv/l7

�始化地图

import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'light',
    pitch: 0,
    center: [107.054293, 35.246265],
    zoom: 4.056,
  }),
});

添加图层

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,
    strokeWidth: 1,
  });

scene.addLayer(pointLayer);

🔗 Links

✅ License

MIT license.