L7

https://l7.antv.antgroup.com/en/api/
Admin
L7 is a geographical visualization engine for large-scale geospatial data visualization with support...
Tokens:66,001
Snippets:610
Trust Score:9.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Load CityBuildingLayer with Data

Source: https://l7.antv.antgroup.com/en/api/other/city_building

Example of initializing a scene and adding a CityBuildingLayer populated with geo-data from an external source.

```javascript
import { Scene, CityBuildingLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark' }) });

scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json')
    .then((res) => res.json())
    .then((data) => {
      const layer = new CityBuildingLayer({ zIndex: 0 });
      layer.source(data);
      scene.addLayer(layer);
    });
});
```

--------------------------------

### Initialize Vector Tile Source (Single and Multiple Servers)

Source: https://l7.antv.antgroup.com/en/api/tile/vector_tile_layer

Provides examples of creating a 'Source' object for vector tiles. It illustrates how to configure it for a single server URL or multiple servers using brace notation for server selection.

```javascript
// single server
const source = new Source('http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...})
```

```javascript
//Multiple servers
const source = new Source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...} )
```

--------------------------------

### Monitor Rendering Events

Source: https://l7.antv.antgroup.com/en/api/debug/debugservice

Example of using the event listener to capture frame rendering information, including start time, end time, and duration.

```javascript
debugService.on('renderEnd', renderInfo => {
  const { renderUid, renderStart, renderEnd, renderDuration } = renderInfo;
});
```

--------------------------------

### Install L7-Leaflet Plugin

Source: https://l7.antv.antgroup.com/en/api/map/leaflet

Instructions for installing the L7-Leaflet plugin using npm or a script tag. This plugin is a third-party extension for L7.

```bash
npm install  '@antv/l7-leaflet'
```

```html
<script src="https://unpkg.com/@antv/l7-leaflet"></script>
```

--------------------------------

### Threshold Scale Example

Source: https://l7.antv.antgroup.com/en/api/polygon_layer/scale

Shows how to implement a threshold scale for manually defining intervals and mapping data to discrete visual values. This is useful for data with specific industry standards or segmentation requirements.

```javascript
// -1   => "red"
// 0    => "white"
// 0.5  => "white"
// 1.0  => "blue"
// 1000 => "blue
```

--------------------------------

### Setting Scale Configuration in L7

Source: https://l7.antv.antgroup.com/en/api/heatmap_layer/scale

Demonstrates how to use the .scale() method to configure mapping between data fields and visual properties. It shows an example of setting a linear scale for the 'mag' field with a specified domain.

```javascript
layer.color('id', ['#f00', '#ff0'])
.size('mag', [1, 80])
.scale('mag', {
  type: 'linear',
  domain: [ 1, 50]
});
```

--------------------------------

### Integrate Existing AMap Instance into L7

Source: https://l7.antv.antgroup.com/en/api/map/gaode

Shows how to pass an existing AMap instance into the L7 Scene configuration to support legacy projects or specific map setups.

```javascript
const map = new AMap.Map('map', {
  viewMode: '3D',
  resizeEnable: true,
  zoom: 11,
  center: [116.397428, 39.90923],
});
const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    mapInstance: map,
  }),
});
```

--------------------------------

### Configure Built-in Post-Processing Passes

Source: https://l7.antv.antgroup.com/en/api/experiment/pass

Examples of initializing built-in post-processing effects such as hexagonal pixelation, ink, and noise. These passes are configured by passing an array containing the effect name and its specific parameters.

```javascript
const hexagonalPixelatePass = ['hexagonalPixelate', { scale: 10, centerX: 0.5, centerY: 0.5 }];
const inkPass = ['ink', { strength: 1 }];
const noisePass = ['noise', { amount: 1 }];
```

--------------------------------

### Handle Scene Loaded Event

Source: https://l7.antv.antgroup.com/en/api/scene

Listens for the 'loaded' event on the scene, which is triggered after the scene has been fully initialized. This is a common place to add layers or perform other setup tasks that depend on the scene being ready.

```javascript
scene.on('loaded', () => {
  scene.addLayer(layer);
});
```

--------------------------------

### Map Instantiation and Configuration

Source: https://l7.antv.antgroup.com/en/api/map/map

Demonstrates how to instantiate a Scene and configure a Map with various options, including adding a raster tile layer.

```APIDOC
## Map Instantiation and Configuration

### Description
This example shows how to create a new `Scene` and initialize a `Map` with specific zoom levels and center coordinates. It also includes an example of adding a raster tile layer to the map.

### Language
typescript

### Code
```typescript
import { Scene, PointLayer, RasterLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Map({
    zoom: 10,
    minZoom: 0,
    maxZoom: 18,
  }),
});

scene.on('loaded', () => {
  // Add a base map layer
  const layer = new RasterLayer();
  layer.source(
    'https://webrd0{1-3}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    {
      parser: {
        type: 'rasterTile',
        tileSize: 256,
        minZoom: 2,
        maxZoom: 18,
      },
    },
  );
  scene.addLayer(layer);
});
```
```

