antv-l7/docs/api/react/layer.zh.md

title	order
Layer 组件	2

markdown:docs/common/style.md

Layer 类型

React 各个组件名称和 L7 名称保持一致

• PointLayer
• PolygonLayer
• LineLayer
• HeatmapLayer
• RasterLayer
• ImageLayer
• CityBuildingLayer

使用方式

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 数据处理配置项

<PointLayer
  source={{
    data: [],
    parser: {
      type: 'geojson',
    },
    transforms: [],
  }}
/>

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 配置项

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 设置交互的颜色，指滑过或者选中的

<PointLayer
  active={{
    option: {
      color: 'red',
    },
  }}
/>

获取 layer 对象

onLayerLoaded

回调函数获取 layer, scene 对象

onLayerLoaded = (layer, scene) => {};

Context API

import { LayerContext } from '@antv/l7-react';
<LayerContext.Consumer>
  {(layer, scene) => {
    // use `scene` here
  }}
</LayerContext.Consumer>;

Layer 示例

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	事件类型 详情
handler	Function	null	layer 回调函数

示例

import { LayerEvent, PolygonLayer } from 'l7-react';
<PolygonLayer>
  <LayerEvent type="click" handler={() => {}} />
  <LayerEvent type="mousemove" handler={() => {}} />
</PolygonLayer>;