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

docs: react scene

This commit is contained in:
thinkinggis 2020-03-08 15:19:21 +08:00
parent a6f004b65e
commit 56e535cac3
5 changed files with 67 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,37 +4,42 @@ order: 1
--- ---
## Scene Props ## Scene Props
| prop name | Type | Default | Description | | prop name | Type | Default | Description |
| ---- | ---- | ---- | ---- | | ----------- | ------------------ | ------- | --------------------------------------- |
|option |`Object`||layer配置项| | option | `Object` | | layer 配置项 |
|source|||数据源配置项| | source | | | 数据源配置项 |
|color |`attributeOption`||颜色通道| | color | `attributeOption` | | 颜色通道 |
|shape |`attributeOption`||图层形状属性| | shape | `attributeOption` | | 图层形状属性 |
|size |`attributeOption`||图层大小属性| | size | `attributeOption` | | 图层大小属性 |
|style |`Object`||图层样式| | style | `Object` | | 图层样式 |
|scale |`Object`||图层度量| | scale | `Object` | | 图层度量 |
|filter |`Function`||图层数据过滤方法| | filter | `Function` | | 图层数据过滤方法 |
|select |`boolean` `Object`||图层选中高亮| | select | `boolean` `Object` | | 图层选中高亮 |
|active | `boolean` `Object`|`false`|图层hover高亮| | active | `boolean` `Object` | `false` | 图层 hover 高亮 |
|onLayerLoad|`Function`||图层添加完成后回调，用于获取layer对象| | onLayerLoad | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
### attributeOption ### attributeOption
color, size, shape 等图形映射通道配置项 color, size, shape 等图形映射通道配置项
#### option #### option
- field 映射字段，如果是常量设置为 null - field 映射字段，如果是常量设置为 null
- values 映射值 支持 常量，数组，回调函数，如果values为数组或回调需要设置field字段 - values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
### sourceOption ### sourceOption
数据源配置项 数据源配置项
#### Option #### Option
- data 支持 geojson、csv、json - data 支持 geojson、csv、json
- parser 数据解析配置项 - parser 数据解析配置项
- transforms 数据处理配置项 - transforms 数据处理配置项
```jsx ```jsx
import {PolygonLayer } from '@antv/l7-react'; import { PolygonLayer } from '@antv/l7-react';
<PolygonLayer <PolygonLayer
key={'2'} key={'2'}
source={{ source={{
@ -42,14 +47,7 @@ import {PolygonLayer } from '@antv/l7-react';
}} }}
color={{ color={{
field: 'name', field: 'name',
values: [ values: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
],
}} }}
shape={{ shape={{
values: 'fill', values: 'fill',
@ -57,5 +55,5 @@ import {PolygonLayer } from '@antv/l7-react';
style={{ style={{
opacity: 1, opacity: 1,
}} }}
/> />;
``` ```

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

@ -2,10 +2,11 @@
title: 高德地图 title: 高德地图
order: 1 order: 1
--- ---
| prop name | Type | Default | Description | | prop name | Type | Default | Description |
| ---- | ---- | ---- | ---- | ---- | | ------------- | ---------- | ---------- | ------------------ |
| style | `Object` | `null` | scene css样式 | | style | `Object` | `null` | scene css 样式 |
| className | `string` |`null` | 样式名称 | | className | `string` | `null` | 样式名称 |
| map | `Object` |`Required` | 地图配置项 | | map | `Object` | `Required` | 地图配置项 |
| option | `Object` | `void` | scene 配置项 | | option | `Object` | `void` | scene 配置项 |
| onSceneLoaded | `Function` |`void` | scene加载回调函数 | | onSceneLoaded | `Function` | `void` | scene 加载回调函数 |

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

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

1
stories/Layers/components/Point.tsx
View File

@ -53,7 +53,6 @@ export default class Point3D extends React.Component {
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
const hander = () => { const hander = () => {
console.log('click'); console.log('click');
}; };
scene.on('click', hander); scene.on('click', hander);
this.scene = scene; this.scene = scene;