@antv/l7

A Large-scale WebGL-powered Geospatial Data Visualization

@antv/l7 downloads @antv/l7 version @antv/l7 license

@antv/l7Similar Packages:

Npm Package Weekly Downloads Trend

3 Years
🌟 Show real-time usage chart on @antv/l7's README.md, just copy the code below.
## Usage Trend
[![Usage Trend of @antv/l7](https://npm-compare.com/img/npm-trend/THREE_YEARS/@antv/l7.png)](https://npm-compare.com/@antv/l7#timeRange=THREE_YEARS)

Cumulative GitHub Star Trend

🌟 Show GitHub stars trend chart on @antv/l7's README.md, just copy the code below.
## GitHub Stars Trend
[![GitHub Stars Trend of @antv/l7](https://npm-compare.com/img/github-trend/@antv/l7.png)](https://npm-compare.com/@antv/l7)

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
@antv/l703,9791.59 MB206a day agoMIT

README for @antv/l7

English | 简体中文

L7

🌍 Large-scale WebGL-powered Geospatial data visualization analysis framework.

travis ci 最近提交

TutorialsAPI documentationExamplesContributor

L7 demo

Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting.

L7 focuses on geographic data expressiveness,interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services

🌟 Highlight features of L7 2.0

  • 🌏 Data-driven Visualization

    Layer visualization API design base Semiology of Graphics.

    It supports rich map visualization types for a better insight on data.

  • 🌏 High performance rendering with 2D/3D effect Real-time and dynamic rendering with millions of spatial data.

  • 🌏 Simple and flexible data format

    L7 supports a wide variety of data formats including CSV, JSON, geojson, among others, eliminating the need to run conversions ahead of time.

  • 🌏 Multi-basemap

    For global users, Mapbox is easy to be embedded by a simple line of code.

Getting Started

📦 Installation

npm install @antv/l7

Init Map by L7 scene

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

Add Layer

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.