--------------------------------

### Control Earth Rotation

Source: https://l7.antv.antgroup.com/en/api/experiment/earth

Provides an example of how to programmatically rotate the Earth using the `rotateY` method.

```APIDOC
## PUT /api/users/{userId}

### Description
Updates an existing user account's information.

### Method
PUT

### Endpoint
/api/users/{userId}

### Parameters
#### Path Parameters
- **userId** (string) - Required - The unique identifier of the user to update.

#### Request Body
- **email** (string) - Optional - The new email address for the account.
- **password** (string) - Optional - The new password for the account.

### Request Example
```json
{
  "email": "john.doe.updated@example.com"
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the user was updated.

#### Response Example
```json
{
  "message": "User account updated successfully."
}
```
```

--------------------------------

### Instantiating BaiduMap Directly

Source: https://l7.antv.antgroup.com/en/api/map/bmap

Shows how to create a new Scene instance with a BaiduMap, providing necessary configuration like token, center, and zoom level.

```APIDOC
## Instantiate BaiduMap Directly

### Description
Instantiate `BaiduMap` directly within a new `Scene` object. This is the recommended approach for new projects. Ensure you replace the placeholder token with your actual Baidu Map key.

### Method
```javascript
import { BaiduMap } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new BaiduMap({
    // Fill in the Baidu map key. This is a test token and cannot be used for production.
    token: 'zLhopYPPERGtpGOgimcdKcCimGRyyIsh',
    center: [103, 30],
    pitch: 4,
    zoom: 10,
    rotation: 19,
  }),
});
```

### Options
- **token** (string) - Required - Your Baidu Map API key.
- **center** (Array<number>) - Optional - The initial center coordinates [longitude, latitude] of the map.
- **pitch** (number) - Optional - The initial pitch angle of the map.
- **zoom** (number) - Optional - The initial zoom level of the map.
- **rotation** (number) - Optional - The initial rotation angle of the map.
```

--------------------------------

### Initialize L7 Earth Map and Layer

Source: https://l7.antv.antgroup.com/en/api/experiment/earth

Demonstrates how to import the necessary modules, initialize a Scene with an Earth map, and construct a basic EarthLayer with surface textures and lighting styles.

```javascript
import { Scene, Earth } from '@antv/l7-maps';
import { EarthLayer } from '@antv/l7-layers';

const scene = new Scene({
  id: 'map',
  map: new Earth({}),
});

const earthlayer = new EarthLayer()
  .source('https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAARQnAQ', {
    parser: {
      type: 'image',
      extent: [121.168, 30.2828, 121.384, 30.421],
    },
  })
  .color('#f00')
  .shape('base')
  .style({
    opacity: 1.0,
    radius: 40,
    globalOptions: {
      ambientRatio: 0.6,
      diffuseRatio: 0.4,
      specularRatio: 0.1,
      earthTime: 0.1,
    },
  })
  .animate(true);

scene.on('loaded', () => {
  scene.addLayer(earthlayer);
});
```

--------------------------------

### Initialize and Configure PolygonLayer

Source: https://l7.antv.antgroup.com/en/api/polygon_layer/polygonlayer

This snippet demonstrates how to import the PolygonLayer, provide GeoJSON data via the source method, and apply visual styles like fill color and opacity.

```javascript
import { PolygonLayer } from '@antv/l7';
const layer = new PolygonLayer()
  .source({
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [104.4140625, 35.460669951495305],
              [98.7890625, 24.206889622398023],
              [111.796875, 27.371767300523047],
              [104.4140625, 35.460669951495305],
            ],
          ],
        },
      },
    ],
  })
  .shape('fill')
  .color('#f00')
  .style({
    opacity: 0.6,
  });
```

--------------------------------

### Map View Control

Source: https://l7.antv.antgroup.com/en/api/scene

Methods to get and set map view properties such as zoom, center, and rotation.

```APIDOC
## getZoom()
### Description
Get the current zoom level.

## getCenter()
### Description
Get map center point.

## setMapStyle(style)
### Description
Set the map basemap style (e.g., 'light', 'dark', 'normal', or URL).

## setCenter(center, option)
### Description
Set the map center point coordinates with optional padding.

## setZoom(zoom)
### Description
Set the map zoom level.
```

--------------------------------

### Initialize MarkerLayer and Add to Scene

Source: https://l7.antv.antgroup.com/en/api/component/marker_layer

Demonstrates how to import the MarkerLayer class, instantiate it with configuration options, and add it to the L7 scene instance.

```javascript
import { Marker, MarkerLayer } from '@antv/l7';
const markerLayer = new MarkerLayer(option);
scene.addMarkerLayer(markerLayer);
```

--------------------------------

### Define GeoJSON Polygon and MultiPolygon

Source: https://l7.antv.antgroup.com/en/api/source/geojson

Examples of Polygon and MultiPolygon geometry types, including support for polygons with holes.

```json
{
  "type": "Polygon",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      [100.0, 0.0]
    ]
  ]
}

