--- title: Layer 组件 order: 2 --- `markdown:docs/common/style.md` ## Layer 类型 React 各个组件名称和 L7 名称保持一致 - PointLayer - PolygonLayer - LineLayer - HeatmapLayer - RasterLayer - ImageLayer - CityBuildingLayer ### 使用方式 ```jsx import { PointLayer } '@antv/l7-react'; ``` ## Layer Props ### options 图层配置 _layer options_ \_ **可选** `markdown:docs/common/layer/options.md` ### source 图层数据 _sourceOption_ **必选** _default:_ `0` 数据源配置项 - data 支持 geojson、csv、json - parser 数据解析配置项 - transforms 数据处理配置项 ```jsx ``` ### color 图层颜色 _attributeOption_ **必选** _default:_ `0` ### shape 图形形状 _attributeOption_ **必选** _default:_ `0` ### size 图形大小 _attributeOption_ **必选** ### select 选中高亮 _interaction option_ **可选** ### active 滑过高亮 _interaction option_ **可选** ### animate 动画 _animate Option_ **可选** ### style 样式 _styleOption_ **可选** `markdown:docs/common/layer/layer_style.md` ### scale 度量 _scale Option_ **可选** 度量配置项 - values scaleCfg **scaleCfg** - key 为字段名 fieldname | attributeName - value scale 配置项 ```javascript const scales = { values: { name: { type: 'cat', }, }, }; ``` ### onLayerLoaded 图层回调 _Function_ **可选** 获取图层对象方法 ### attribute Option color, size, shape 等图形映射通道，通过下面参数配置 - field 映射字段，如果是常量设置为 null - values 映射值支持常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段 ### scale Option ### 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'; {}} /> {}} /> ; ```