mirror of https://gitee.com/antv-l7/antv-l7
173 lines
6.3 KiB
Markdown
173 lines
6.3 KiB
Markdown
---
|
||
title: Layer 组件
|
||
order: 2
|
||
---
|
||
|
||
## 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') |
|
||
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
||
|
||
### 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';
|
||
<LayerContext.Consumer>
|
||
{(layer, scene) => {
|
||
// use `scene` here
|
||
}}
|
||
</LayerContext.Consumer>;
|
||
```
|
||
|
||
### Layer 示例
|
||
|
||
```jsx
|
||
import { PolygonLayer } from '@antv/l7-react';
|
||
<PolygonLayer
|
||
key={'2'}
|
||
source={{
|
||
data,
|
||
}}
|
||
color={{
|
||
field: 'name',
|
||
values: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
|
||
}}
|
||
shape={{
|
||
values: 'fill',
|
||
}}
|
||
style={{
|
||
opacity: 1,
|
||
}}
|
||
active={{
|
||
option: {
|
||
color: 'red',
|
||
},
|
||
}}
|
||
/>;
|
||
```
|
||
|
||
## 子组件
|
||
|
||
### 事件组件
|
||
|
||
| prop name | Type | Default | Description |
|
||
| --------- | ---------- | ------- | ----------------------------------------- |
|
||
| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) |
|
||
| handler | `Function` | `null` | layer 回调函数 |
|
||
|
||
### 示例
|
||
|
||
```jsx
|
||
import { LayerEvent, PolygonLayer } from 'l7-react';
|
||
<PolygonLayer>
|
||
<LayerEvent type="click" handler={() => {}} />
|
||
<LayerEvent type="mousemove" handler={() => {}} />
|
||
</PolygonLayer>;
|
||
```
|