{
  "type": "MultiPolygon",
  "coordinates": [
    [
      [
        [102.0, 2.0],
        [103.0, 2.0],
        [103.0, 3.0],
        [102.0, 3.0],
        [102.0, 2.0]
      ]
    ],
    [
      [
        [100.0, 0.0],
        [101.0, 0.0],
        [101.0, 1.0],
        [100.0, 1.0],
        [100.0, 0.0]
      ],
      [
        [100.2, 0.2],
        [100.8, 0.2],
        [100.8, 0.8],
        [100.2, 0.8],
        [100.2, 0.2]
      ]
    ]
  ]
}
```

--------------------------------

### Define GeoJSON LineString and MultiLineString

Source: https://l7.antv.antgroup.com/en/api/source/geojson

Examples of LineString and MultiLineString geometry types for representing paths or connected lines.

```json
{
  "type": "LineString",
  "coordinates": [
    [100.0, 0.0],
    [101.0, 1.0]
  ]
}

{
  "type": "MultiLineString",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 1.0]
    ],
    [
      [102.0, 2.0],
      [103.0, 3.0]
    ]
  ]
}
```

--------------------------------

### Initialize Earth Map

Source: https://l7.antv.antgroup.com/en/api/experiment/earth

Demonstrates how to create a new Scene with an Earth map instance.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of new user accounts.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Request Body
- **username** (string) - Required - The desired username for the new account.
- **email** (string) - Required - The email address for the account.
- **password** (string) - Required - The password for the account.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **userId** (string) - The unique identifier for the newly created user.
- **message** (string) - A confirmation message.

#### Response Example
```json
{
  "userId": "usr_12345abcde",
  "message": "User account created successfully."
}
```
```

--------------------------------

### Preset Post-Processing Effects

Source: https://l7.antv.antgroup.com/en/api/experiment/pass

Examples of configuring built-in post-processing effects including bloom, blur, and color halftone.

```javascript
const bloomPass = ['bloom', { bloomBaseRadio: 0.5, bloomRadius: 20, bloomIntensity: 1 }];
const blurVPass = ['blurV', { blurRadius: 5 }];
const colorHalftonePass = ['colorHalftone', { angle: 0, size: 8, centerX: 0.5, centerY: 0.5 }];
```

--------------------------------

### CityBuildingLayer Initialization and Basic Usage

Source: https://l7.antv.antgroup.com/en/api/other/city_building

Demonstrates how to initialize the CityBuildingLayer and add it to a scene.

```APIDOC
## CityBuildingLayer Initialization and Basic Usage

### Description
Initializes the `CityBuildingLayer` to render 3D models of urban buildings and displays them on a map scene.

### Method
`new CityBuildingLayer(options?: CityBuildingLayerOptions)`

### Endpoint
N/A (Client-side library)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { CityBuildingLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'dark',
    center: [121.507674, 31.223043],
    pitch: 65.59312320916906,
    zoom: 15.4,
  }),
});

const buildingLayer = new CityBuildingLayer({
  zIndex: 0,
});

scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json')
    .then((res) => res.json())
    .then((data) => {
      buildingLayer.source(data);
      scene.addLayer(buildingLayer);
    });
});
```

### Response
#### Success Response (200)
N/A (Client-side rendering)

#### Response Example
N/A
```

--------------------------------

### Define GeoJSON Point and MultiPoint

Source: https://l7.antv.antgroup.com/en/api/source/geojson

Examples of Point and MultiPoint geometry types for representing single or multiple coordinate locations.

```json
{
  "type": "Point",
  "coordinates": [100.0, 0.0]
}

{
  "type": "MultiPoint",
  "coordinates": [
    [100.0, 0.0],
    [101.0, 1.0]
  ]
}
```

--------------------------------

### Configure PointLayer with sourceLayer

Source: https://l7.antv.antgroup.com/en/api/tile/vector_tile_layer

Demonstrates how to initialize a PointLayer and specify the 'sourceLayer' to select data from a vector tile service. This is crucial when the vector tile data contains multiple layers.

```javascript
const layer = new PointLayer({
  sourceLayer: 'city',
});
```

--------------------------------

### Register and Use AMap Plugins in L7

Source: https://l7.antv.antgroup.com/en/api/map/gaode

Explains how to configure plugins during initialization and use them after the scene has loaded, specifically for controls and search services.

```javascript
const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    center: [116.475, 39.99],
    pitch: 0,
    zoom: 13,
    plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
  }),
});

