p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: addd popup marker

This commit is contained in:
thinkinggis 2020-03-09 01:04:27 +08:00
parent 96ba033d01
commit afabb75ca0
21 changed files with 731 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/api/component/marker.en.md
View File

@ -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

2
docs/api/layer/layer.en.md
View File

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

46
docs/api/layer/layer.zh.md
View File

@ -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]); // 使用字段映射到大小，并指定最大值和最小值

139
docs/api/react/layer.en.md
View File

@ -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>;
```

120
docs/api/react/layer.zh.md
View File

@ -3,30 +3,42 @@ title: Layer 组件
order: 2
---
## Scene Props
## Layer Props
| prop name | Type | Default | Description |
| ----------- | ------------------ | ------- | --------------------------------------- |
| option | `Object` | | layer 配置项 |
| source | | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
| size | `attributeOption` | | 图层大小属性 |
| style | `Object` | | 图层样式 |
| scale | `Object` | | 图层度量 |
| filter | `Function` | | 图层数据过滤方法 |
| select | `boolean` `Object` | | 图层选中高亮 |
| active | `boolean` `Object` | `false` | 图层 hover 高亮 |
| onLayerLoad | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
| 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 对象 |
### 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>;
```

35
docs/api/react/marker.en.md Normal file
View File

@ -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]}}
/>
```

35
docs/api/react/marker.zh.md Normal file
View File

@ -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]}}
/>
```

28
docs/api/react/popup.en.md Normal file
View File

@ -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={[]} />;
```

28
docs/api/react/popup.zh.md Normal file
View File

@ -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={[]} />;
```

128
docs/api/react/scene.en.md
View File

@ -1,12 +1,124 @@
---
title: 高德地图
title: Scene
order: 1
---
| prop name | Type | Default | Description |
| ------------- | ---------- | ---------- | ------------------ |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| map | `Object` | `Required` | 地图配置项 |
| option | `Object` | `void` | scene 配置项 |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
## Scene Props
| prop name | Type | Default | Description |
| ------------- | ---------- | ---------- | -------------------------------------- |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| 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>;
```

68
docs/api/react/scene.zh.md
View File

@ -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>;
```

65
docs/api/react/start.en.md
View File

@ -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>
</>
);
});
```

10
docs/api/source/source.zh.md
View File

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

9
packages/react/src/component/LayerAttribute/Layer.tsx
View File

@ -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) {
onLayerLoad(l, mapScene);
if (onLayerLoaded) {
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}

17
packages/react/src/component/LayerAttribute/Select.tsx Normal file
View File

@ -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;
});

6
packages/react/src/component/LayerAttribute/index.ts
View File

@ -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 };

3
packages/react/src/component/LayerEvent.tsx
View File

@ -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;
});

8
packages/react/src/component/Marker.tsx
View File

@ -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) {
onMarkerLoad(marker);
if (onMarkerLoaded) {
onMarkerLoaded(marker);
}
this.scene.addMarker(marker);
}

4
packages/react/src/component/SceneEvent.tsx
View File

@ -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;

2
packages/react/src/index.ts
View File

@ -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';

32
stories/React/components/Scene.tsx
View File

@ -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>
</>
);