---
title: API
---
`markdown:docs/common/style.md`
## Layer 类型
React 各个组件名称和 L7 名称保持一致
- PointLayer
- PolygonLayer
- LineLayer
- HeatmapLayer
- RasterLayer
- ImageLayer
- CityBuildingLayer
### 使用方式
```jsx
import { PointLayer } '@antv/l7-react';
```
## Layer Props
| prop name | Type | Default | Description |
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
| options | `layer options` | | layer 配置项 |
| source | `sourceOption` | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
| size | `attributeOption` | | 图层大小属性 |
| style | `Object` | | 图层样式 |
| scale | `scale Option` | 默认会数值类设定 scale,数值类型 linear,字符串类型为 cat | 图层度量 |
| filter | `Function` | | 图层数据过滤方法 |
| select | `boolean` `interaction option` | | 图层选中高亮 |
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
| animate | `animate Option` | `null` | 图层动画配置 |
| onLayerLoaded | `Function` | | 图层添加完成后回调,用于获取 layer 对象 |
### layer options
| prop name | Type | Default | Description |
| --------- | --------- | ----------------------- | ------------------------------------------------ |
| name | `string` | | 图层名字,可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序, |
| minZoom | `number` | 0 | 设置 layer 最小可见等级,小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级,大于则不显示 |
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
### attribute Option
color, size, shape 等图形映射通道,通过下面参数配置
- field 映射字段,如果是常量设置为 null
- values 映射值 支持 常量,数组,回调函数,如果 values 为数组或回调需要设置 field 字段
详细[配置项](../layer/layer/#size)
### source Option
数据源配置项
- data 支持 geojson、csv、json
- parser 数据解析配置项
- transforms 数据处理配置项
详细[配置项](../source/source/#parser-1)
### scale Option
度量配置项
- values scaleCfg
**scaleCfg**
- key 为字段名 fieldname | attributeName
- value scale 配置项
```javascript
const scales = {
values: {
name: {
type: 'cat',
},
},
};
```
### interaction option
active,select 配置项
**option**
- color 设置交互的颜色,指滑过或者选中的
```jsx
<>
```
### 获取 layer 对象
#### onLayerLoaded
回调函数获取 layer, scene 对象
```javascript
onLayerLoaded = (layer, scene) => {};
```
#### Context API
```jsx
import { LayerContext } from '@antv/l7-react';
{(layer, scene) => {
// use `scene` here
}}
;
```
### Layer 示例
```jsx
import { PolygonLayer } from '@antv/l7-react';
;
```
## 子组件
### 事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) |
| handler | `Function` | `null` | layer 回调函数 |
### 示例
```jsx
import { LayerEvent, PolygonLayer } from 'l7-react';
{}} />
{}} />
;
```