mirror of https://gitee.com/antv-l7/antv-l7
docs(docs): update api
This commit is contained in:
thinkinggis
parent
a5cb8bd7a4
commit
a7695cb91e
|
|
@ -3,11 +3,30 @@ title: Layer Component
|
|||
order: 2
|
||||
---
|
||||
|
||||
## Layer 类型
|
||||
|
||||
React 各个组件名称和 L7 名称保持一致
|
||||
|
||||
- PointLayer
|
||||
- PolygonLayer
|
||||
- LineLayer
|
||||
- HeatmapLayer
|
||||
- RasterLayer
|
||||
- ImageLayer
|
||||
- CityBuildingLayer
|
||||
|
||||
### 使用方式
|
||||
|
||||
```jsx
|
||||
import { PointLayer } '@antv/l7-react';
|
||||
|
||||
```
|
||||
|
||||
## Layer Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
||||
| option | `layer option` | | layer 配置项 |
|
||||
| options | `layer options` | | layer 配置项 |
|
||||
| source | `sourceOption` | | 数据源配置项 |
|
||||
| color | `attributeOption` | | 颜色通道 |
|
||||
| shape | `attributeOption` | | 图层形状属性 |
|
||||
|
|
@ -17,17 +36,21 @@ order: 2
|
|||
| filter | `Function` | | 图层数据过滤方法 |
|
||||
| select | `boolean` `interaction option` | | 图层选中高亮 |
|
||||
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
|
||||
| animate | `animate Option` | `null` | 图层动画配置 |
|
||||
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
||||
|
||||
### layer option
|
||||
### layer options
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| --------- | --------- | ----------------------- | ---------------------------------------- |
|
||||
| name | `string` | | 图层名字，可根据名称获取 layer |
|
||||
| visible | `boolean` | `true` | 图层是否可见 |
|
||||
| zIndex | `number` | 0 | 图层绘制顺序， |
|
||||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | --------- | ----------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| name | `string` | | 图层名字，可根据名称获取 layer |
|
||||
| visible | `boolean` | `true` | 图层是否可见 |
|
||||
| zIndex | `number` | 0 | 图层绘制顺序， |
|
||||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
||||
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
|
||||
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
||||
|
||||
### attribute Option
|
||||
|
||||
|
|
@ -71,19 +94,25 @@ const scales = {
|
|||
|
||||
### interaction option
|
||||
|
||||
active，select 配置项
|
||||
|
||||
**option**
|
||||
|
||||
- color 设置交互的颜色，指滑过或者选中的
|
||||
|
||||
```jsx
|
||||
<>
|
||||
```
|
||||
|
||||
### 获取 layer 对象
|
||||
|
||||
#### onLayerLoaded
|
||||
|
||||
回调函数获取 layer, scene 对象
|
||||
|
||||
onLayerLoaded=(layer, scene) =>{
|
||||
|
||||
}
|
||||
```javascript
|
||||
onLayerLoaded = (layer, scene) => {};
|
||||
```
|
||||
|
||||
#### Context API
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ import { PointLayer } '@antv/l7-react';
|
|||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
||||
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
|
||||
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
|
||||
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
||||
|
||||
### attribute Option
|
||||
|
|
|
|||
|
|
@ -3,15 +3,23 @@ title: Scene
|
|||
order: 1
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||
|
||||
```javascript
|
||||
import { MapboxScene, AmapScene } from '@antv/l7-react';
|
||||
```
|
||||
|
||||
## 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 加载回调函数 |
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | -------------- | ---------- | ----------------------------------------- |
|
||||
| style | `Object` | `null` | scene css 样式 |
|
||||
| className | `string` | `null` | 样式名称 |
|
||||
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
|
||||
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
|
||||
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
|
||||
|
||||
### 高德地图场景
|
||||
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@ import { MapboxScene, AmapScene } from '@antv/l7-react';
|
|||
|
||||
## Scene Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | -------------- | ---------- | -------------------------------------- |
|
||||
| style | `Object` | `null` | scene css 样式 |
|
||||
| className | `string` | `null` | 样式名称 |
|
||||
| map | `map option` | `Required` | map option [地图配置项]() |
|
||||
| option | `scene option` | `void` | scene option 配置项 [详情](#map-props) |
|
||||
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | -------------- | ---------- | ----------------------------------------- |
|
||||
| style | `Object` | `null` | scene css 样式 |
|
||||
| className | `string` | `null` | 样式名称 |
|
||||
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
|
||||
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
|
||||
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
|
||||
|
||||
### 高德地图场景
|
||||
|
||||
|
|
|
|||
|
|
@ -134,5 +134,4 @@ const scene = new Scene({
|
|||
});
|
||||
```
|
||||
|
||||
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />
|
||||
|
||||
[d离线，无token使用mapbox demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />
|
||||
|
|
|
|||
|
|
@ -132,5 +132,4 @@ const scene = new Scene({
|
|||
});
|
||||
```
|
||||
|
||||
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />
|
||||
|
||||
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
|
|
|||
|
|
@ -86,79 +86,6 @@ const scene = new Scene({
|
|||
});
|
||||
|
||||
```
|
||||
|
||||
### React中使用
|
||||
|
||||
React 组件待开发，期待和大家共建l7-react 目前可以暂时以 Submodule 方式使用
|
||||
|
||||
```
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
import { AMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMapExample extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new AMap({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
}),
|
||||
});
|
||||
const layer = new PolygonLayer({});
|
||||
|
||||
layer
|
||||
.source(await response.json())
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。
|
||||
|
||||
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
|
||||
|
||||
## 不同项目使用模板
|
||||
|
||||
不同项目模板在CodeSandbox你可以预览，也可以下载到本地
|
||||
|
|
|
|||
Loading…
Reference in New Issue