scene.on('loaded', () => {
  window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
    scene.map.addControl(new AMap.ToolBar());
    var linesearch = new AMap.LineSearch({
      pageIndex: 1,
      pageSize: 1,
      city: 'Beijing',
      extensions: 'all',
    });
    linesearch.search('536', function (status, result) {});
  });
});
```

--------------------------------

### Define Color Ramp Configurations

Source: https://l7.antv.antgroup.com/en/api/raster_layer/raster_data

Examples of different rampColors configurations including cat, quantize, linear, and custom types for data visualization.

```tsx
// Cat enumeration
{ type:'cat', colors:['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00'], positions:[1,20,101,102,200] }

// Quantize equally spaced
rampColors: { type:'quantize', colors: ['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac'] }

// Linear continuous
rampColors: { type:'linear', colors: ['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac'], positions: [0,200,1000,4000,8000] }

// Custom segmented
rampColors: { type:'custom', colors: ['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac'], positions: [0,200,1000,4000,8000,10000] }
```

--------------------------------

### Define Gradient and Texture Types

Source: https://l7.antv.antgroup.com/en/api/line_layer/style

Provides examples of color definitions, gradient directions, and texture blending modes used in line layer configurations.

```javascript
const color = "rgb(200, 100, 50)";
const color2 = '#ff0';

type ILinearDir = 'vertical' | 'horizontal';

type ITextureBlend = 'normal' | 'replace';
```

--------------------------------

### Initialize Mapbox Scene

Source: https://l7.antv.antgroup.com/en/api/map/mapbox

Demonstrates how to initialize an L7 Scene with a Mapbox map, requiring a Mapbox token.

```APIDOC
## Initialize Mapbox Scene

### Description
Initializes an L7 Scene using Mapbox as the basemap. A valid Mapbox token is required.

### Method
N/A (Initialization code)

### Endpoint
N/A

### Parameters
#### Request Body
- **token** (string) - Required - Your Mapbox access token.

### Request Example
```typescript
import { Scene, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    zoom: 10,
    minZoom: 0,
    maxZoom: 18,
    token: 'xxxx', //必须
  }),
});
```

### Response
#### Success Response (200)
N/A (Initialization)

#### Response Example
N/A
```

--------------------------------

### Define Color Ramp Configurations

Source: https://l7.antv.antgroup.com/en/api/raster_layer/raster_ndi

Examples of different color ramp types (cat, quantize, linear, custom) for mapping raster data values to colors.

```typescript
// Enumeration type ribbon
{ type: 'cat', colors: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00'], positions: [1, 20, 101, 102, 200] };

// Equally spaced classification ribbon
rampColors: { type: 'quantize', colors: ['#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac'] };

// Linear continuous ribbon
rampColors: { type: 'linear', colors: ['#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac'], positions: [0, 200, 1000, 4000, 8000] };

// Custom segmented ribbon
rampColors: { type: 'custom', colors: ['#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac'], positions: [0, 200, 1000, 4000, 8000, 10000] };
```

--------------------------------

### Initialize and Configure PointLayer

Source: https://l7.antv.antgroup.com/en/api/point_layer/pointlayer

This snippet demonstrates how to instantiate a PointLayer, bind data from an array source, and configure visual properties like shape, size, and color mapping.

```javascript
import { PointLayer } from '@antv/l7';

const layer = PointLayer({
  zIndex: 2,
})
  .source(data.list, {
    type: 'array',
    x: 'j',
    y: 'w',
  })
  .shape('cylinder')
  .size('t', (level) => {
    return [4, 4, level + 40];
  })
  .color('t', [
    '#002466',
    '#105CB3',
    '#2894E0',
    '#CFF6FF',
    '#FFF5B8',
    '#FFAB5C',
    '#F27049',
    '#730D1C',
  ]);
```

--------------------------------

### Get Cluster Leaves Data

Source: https://l7.antv.antgroup.com/en/api/source/source

Retrieves the original data points associated with a specific cluster ID. This is useful for inspecting the data within an aggregated cluster.

```javascript
layer.on('click', (e) => {
  console.log(source.getClustersLeaves(e.feature.cluster_id));
});
```

--------------------------------

### Configure L7 Raster Source with URL Patterns

Source: https://l7.antv.antgroup.com/en/api/tile/raster_tile_layer

Demonstrates how to define a data source for raster tiles using single URLs, template strings for multiple servers, and arrays for multiple file requests.

```javascript
import { Source } from '@antv/l7';

// single server
const source = new Source('http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...});

// Multiple servers
const source = new Source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...});

// Request multiple files
const urls = [
  'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
  'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff'
];

const tileSource = new Source(urls, {...});
```

--------------------------------

### Get Map View Properties

Source: https://l7.antv.antgroup.com/en/api/scene

Methods to retrieve current map state including zoom level, center coordinates, container dimensions, pitch, and the DOM element.

```javascript
scene.getZoom();
scene.getCenter();
scene.getSize();
scene.getPitch();
scene.getContainer();
```

--------------------------------

### Enable Debugging in L7

Source: https://l7.antv.antgroup.com/en/api/debug/debugservice

Demonstrates how to enable monitoring during scene initialization or via the DebugService instance.

```javascript
const scene = new Scene({
  debug: true
});
const debugService = scene.getDebugService();
debugService.serEnable(true);
```

--------------------------------

### Instantiate L7 Scene with BaiduMap

Source: https://l7.antv.antgroup.com/en/api/map/bmap

Shows how to create an L7 Scene instance using BaiduMap directly. This method requires a Baidu Map key and configuration options like center, pitch, and zoom level. The provided token is for testing purposes only.

```javascript
import { BaiduMap } from '@antv/l7-maps';


