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

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
December 6, 2023 14:07
November 22, 2023 11:25
October 31, 2023 18:30
November 21, 2022 23:26
November 27, 2023 15:06
April 21, 2020 11:28
November 22, 2019 20:18
November 10, 2023 14:57
November 30, 2023 10:07
November 20, 2022 14:39
October 31, 2023 18:30

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.