docs: addd popup marker

docs/api/component/marker.en.md

@@ -69,8 +69,7 @@ el.textContent = data[i].v;
 el.style.background = getColor(data[i].v);
 new L7.Marker({
   element: el,
-})
+}).setLnglat([data[i].x * 1, data[i].y]);
-  .setLnglat([data[i].x * 1, data[i].y]
 ```
 
 #### 设置 popup

docs/api/layer/layer.en.md

@@ -126,7 +126,7 @@ scale('field', scaleConfig)
 
 将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
 
-```
+```javascript
 pointLayer.size(10); // 常量
 pointLayer.size('type'); // 使用字段映射到大小
 pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值

docs/api/layer/layer.zh.md

@@ -102,20 +102,48 @@ layer.source(data, {
 
 ### scale
 
-scale('field', scaleConfig)
+设置数据字段映射方法
-
-(field: string, scaleConfig: object)
-
-为指定的数据字段进行列定义，返回 layer 实例。
 
 - `field` 字段名。
 
 - `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
 
+#### scale 类型
+
+**连续型**
+
+- linear 线性
+- log
+- pow 指数型
+
+**连续分类型**
+
+- quantile 等分位
+- quantize 等间距
+
+**枚举型**
+
+- cat 枚举
+
 ```javascript
-{
+
-  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize
+layer.scale('name',{
-}
+  type: 'cat'
+})
+
+// 设置多个scale
+
+字段名为 key, value 为scale配置项
+
+layer.scale({
+  name:{
+    type: 'cat'
+  },
+  value: {
+    type: 'linear'
+  }
+})
+
 ```
 
 ## 视觉编码方法
@@ -126,7 +154,7 @@ scale('field', scaleConfig)
 
 将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
 
-```
+```javascript
 pointLayer.size(10); // 常量
 pointLayer.size('type'); // 使用字段映射到大小
 pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值

docs/api/react/layer.en.md

@@ -2,3 +2,142 @@
 title: Layer Component
 order: 2
 ---
+
+## Layer Props
+
+| prop name     | Type                           | Default                                                   | Description                             |
+| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
+| option        | `layer option`                 |                                                           | 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 高亮                         |
+| onLayerLoaded | `Function`                     |                                                           | 图层添加完成后回调，用于获取 layer 对象 |
+
+### layer option
+
+| prop name | Type      | Default                 | Description                              |
+| --------- | --------- | ----------------------- | ---------------------------------------- |
+| name      | `string`  |                         | 图层名字，可根据名称获取 layer           |
+| visible   | `boolean` | `true`                  | 图层是否可见                             |
+| zIndex    | `number`  | 0                       | 图层绘制顺序，                           |
+| minZoom   | `number`  | 0                       | 设置 layer 最小可见等级，小于则不显示    |
+| maxZoom   | `number`  | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
+
+### 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
+
+**option**
+
+- color 设置交互的颜色，指滑过或者选中的
+
+### 获取 layer 对象
+
+#### onLayerLoaded
+
+回调函数获取 layer, scene 对象
+
+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>;
+```

docs/api/react/layer.zh.md

@@ -3,30 +3,42 @@ title: Layer 组件
 order: 2
 ---
 
-## Scene Props
+## Layer Props
 
-| prop name   | Type               | Default | Description                             |
+| prop name     | Type                           | Default                                                   | Description                             |
-| ----------- | ------------------ | ------- | --------------------------------------- |
+| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
-| option      | `Object`           |         | layer 配置项                            |
+| option        | `layer option`                 |                                                           | layer 配置项                            |
-| source      |                    |         | 数据源配置项                            |
+| source        | `sourceOption`                 |                                                           | 数据源配置项                            |
-| color       | `attributeOption`  |         | 颜色通道                                |
+| color         | `attributeOption`              |                                                           | 颜色通道                                |
-| shape       | `attributeOption`  |         | 图层形状属性                            |
+| shape         | `attributeOption`              |                                                           | 图层形状属性                            |
-| size        | `attributeOption`  |         | 图层大小属性                            |
+| size          | `attributeOption`              |                                                           | 图层大小属性                            |
-| style       | `Object`           |         | 图层样式                                |
+| style         | `Object`                       |                                                           | 图层样式                                |
-| scale       | `Object`           |         | 图层度量                                |
+| scale         | `scale Option`                 | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量                                |
-| filter      | `Function`         |         | 图层数据过滤方法                        |
+| filter        | `Function`                     |                                                           | 图层数据过滤方法                        |
-| select      | `boolean` `Object` |         | 图层选中高亮                            |
+| select        | `boolean` `interaction option` |                                                           | 图层选中高亮                            |
-| active      | `boolean` `Object` | `false` | 图层 hover 高亮                         |
+| active        | `boolean` `interaction option` | `false`                                                   | 图层 hover 高亮                         |
-| onLayerLoad | `Function`         |         | 图层添加完成后回调，用于获取 layer 对象 |
+| onLayerLoaded | `Function`                     |                                                           | 图层添加完成后回调，用于获取 layer 对象 |
 
-### attributeOption
+### layer option
+
+| prop name | Type      | Default                 | Description                              |
+| --------- | --------- | ----------------------- | ---------------------------------------- |
+| name      | `string`  |                         | 图层名字，可根据名称获取 layer           |
+| visible   | `boolean` | `true`                  | 图层是否可见                             |
+| zIndex    | `number`  | 0                       | 图层绘制顺序，                           |
+| minZoom   | `number`  | 0                       | 设置 layer 最小可见等级，小于则不显示    |
+| maxZoom   | `number`  | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
+
+### attribute Option
 
 color, size, shape 等图形映射通道，通过下面参数配置
 
 - field 映射字段，如果是常量设置为 null
 - values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
 
-### sourceOption
+详细[配置项](../layer/layer/#size)
+
+### source Option
 
 数据源配置项
 
@@ -34,7 +46,57 @@ color, size, shape 等图形映射通道，通过下面参数配置
 - 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
+
+**option**
+
+- color 设置交互的颜色，指滑过或者选中的
+
+### 获取 layer 对象
+
+#### onLayerLoaded
+
+回调函数获取 layer, scene 对象
+
+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';
@@ -53,5 +115,29 @@ import { PolygonLayer } from '@antv/l7-react';
   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>;
+```

docs/api/react/marker.en.md

@@ -0,0 +1,35 @@
+---
+title: Marker
+order: 3
+---
+
+## Marker Props
+
+| prop name      | Type              | Default | Description       |
+| -------------- | ----------------- | ------- | ----------------- |
+| option         | `string`          | `null`  | marker 配置项     |
+| lnglat         | `Array | Object`  | `null`  | marker 经纬度位置 |
+| onMarkerLoaded | `Function`        | `null`  | layer 回调函数    |
+| children       | `React.ReactNode` | `null`  | 子组件            |
+
+### option
+
+| prop name | Type         | Default | Description                                                                    |
+| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
+| color     | `string`     | `blue`  | marker 配置项                                                                  |
+| anchor    | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
+| offsets   | `Array[x,y]` | `null`  | marker 位置偏移                                                                |
+| extData   | `object`     | `null`  | marker 属性数据                                                                |
+
+## 实例
+
+```jsx
+import { Marker} from '@antv/l7-react'
+<Marker
+ option = {{
+   color:'red'
+ }}
+ lnglat ={{[120,32]}}
+/>
+
+```

docs/api/react/marker.zh.md

@@ -0,0 +1,35 @@
+---
+title: Marker 组件
+order: 3
+---
+
+## Marker Props
+
+| prop name      | Type              | Default | Description       |
+| -------------- | ----------------- | ------- | ----------------- |
+| option         | `string`          | `null`  | marker 配置项     |
+| lnglat         | `Array | Object`  | `null`  | marker 经纬度位置 |
+| onMarkerLoaded | `Function`        | `null`  | layer 回调函数    |
+| children       | `React.ReactNode` | `null`  | 子组件            |
+
+### option
+
+| prop name | Type         | Default | Description                                                                    |
+| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
+| color     | `string`     | `blue`  | marker 配置项                                                                  |
+| anchor    | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
+| offsets   | `Array[x,y]` | `null`  | marker 位置偏移                                                                |
+| extData   | `object`     | `null`  | marker 属性数据                                                                |
+
+## 实例
+
+```jsx
+import { Marker} from '@antv/l7-react'
+<Marker
+ option = {{
+   color:'red'
+ }}
+ lnglat ={{[120,32]}}
+/>
+
+```

docs/api/react/popup.en.md

@@ -0,0 +1,28 @@
+---
+title: Popup 组件
+order: 4
+---
+
+## Popup Props
+
+| prop name | Type              | Default | Description      |
+| --------- | ----------------- | ------- | ---------------- |
+| option    | `string`          | `null`  | popup 配置项     |
+| lnglat    | `Array | Object`  | `null`  | popup 经纬度位置 |
+| children  | `React.ReactNode` | `null`  | 子组件           |
+
+### option
+
+| prop name    | Type         | Default | Description                                                                    |
+| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
+| closeButton  | `string`     | `true`  | 是否显示关闭按钮                                                               |
+| closeOnClick | `string`     | `blue`  | 点击是否关闭 popup                                                             |
+| anchor       | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
+| offsets      | `Array[x,y]` | `null`  | popup 位置偏移                                                                 |
+| className    | `string`     | `null`  | 样式名称                                                                       |
+
+```jsx
+import { Popup } from '@antv/l7-react';
+
+<Popup option={{}} lnglat={[]} />;
+```

docs/api/react/popup.zh.md

@@ -0,0 +1,28 @@
+---
+title: Popup 组件
+order: 4
+---
+
+## Popup Props
+
+| prop name | Type              | Default | Description      |
+| --------- | ----------------- | ------- | ---------------- |
+| option    | `string`          | `null`  | popup 配置项     |
+| lnglat    | `Array | Object`  | `null`  | popup 经纬度位置 |
+| children  | `React.ReactNode` | `null`  | 子组件           |
+
+### option
+
+| prop name    | Type         | Default | Description                                                                    |
+| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
+| closeButton  | `string`     | `true`  | 是否显示关闭按钮                                                               |
+| closeOnClick | `string`     | `blue`  | 点击是否关闭 popup                                                             |
+| anchor       | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
+| offsets      | `Array[x,y]` | `null`  | popup 位置偏移                                                                 |
+| className    | `string`     | `null`  | 样式名称                                                                       |
+
+```jsx
+import { Popup } from '@antv/l7-react';
+
+<Popup option={{}} lnglat={[]} />;
+```

docs/api/react/scene.en.md

@@ -1,12 +1,124 @@
 ---
-title: 高德地图
+title: Scene
 order: 1
 ---
 
-| prop name     | Type       | Default    | Description        |
+## Scene Props
-| ------------- | ---------- | ---------- | ------------------ |
+
-| style         | `Object`   | `null`     | scene css 样式     |
+| prop name     | Type       | Default    | Description                            |
-| className     | `string`   | `null`     | 样式名称           |
+| ------------- | ---------- | ---------- | -------------------------------------- |
-| map           | `Object`   | `Required` | 地图配置项         |
+| style         | `Object`   | `null`     | scene css 样式                         |
-| option        | `Object`   | `void`     | scene 配置项       |
+| className     | `string`   | `null`     | 样式名称                               |
-| onSceneLoaded | `Function` | `void`     | scene 加载回调函数 |
+| map           | `Object`   | `Required` | map option [地图配置项]()              |
+| option        | `Object`   | `void`     | scene option 配置项 [详情](#map-props) |
+| onSceneLoaded | `Function` | `void`     | scene 加载回调函数                     |
+
+### 高德地图场景
+
+```jsx
+import { AMapScene } from '@antv/l7-react';
+<AMapScene
+  option={{}}
+  map={{
+    style: 'light',
+    center: [112, 20],
+    token: '',
+  }}
+/>;
+```
+
+### Mapbox 地图场景
+
+```jsx
+import { MapboxScene } from '@antv/l7-react';
+<MapboxScene
+  option={{}}
+  map={{
+    style: 'light',
+    center: [112, 20],
+    token: '',
+  }}
+/>;
+```
+
+### map option
+
+地图配置项
+
+| option   | Type       | Default            | Description                                                                                                     |
+| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
+| style    | `string`   | `light`            | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式                                    |
+| token    | `string`   | `Required`         | 地图密钥，需要平台申请                                                                                          |
+| plugin   | `string[]` | `null`             | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` |
+| center   | `number`   | null               | 地图中心点                                                                                                      |
+| pitch    | `number`   | 0                  | 地图倾角                                                                                                        |
+| rotation | `number`   | 0                  | 地图旋转角                                                                                                      |
+| zoom     | `number`   | null               | 地图缩放等级                                                                                                    |
+| maxZoom  | `number`   | 0                  | 最大缩放等级                                                                                                    |
+| minZoom  | `number`   | AMap 18 ,Mapbox 20 | 最小缩放等级                                                                                                    |
+
+其他配置项见地图文档
+高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map)
+
+Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map)
+
+其他配置项和底图一致
+
+### scene option
+
+| option                | Type      | Default      | Description                                         |
+| --------------------- | --------- | ------------ | --------------------------------------------------- |
+| logoPosition          | string    | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` |
+| logoVisible           | `boolean` | `true`       | 是否显示 logo                                       |
+| antialias             | `boolean` | `true`       | 是否开启抗锯齿                                      |
+| preserveDrawingBuffer | `boolean` | `false`      | 是否保留缓冲区数据                                  |
+
+### 获取 scene 对象
+
+#### onSceneLoaded
+
+onSceneLoaded 回调函数能够取到 scene 对象
+
+#### Context API
+
+```jsx
+import { SceneContext } from '@antv/l7-react';
+<SceneContext.Consumer>
+  {(scene) => {
+    // use `scene` here
+  }}
+</SceneContext.Consumer>;
+```
+
+## 子组件
+
+### LoadImage
+
+| prop name | Type     | Default | Description |
+| --------- | -------- | ------- | ----------- |
+| name      | `string` | `null`  | 图标名称    |
+| url       | `string` | `null`  | 图标 url    |
+
+```jsx
+import LoadImage from '@antv/l7-react';
+<LoadImage name="marker" url="xxx.png" />;
+```
+
+### Layer 组件
+
+每个图层作为 scene 子组件添加
+
+###  事件组件
+
+| prop name | Type       | Default | Description                         |
+| --------- | ---------- | ------- | ----------------------------------- |
+| type      | `string`   | `null`  | 事件类型 [详情](../scene/#地图事件) |
+| handler   | `Function` | `null`  | scene 回调函数                      |
+
+```javascript
+import { SceneEvent, MapboxScene } from '@antv/l7-react';
+
+<MapboxScene>
+  <SceneEvent type="click" handler={() => {}} />
+</MapboxScene>;
+```

docs/api/react/scene.zh.md

@@ -1,5 +1,5 @@
 ---
-title: 高德地图
+title: Scene 组件
 order: 1
 ---
 
@@ -13,6 +13,8 @@ order: 1
 | option        | `Object`   | `void`     | scene option 配置项 [详情](#map-props) |
 | onSceneLoaded | `Function` | `void`     | scene 加载回调函数                     |
 
+### 高德地图场景
+
 ```jsx
 import { AMapScene } from '@antv/l7-react';
 <AMapScene
@@ -25,6 +27,20 @@ import { AMapScene } from '@antv/l7-react';
 />;
 ```
 
+### Mapbox 地图场景
+
+```jsx
+import { MapboxScene } from '@antv/l7-react';
+<MapboxScene
+  option={{}}
+  map={{
+    style: 'light',
+    center: [112, 20],
+    token: '',
+  }}
+/>;
+```
+
 ### map option
 
 地图配置项
@@ -56,3 +72,53 @@ Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/
 | logoVisible           | `boolean` | `true`       | 是否显示 logo                                       |
 | antialias             | `boolean` | `true`       | 是否开启抗锯齿                                      |
 | preserveDrawingBuffer | `boolean` | `false`      | 是否保留缓冲区数据                                  |
+
+### 获取 scene 对象
+
+#### onSceneLoaded
+
+onSceneLoaded 回调函数能够取到 scene 对象
+
+#### Context API
+
+```jsx
+import { SceneContext } from '@antv/l7-react';
+<SceneContext.Consumer>
+  {(scene) => {
+    // use `scene` here
+  }}
+</SceneContext.Consumer>;
+```
+
+## 子组件
+
+### LoadImage
+
+| prop name | Type     | Default | Description |
+| --------- | -------- | ------- | ----------- |
+| name      | `string` | `null`  | 图标名称    |
+| url       | `string` | `null`  | 图标 url    |
+
+```jsx
+import LoadImage from '@antv/l7-react';
+<LoadImage name="marker" url="xxx.png" />;
+```
+
+### Layer 组件
+
+每个图层作为 scene 子组件添加
+
+###  事件组件
+
+| prop name | Type       | Default | Description                         |
+| --------- | ---------- | ------- | ----------------------------------- |
+| type      | `string`   | `null`  | 事件类型 [详情](../scene/#地图事件) |
+| handler   | `Function` | `null`  | scene 回调函数                      |
+
+```javascript
+import { SceneEvent, MapboxScene } from '@antv/l7-react';
+
+<MapboxScene>
+  <SceneEvent type="click" handler={() => {}} />
+</MapboxScene>;
+```

docs/api/react/start.en.md

@@ -2,3 +2,68 @@
 title: Get Started
 order: 0
 ---
+
+### 安装
+
+```bash
+ npm i @antv/l7-react
+```
+
+### 示例
+
+```javascript
+import { LineLayer, AMapScene } from '@antv/l7-react';
+export default React.memo(function Map() {
+  const [data, setData] = React.useState();
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json',
+      );
+      const raw = await response.json();
+      setData(raw);
+    };
+    fetchData();
+  }, []);
+  return (
+    <>
+      <AMapScene
+        map={{
+          center: [110.19382669582967, 50.258134],
+          pitch: 0,
+          style: 'dark',
+          zoom: 1,
+        }}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        {data && (
+          <LineLayer
+            key={'2'}
+            source={{
+              data,
+            }}
+            size={{
+              values: 1,
+            }}
+            color={{
+              values: '#fff',
+            }}
+            shape={{
+              values: 'line',
+            }}
+            style={{
+              opacity: 1,
+            }}
+          />
+        )}
+      </AMapScene>
+    </>
+  );
+});
+```

docs/api/source/source.zh.md

@@ -179,11 +179,11 @@ layer
   .source(data, {
     transforms: [
       {
-      type: 'join',
+        type: 'join',
-      sourceField: 'name', //data1 对应字段名
+        sourceField: 'name', //data1 对应字段名
-      targetField: 'city', // data 对应字段名 绑定到的地理数据
+        targetField: 'city', // data 对应字段名 绑定到的地理数据
-      data: data2
+        data: data2,
-      }
+      },
     ],
   })
   .color('value'); // 可以采用data1的value字段进行数据到颜色的映射

packages/react/src/component/LayerAttribute/Layer.tsx

@@ -16,6 +16,7 @@ import {
   Filter,
   ILayerProps,
   Scale,
+  Select,
   Shape,
   Size,
   Source,
@@ -33,9 +34,10 @@ export default function BaseLayer(type: string, props: ILayerProps) {
     size,
     scale,
     active,
+    select,
     filter,
     options,
-    onLayerLoad,
+    onLayerLoaded,
   } = props;
   const mapScene = (useSceneValue() as unknown) as Scene;
   const [layer, setLayer] = useState<ILayer>();
@@ -61,8 +63,8 @@ export default function BaseLayer(type: string, props: ILayerProps) {
         l = new PolygonLayer(options);
     }
     l.on('inited', () => {
-      if (onLayerLoad) {
+      if (onLayerLoaded) {
-        onLayerLoad(l, mapScene);
+        onLayerLoaded(l, mapScene);
       }
     });
     setLayer(l);
@@ -110,6 +112,7 @@ export default function BaseLayer(type: string, props: ILayerProps) {
       <Shape layer={layer} shape={shape} />
       {style && <Style layer={layer} style={style} />}
       {active && <Active layer={layer} active={active} />}
+      {select && <Select layer={layer} select={select} />}
       {filter && <Filter layer={layer} filter={filter} />}
       {/* LayerContext主要传入LayerEvent组件 */}
       {props.children}

packages/react/src/component/LayerAttribute/Select.tsx

@@ -0,0 +1,17 @@
+import { IActiveOption, ILayer } from '@antv/l7';
+import * as React from 'react';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  select: {
+    option: IActiveOption | boolean;
+  };
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, select } = props;
+  useEffect(() => {
+    layer.select(select.option);
+  }, [JSON.stringify(select)]);
+  return null;
+});

packages/react/src/component/LayerAttribute/index.ts

@@ -12,6 +12,7 @@ import Active from './Active';
 import Color from './Color';
 import Filter from './Filter';
 import Scale from './Scale';
+import Select from './Select';
 import Shape from './Shape';
 import Size from './Size';
 import Source from './Source';
@@ -71,9 +72,10 @@ export interface ILayerProps {
   size?: Partial<IAttributeOptions>;
   style?: Partial<IStyleOptions>;
   active?: IActiveOptions;
+  select?: IActiveOptions;
   filter?: Partial<IAttributeOptions>;
-  onLayerLoad?: (layer: ILayer, scene: Scene) => void;
+  onLayerLoaded?: (layer: ILayer, scene: Scene) => void;
   children?: React.ReactNode;
 }
 
-export { Active, Color, Filter, Source, Size, Shape, Style, Scale };
+export { Active, Color, Filter, Source, Size, Shape, Style, Scale, Select };

packages/react/src/component/LayerEvent.tsx

@@ -12,10 +12,11 @@ export const LayerEvent = React.memo((props: ILayerProps) => {
   const layer = (useLayerValue() as unknown) as ILayer;
 
   useEffect(() => {
+    layer.off(type, handler);
     layer.on(type, handler);
     return () => {
       layer.off(type, handler);
     };
-  }, [type]);
+  }, [type, handler]);
   return null;
 });

packages/react/src/component/Marker.tsx

@@ -16,7 +16,7 @@ import { SceneContext } from './SceneContext';
 interface IMarkerProps {
   option?: IMarkerOption;
   lnglat: ILngLat | number[];
-  onMarkerLoad?: (marker: IMarker) => void;
+  onMarkerLoaded?: (marker: IMarker) => void;
   children?: React.ReactNode;
 }
 export default class MarkerComponet extends React.PureComponent<IMarkerProps> {
@@ -28,7 +28,7 @@ export default class MarkerComponet extends React.PureComponent<IMarkerProps> {
     this.el = document.createElement('div');
   }
   public componentDidMount() {
-    const { lnglat, children, option, onMarkerLoad } = this.props;
+    const { lnglat, children, option, onMarkerLoaded } = this.props;
     const marker = new Marker(option);
     if (lnglat) {
       marker.setLnglat(lnglat as ILngLat | IPoint);
@@ -37,8 +37,8 @@ export default class MarkerComponet extends React.PureComponent<IMarkerProps> {
       marker.setElement(this.el);
     }
     this.marker = marker;
-    if (onMarkerLoad) {
+    if (onMarkerLoaded) {
-      onMarkerLoad(marker);
+      onMarkerLoaded(marker);
     }
     this.scene.addMarker(marker);
   }

packages/react/src/component/SceneEvent.tsx

@@ -7,7 +7,7 @@ interface ILayerProps {
   type: string;
   handler: (...args: any[]) => void;
 }
-export const SceneEvent = React.memo((props: ILayerProps) => {
+const SceneEvent = React.memo((props: ILayerProps) => {
   const { type, handler } = props;
   const mapScene = (useSceneValue() as unknown) as Scene;
 
@@ -19,3 +19,5 @@ export const SceneEvent = React.memo((props: ILayerProps) => {
   }, [type]);
   return null;
 });
+
+export default SceneEvent;

packages/react/src/index.ts

@@ -12,3 +12,5 @@ export { useLayerValue, LayerContext } from './component/LayerContext';
 export { ColorComponent } from './component/Legend/color';
 export { default as Popup } from './component/Popup';
 export { default as Marker } from './component/Marker';
+export { default as SceneEvent } from './component/SceneEvent';
+export { default as LoadImage } from './component/LoadImage';

stories/React/components/Scene.tsx

@@ -1,4 +1,12 @@
-import { AMapScene, LineLayer, Marker, Popup } from '@antv/l7-react';
+import {
+  AMapScene,
+  LayerContext,
+  LineLayer,
+  Marker,
+  Popup,
+  SceneContext,
+  SceneEvent,
+} from '@antv/l7-react';
 import * as React from 'react';
 
 export default React.memo(function Map() {
@@ -30,6 +38,18 @@ export default React.memo(function Map() {
           bottom: 0,
         }}
       >
+        <SceneContext.Consumer>
+          {(scene) => {
+            console.log(scene);
+            return null;
+          }}
+        </SceneContext.Consumer>
+        <SceneEvent
+          type="click"
+          handler={() => {
+            console.log('click');
+          }}
+        />
         <Popup lnglat={[110.1938, 50.25] as number[]}>
           <p>122222</p>
         </Popup>
@@ -53,8 +73,14 @@ export default React.memo(function Map() {
           style={{
             opacity: 1,
           }}
-        />
+        >
-        )}
+          <LayerContext.Consumer>
+            {(layer) => {
+              console.log(layer);
+              return null;
+            }}
+          </LayerContext.Consumer>
+        </LineLayer>
       </AMapScene>
     </>
   );