const scene = new Scene({
  id: 'map',
  map: new BaiduMap({
    // Fill in the Baidu map key. This is a test token and cannot be used for production.
    token: 'zLhopYPPERGtpGOgimcdKcCimGRyyIsh',
    center: [103, 30],
    pitch: 4,
    zoom: 10,
    rotation: 19,
  }),
});
```

--------------------------------

### JSON Data Parsing with L7

Source: https://l7.antv.antgroup.com/en/api/source/json

This section details how to use the L7 parser to interpret JSON data, which is not a standard geographical format. It covers the setup required for JSON parsing.

```APIDOC
## JSON Data Parsing

JSON is not a standard geographical data structure, so it's crucial to set the `Parser` when using it with L7. L7 provides a flexible parser that can interpret your JSON data into geographical formats.

### Parser Configuration

When using JSON data, you need to specify the parser configuration. This involves defining the `type` as 'json' and providing specific fields for coordinate mapping.

#### Simple Analysis Method

This method is suitable for point data, or line segments with only two points, or arc data. It requires specifying the fields that represent longitude and latitude.

- **type** (string) - Required - Must be `"json"`.
- **x** (string) - Point data longitude field.
- **y** (string) - Point data latitude field.
- **x1** (string) - Optional, for line segments/arcs: starting point longitude.
- **y1** (string) - Optional, for line segments/arcs: starting point latitude.
- **x2** (string) - Optional, for line segments/arcs: ending point longitude.
- **y2** (string) - Optional, for line segments/arcs: ending point latitude.

**Example for Point Data:**
```javascript
layer.source(data, {
  parser: {
    type: 'json',
    x: 'lng',
    y: 'lat',
  },
});
```

**Example for Line Segment/Arc Data:**
```javascript
layer.source(data, {
  parser: {
    type: 'json',
    x: 'lng1',
    y: 'lat1',
    x1: 'lng2',
    y1: 'lat2',
  },
});
```

#### Universal Parsing Method

This method can parse arbitrarily complex points, lines, and surfaces. It relies on a `coordinates` field in your JSON data.

- **type** (string) - Required - Must be `"json"`.
- **coordinates** (array) - Required - The field containing the coordinate data, equivalent to the GeoJSON `coordinates` attribute.

**Example for Point Data:**
```javascript
layer.source(data, {
  parser: {
    type: 'json',
    coordinates: 'coord',
  },
});
```

**Example for Line Data:**
```javascript
layer.source(data, {
  parser: {
    type: 'json',
    coordinates: 'path',
  },
});
```

**Example for Area Data:**
```javascript
layer.source(data, {
  parser: {
    type: 'json',
    coordinates: 'geometryCoord',
  },
});
```

**Note:** Surface data (`Polygon`, `MultiPolygon`) requires a three-layer coordinate structure within the specified `coordinates` field.
```

--------------------------------

### Initialize L7 Source

Source: https://l7.antv.antgroup.com/en/api/source/source

Initializes a new L7 Source object with provided data and options. Options can include clustering, parser, and transforms configurations.

```javascript
const source = new Source(data, option);
```

--------------------------------

### Instantiating BaiduMap with External Map Instance

Source: https://l7.antv.antgroup.com/en/api/map/bmap

Illustrates how to integrate L7 with an existing Baidu Map instance.

```APIDOC
## Instantiate BaiduMap with External Map Instance

### Description
Integrate L7 with an existing `BMapGL.Map` instance. This is useful for existing projects. Ensure the `scene`'s `id` matches the container ID of your `BMapGL.Map` instance.

### Method
```javascript
// Assume map is an existing BMapGL.Map instance
const map = new BMapGL.Map('map', {
  zoom: 11, // Initialize map level
  minZoom: 4,
  maxZoom: 23,
  enableWheelZoom: true,
});

const scene = new Scene({
  id: 'map',
  map: new BaiduMap({
    mapInstance: map,
  }),
});
```

### Parameters
#### Request Body
- **mapInstance** (BMapGL.Map) - Required - An existing Baidu Map instance.
```

--------------------------------

### Importing BaiduMap

Source: https://l7.antv.antgroup.com/en/api/map/bmap

Demonstrates how to import the BaiduMap class from the L7 library.

```APIDOC
## Import BaiduMap

### Description
Import the `BaiduMap` class from the `@antv/l7-maps` package to enable L7 integration with Baidu Maps.

