git clone https://github.com/antvis/L7 --depth=1L7 是由蚂èšé‡‘æœ AntV æ•°æ®å¯è§†åŒ–团队推出的基于 WebGL çš„å¼€æºå¤§è§„模地ç†ç©ºé—´æ•°æ®å¯è§†åˆ†æžå¼€å‘框架。L7 ä¸çš„ L 代表 Location，7 代表世界七大洲，寓æ„能为全çƒä½ç½®æ•°æ®æä¾›å¯è§†åˆ†æžçš„能力。L7 专注数æ®å¯è§†åŒ–化表达，通过颜色ã€å¤§å°ã€çº¹ç†ï¼Œæ–¹å‘，体积ç‰è§†è§‰å˜é‡è®¾ç½®å®žçŽ°ä»Žæ•°æ®åˆ°ä¿¡æ¯æ¸…晰，有效的表达。
L7 能够满足常è§çš„地图图表，BI 系统的å¯è§†åŒ–分æžã€ä»¥åŠ GIS，交通，电力，国土，农业，城市ç‰é¢†åŸŸçš„空间信æ¯ç®¡ç†ï¼Œåˆ†æžç‰åº”用系统开å‘需求。
🌠数æ®é©±åŠ¨å¯è§†åŒ–展示
æ•°æ®é©±åŠ¨ï¼Œçµæ´»æ•°æ®æ˜ 射，从数到形，支æŒä¸°å¯Œçš„地图å¯è§†åŒ–类型，更好洞察数æ®ã€‚
🌠2D，3D 一体化的海é‡æ•°æ®é«˜æ€§èƒ½æ¸²æŸ“
æµ·é‡ç©ºé—´æ•°æ®å®žæ—¶ï¼Œå¯äº¤äº’，动æ€æ¸²æŸ“，
🌠简å•çµæ´»çš„æ•°æ®æŽ¥å…¥
æ”¯æŒ CSV，JSON，GeoJSON ç‰æ•°æ®æ ¼å¼æŽ¥å…¥ï¼Œå¯ä»¥æ ¹æ®éœ€æ±‚自定义数æ®æ ¼å¼ï¼Œæ— 需å¤æ‚的空间数æ®è½¬æ¢ã€‚
🌠多地图底图支æŒï¼Œæ”¯æŒç¦»çº¿å†…网部署
å±è”½ä¸åŒåº•å›¾ä¹‹é—´çš„差异，用户åªéœ€è¦å…³æ³¨æ•°æ®å±‚表达，交互。高德地图国内åˆæ³•åˆè§„的地ç†åº•å›¾ï¼ŒMapbox 满足国际化业务需求。
- 气泡图
- 散点图
- 符å·åœ°å›¾
- 3D æŸ±çŠ¶åœ°å› 9E46 ¾
- èšåˆåœ°å›¾
- å¤åˆå›¾è¡¨åœ°å›¾
- 自定义 Marker
- 路径地图
- å¼§çº¿ï¼Œæ”¯æŒ 2D 弧线ã€3D 弧线以åŠå¤§åœ†èˆªçº¿
- ç‰å€¼çº¿
- 填充图
- 3D 填充图
- ç»å…¸çƒåŠ›å›¾
- 蜂çªçƒåŠ›å›¾
- ç½‘æ ¼çƒåŠ›å›¾
- 图片
- Raster
npm install @antv/l7import { 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);