### Language
```javascript
import { BaiduMap } from '@antv/l7-maps';
```
```

--------------------------------

### Load Segment Arc Data via CSV

Source: https://l7.antv.antgroup.com/en/api/source/csv

Configures the L7 layer source to parse CSV data as line segments or arcs. Requires specifying starting and ending coordinate columns.

```javascript
layer.source(data, {
  parser: {
    type: 'csv',
    x: 'lng1',
    y: 'lat1',
    x1: 'lng1',
    y1: 'lat2',
  },
});
```

--------------------------------

### Pass in a Mapbox Map Instance

Source: https://l7.antv.antgroup.com/en/api/map/mapbox

Shows how to integrate L7 with an existing Mapbox map instance.

```APIDOC
## Pass in a Mapbox Map Instance

### Description
Integrates L7 with an already initialized Mapbox map instance. This allows using existing map configurations and controls.

### Method
N/A (Integration code)

### Endpoint
N/A

### Parameters
#### Request Body
- **mapInstance** (mapboxgl.Map) - Required - An existing Mapbox map instance.

### Request Example
```javascript
mapboxgl.accessToken = 'xxxx - token';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40],
  zoom: 9,
});

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    mapInstance: map,
  }),
});
```

### Response
#### Success Response (200)
N/A (Integration)

#### Response Example
N/A
```

--------------------------------

### Initialize L7 Scene with Mapbox

Source: https://l7.antv.antgroup.com/en/api/map/mapbox

Demonstrates how to initialize an L7 Scene using the Mapbox map provider. It requires a valid Mapbox token and basic configuration options such as zoom levels.

```typescript
import { Scene, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    zoom: 10,
    minZoom: 0,
    maxZoom: 18,
    token: 'xxxx',
  }),
});
```

--------------------------------

### Parse JSON Line Data (Simple)

Source: https://l7.antv.antgroup.com/en/api/source/json

Parses simple line segment data from JSON, supporting only lines with two points. It uses 'x', 'y' for the start point and 'x1', 'y1' for the end point coordinates.

```javascript
layer.source(data, {
  parser: {
    type: 'json',
    x: 'lng1',
    y: 'lat1',
    x1: 'lng2',
    y1: 'lat2',
  },
});
```

--------------------------------

### Initialize Earth Fly Line Layer

Source: https://l7.antv.antgroup.com/en/api/experiment/flyline

Demonstrates the necessary imports for setting up an Earth-based fly line visualization. This requires both the EarthLayer and LineLayer components from the @antv/l7 package.

```javascript
import { EarthLayer, LineLayer } from '@antv/l7';
```

--------------------------------

### Initialize CityBuildingLayer

Source: https://l7.antv.antgroup.com/en/api/other/city_building

Basic import and initialization of the CityBuildingLayer component.

```javascript
import { CityBuildingLayer } from '@antv/l7';
const layer = new CityBuildingLayer();
```

--------------------------------

### Add Image Layer with Coordinates

Source: https://l7.antv.antgroup.com/en/api/source/image

This snippet demonstrates how to add an image to the map using four specific geographic coordinates. The coordinates are provided as an array of [longitude, latitude] pairs, starting from the upper-left corner and proceeding clockwise.

```typescript
layer.source(
  'https://mdn.alipayobjects.com/huamei_gjo0cl/afts/img/A*vm_9S64uA0UAAAAAAAAAAAAADjDHAQ/original',
  {
    parser: {
      type: 'image',
      coordinates: [
        [100.959388, 41.619522],
        [101.229887, 41.572654],
        [101.16971, 41.377836],
        [100.900015, 41.424628],
      ],
    },
  },
);
```

--------------------------------

### Initialize L7 Scene with Simple Coordinate System

Source: https://l7.antv.antgroup.com/en/api/experiment/simple_coordinates

Configures the L7 Scene using the custom Map type with the 'SIMPLE' version attribute. This setup disables rotation and pitch to maintain a flat plane coordinate view.

```javascript
import { Scene, ImageLayer, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Map({
    center: [500, 500],
    pitch: 0,
    zoom: 3,
    version: 'SIMPLE',
    mapSize: 1000,
    maxZoom: 5,
    minZoom: 2,
    pitchEnabled: false,
    rotateEnabled: false,
  }),
});
```

--------------------------------

### Initialize Scene with Tencent Map

Source: https://l7.antv.antgroup.com/en/api/map/tencent

Initialize an L7 Scene using Tencent Map as the basemap.

```APIDOC
## Initialize Scene with Tencent Map

### Description
Initialize an L7 `Scene` and configure it to use `TencentMap` as the underlying map provider. This example sets initial map options like zoom level.

### Language
javascript

### Code
```javascript
import { Scene, PointLayer } from '@antv/l7';
import { TencentMap } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new TencentMap({
    zoom: 10,
    minZoom: 5,
    maxZoom: 18,
  }),
});
```
```

--------------------------------

### BaiduMap Options

Source: https://l7.antv.antgroup.com/en/api/map/bmap

Details the available configuration options for the BaiduMap constructor.

```APIDOC
## BaiduMap Options

### Description
These options can be passed to the `BaiduMap` constructor when instantiating the map directly.

### Options
- **zoom** (number) - Optional - Initial map display level. Range varies by map provider (e.g., Mapbox 0-24, AMap 2-19).
- **center** (Array<number>) - Optional - Map initial center latitude and longitude [longitude, latitude].
- **pitch** (number) - Optional - Map initial pitch angle. Default is 0.
- **minZoom** (number) - Optional - Minimum map zoom level. Default varies by map provider.
- **maxZoom** (number) - Optional - Maximum map zoom level. Default is 22.
- **rotateEnable** (Boolean) - Optional - Whether the map can be rotated. Default is true.
```

--------------------------------

### Initialize L7 Scene with AMap

Source: https://l7.antv.antgroup.com/en/api/map/gaode

Demonstrates how to create a new GaodeMap instance within an L7 Scene, including configuration for pitch, style, center, and zoom.

```javascript
const L7AMap = new GaodeMap({
  pitch: 35.210526315789465,
  style: 'dark',
  center: [104.288144, 31.239692],
  zoom: 4.4,
  token: 'xxxx-token',
  plugin: [],
});
```

--------------------------------

### Initialize L7 Scene with Leaflet Map

Source: https://l7.antv.antgroup.com/en/api/map/leaflet

Code example for initializing an L7 Scene with a Leaflet map as the basemap. It sets up the map container, center, zoom levels, and integrates Leaflet's map object with L7's Scene.

```typescript
import { Scene } from '@antv/l7';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { Map } from '@antv/l7-leaflet';
const scene = new Scene({
  id: 'map',
  map: new Map({
    pitch: 0,
    center: [112, 37.8],
    zoom: 3,
    minZoom: 1,
  }),
});
```

--------------------------------

### Instantiate L7 Scene with Map

Source: https://l7.antv.antgroup.com/en/api/map/map

Demonstrates how to create a new L7 Scene and integrate it with a Map instance. This includes setting initial map properties and loading a raster tile layer as the basemap upon scene load.

```typescript
import { Scene, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';


const scene = new Scene({
  id: 'map',
  map: new Map({
    zoom: 10,
    minZoom: 0,
    maxZoom: 18,
  }),
});


scene.on('loaded', () => {
  // 添加地图底图
  const layer = new RasterLayer();
  layer.source(
    'https://webrd0{1-3}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    {
      parser: {
        type: 'rasterTile',
        tileSize: 256,
        minZoom: 2,
        maxZoom: 18,
      },
    },
  );
  scene.addLayer(layer);
});
```

--------------------------------

### Get Supported Point Size Range

Source: https://l7.antv.antgroup.com/en/api/scene

Retrieves the supported point sprite size range by the current device's WebGL capabilities. This information is crucial for optimizing the rendering of point layers and ensuring compatibility across different devices.

```javascript
scene.getPointSizeRange();
```

--------------------------------

### Read Multi-band TIFF Data with GeoTIFF.js

Source: https://l7.antv.antgroup.com/en/api/source/raster_rgb

This asynchronous function reads multi-band TIFF data from a given URL using the `geotiff.js` library. It fetches the file as an ArrayBuffer, parses it with GeoTIFF, gets the image, and reads all raster bands. This is useful for directly loading complex raster datasets.

```typescript
async function getTiffData(url: string) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
  const image1 = await tiff.getImage();
  const bandsValues = await image1.readRasters();
  return bandsValues;
}

```

--------------------------------

### Implement ThreeLayer for 3D Scene Rendering

Source: https://l7.antv.antgroup.com/en/api/experiment/three

Demonstrates how to import the Three.js module, register the render service, and add a ThreeLayer to the L7 scene to render 3D objects like cubes.

```javascript
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as THREE from 'three';

scene.registerRenderService(ThreeRender);

const threeJSLayer = new ThreeLayer({
  onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
    threeScene.add(new THREE.AmbientLight(0xffffff));
    const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
    sunlight.position.set(0, 80000000, 100000000);
    threeScene.add(sunlight);

    let center = scene.getCenter();
    let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
    let cubeMaterial = new THREE.MeshNormalMaterial();
    let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
    threeScene.add(cube);
  },
})
.source(data)
.animate(true);

scene.addLayer(threeJSLayer);
```

--------------------------------

### Implementing LayerPopup in L7

Source: https://l7.antv.antgroup.com/en/api/component/layer_popup

Demonstrates how to initialize a LayerPopup instance and attach it to a PointLayer. It shows the configuration of items, fields, and trigger events to display data on hover.

```typescript
import { Scene, LayerPopup, PointLayer } from '@antv/l7';

const scene = new Scene({
  id: 'map',
  map: new GaodeMapV2({}),
});

scene.on('loaded', () => {
  const pointLayer = new PointLayer();
  pointLayer.source(
    [{ lng: 120, lat: 30, name: 'Test 1' }],
    { parser: { type: 'json', x: 'lng', y: 'lat' } }
  );
  scene.addLayer(pointLayer);
  const layerPopup = new LayerPopup({
    items: [
      {
        layer: pointLayer,
        fields: [
          {
            field: 'name',
            formatValue: (name?: string) => name.trim() ?? '-',
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(layerPopup);
});
```

--------------------------------

### Initialize Basic PlaneGeometry

Source: https://l7.antv.antgroup.com/en/api/other/plane

Demonstrates how to create a simple ground-fitting rectangle using GeometryLayer. It sets the center coordinates, dimensions, and visual properties like opacity and color.

```javascript
import { Scene, GeometryLayer } from '@antv/l7';

const layer = new GeometryLayer()
  .shape('plane')
  .style({
    opacity: 0.8,
    width: 0.074,
    height: 0.061,
    center: [120.1025, 30.2594],
  })
  .active(true)
  .color('#ff0');
scene.addLayer(layer);
```

--------------------------------

### Instantiate Earth Point Layer in L7

Source: https://l7.antv.antgroup.com/en/api/experiment/point

Demonstrates how to instantiate a point layer for Earth mode using PointLayer and EarthLayer from the @antv/l7 library. L7 automatically handles Earth mode conversions.

```javascript
import { PointLayer, EarthLayer } from '@antv/l7';
```

--------------------------------

### Configure Vector Tile Source with Parser Options

Source: https://l7.antv.antgroup.com/en/api/tile/vector_tile_layer

Explains how to configure the 'parser' options when creating a 'Source' for vector tiles. This includes setting the 'type' to 'mvt', 'maxZoom', and 'extent'.

```javascript
const source = new Source(url, {
  parser: {...}
})
```

--------------------------------

### Configuring GeoJsonVT Source

Source: https://l7.antv.antgroup.com/en/api/tile/geojsonvt_tile_layer

How to initialize a data source with the geojsonvt parser to enable client-side tile slicing.

```APIDOC
## Client-Side Vector Tile Configuration

### Description
Configures the L7 Source object to use the geojsonvt parser for client-side vector tile generation.

### Parameters
#### Request Body (Source Options)
- **parser** (object) - Required - Configuration for the data parser.
  - **type** (string) - Required - Must be set to 'geojsonvt'.
  - **maxZoom** (number) - Optional - Maximum zoom level to preserve detail (default: 14).
  - **geojsonvtOptions** (object) - Optional - Additional configuration for the geojson-vt library.

### Request Example
const source = new Source(data, {
  parser: {
    type: 'geojsonvt',
    maxZoom: 9,
    geojsonvtOptions: {
      tolerance: 3,
      extent: 4096
    }
  }
});
```

--------------------------------

### Configure Earth Atmosphere and Glow Layers

Source: https://l7.antv.antgroup.com/en/api/experiment/earth

Explains how to create specialized Earth layers like the atmosphere (atomSphere) which do not require a data source.

```javascript
const atomLayer = new EarthLayer().color('#2E8AE6').shape('atomSphere').style({
  opacity: 1,
});
```

--------------------------------

### L7 Source Initialization

Source: https://l7.antv.antgroup.com/en/api/source/source

Initializes the L7 Source with data and options for parsing and transformations.

```APIDOC
## POST /api/users

### Description
Initializes the L7 Source with data and options for parsing and transformations.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Request Body
- **data** (any) - The geographical data to be processed.
- **option** (object) - Configuration options for parsing and transformations.
  - **cluster** (boolean) - Whether to aggregate data (supported for point layers).
  - **clusterOptions** (object) - Aggregation configuration items.
  - **parser** (object) - Data parsing configuration.
  - **transforms** (array) - Data processing configuration.

### Request Example
```json
{
  "data": "your_data_here",
  "option": {
    "cluster": true,
    "clusterOptions": {},
    "parser": {},
    "transforms": []
  }
}
```

### Response
#### Success Response (200)
- **source** (object) - The initialized Source object.

#### Response Example
```json
{
  "message": "Source initialized successfully"
}
```
```

--------------------------------

### Load PMTiles in Scene

Source: https://l7.antv.antgroup.com/en/api/scene

Demonstrates how to integrate PMTiles with the L7 scene using the addProtocol method and configuring a Source object.

```typescript
import * as pmtiles from 'pmtiles';
const protocol = new pmtiles.Protocol();
const scene = new Scene({ id: 'map', map: new Map({ center: [11.2438, 43.7799], zoom: 12 }) });
scene.addProtocol('pmtiles', protocol.tile);
const source = new Source('pmtiles://https://mdn.alipayobjects.com/afts/file/A*HYvHSZ-wQmIAAAAAAAAAAAAADrd2AQ/protomaps(vector)ODbL_firenze.bin', {
  parser: {
    type: 'mvt',
    tileSize: 256,
    maxZoom: 14,
    extent: [-180, -85.051129, 179, 85.051129]
  }
});
```
Tokens:
Raw