mirror of https://gitee.com/antv-l7/antv-l7
docs: add draw demo add doc
This commit is contained in:
thinkinggis
parent
ef51064b00
commit
176ce8aa03
|
|
@ -2,3 +2,273 @@
|
|||
title: Draw Component
|
||||
order: 2
|
||||
---
|
||||
|
||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||
|
||||
# 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { DrawControl } from '@antv/l7-draw';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-Draw -->
|
||||
<script src="https://unpkg.com/@antv/l7-draw"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### 参数
|
||||
|
||||
```javascript
|
||||
const control = new DrawControl(scene, option);
|
||||
```
|
||||
|
||||
#### scene
|
||||
|
||||
scene 对象
|
||||
|
||||
#### options
|
||||
|
||||
control 配置项
|
||||
|
||||
| name | Type | Default | Description |
|
||||
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
||||
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
|
||||
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
|
||||
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
|
||||
| style | | | 地图绘制样式 |
|
||||
|
||||
**controlOptions**
|
||||
UI 组件配置项
|
||||
|
||||
- point `boolean | drawOption` 绘制点工具配置
|
||||
- line `boolean | drawOption` 绘制线工具配置
|
||||
- polygon `boolean | drawOption` 绘制面工具配置
|
||||
- circle `boolean | drawOption` 绘制圆工具配置
|
||||
- rect `boolean | drawOption` 绘制矩形工具配置
|
||||
- delete `boolean | drawOption` 添加删除工具
|
||||
|
||||
默认配置
|
||||
|
||||
```
|
||||
{
|
||||
point: true,
|
||||
line: true,
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: true
|
||||
}
|
||||
```
|
||||
|
||||
示例
|
||||
|
||||
```
|
||||
{
|
||||
point: false,
|
||||
line: {
|
||||
editEnable: false,
|
||||
},
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: false
|
||||
```
|
||||
|
||||
### 添加到地图
|
||||
|
||||
```javascript
|
||||
scene.addControl(control);
|
||||
```
|
||||
|
||||
### 从地图中移除
|
||||
|
||||
```javascript
|
||||
scene.removeControl(control);
|
||||
```
|
||||
|
||||
### Draw Type
|
||||
|
||||
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
|
||||
|
||||
#### DrawCircle
|
||||
|
||||
绘制圆形
|
||||
|
||||
```javascript
|
||||
import { DrawCircle } from '@antv/l7-draw';
|
||||
const drawCircle = new DrawCircle(scene);
|
||||
drawCircle.enable();
|
||||
```
|
||||
|
||||
#### DrawRect
|
||||
|
||||
绘制四边形
|
||||
|
||||
```javascript
|
||||
import { DrawRect } from '@antv/l7-draw';
|
||||
const drawRect = new DrawRect(scene);
|
||||
drawRect.enable();
|
||||
```
|
||||
|
||||
#### DrawLine
|
||||
|
||||
绘制路径
|
||||
|
||||
```javascript
|
||||
import { DrawLine } from '@antv/l7-draw';
|
||||
const drawLine = new DrawLine(scene);
|
||||
drawLine.enable();
|
||||
```
|
||||
|
||||
#### DrawPoint
|
||||
|
||||
绘制点
|
||||
|
||||
```javascript
|
||||
import { DrawPoint } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPoint(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
#### DrawPolygon
|
||||
|
||||
绘制多边形
|
||||
|
||||
```javascript
|
||||
import { DrawPolygon } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPolygon(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
### 配置项 DrawOption
|
||||
|
||||
- editEnable boolean 是否允许编辑
|
||||
- selectEnable boolean 是否允许选中
|
||||
|
||||
### 方法
|
||||
|
||||
#### enable
|
||||
|
||||
开始编辑，绘制完成之后会自动结束。
|
||||
|
||||
#### disable
|
||||
|
||||
结束编辑
|
||||
|
||||
### 事件
|
||||
|
||||
#### draw.create
|
||||
|
||||
绘制完成时触发该事件
|
||||
|
||||
#### draw.delete
|
||||
|
||||
图形删除时触发该事件
|
||||
|
||||
#### draw.update
|
||||
|
||||
图形更新时触发该事件，图形的平移，顶点的编辑
|
||||
|
||||
### style
|
||||
|
||||
- active 绘制过程中高亮颜色
|
||||
- normal 正常显示状态
|
||||
|
||||
```javascript
|
||||
const style = {
|
||||
active: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 5,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
color: '#fbb03b',
|
||||
size: 1,
|
||||
style: {
|
||||
opacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
polygon: {
|
||||
shape: 'fill',
|
||||
color: '#fbb03b',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#fbb03b',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
normal: {
|
||||
polygon: {
|
||||
type: 'PolygonLayer',
|
||||
shape: 'fill',
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#3bb2d0',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'solid',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
size: 1,
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
normal_point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
mid_point: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 3,
|
||||
style: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: HightLight
|
||||
order: 0
|
||||
---
|
||||
地理可视化除了数据展示，还需要用户交互，用户交互一般分为两种
|
||||
- 图层交互
|
||||
- 数据交互
|
||||
|
||||
### 图层交互
|
||||
|
||||
鼠标在可视化图层上进行相关操作，然后图层会有相应的响应。L7 Layer图层目前原生支持两种地图
|
||||
- active 鼠标滑过高亮
|
||||
- select 鼠标选中高亮
|
||||
|
||||
#### active
|
||||
|
||||
[layer active](../../api/layer/layer/#图层交互方法)
|
||||
```javascript
|
||||
// 开启 Active 使用默认高亮颜色
|
||||
layer.active(true)
|
||||
|
||||
// 开启 Active 自定义高亮颜色
|
||||
|
||||
layer.active({
|
||||
color: 'red'
|
||||
})
|
||||
|
||||
// 关闭高亮效果
|
||||
layer.active(false)
|
||||
|
||||
```
|
||||
|
||||
#### select
|
||||
[layer active](../../api/layer/layer/#图层交互方法)
|
||||
|
||||
```javascript
|
||||
// 开启 Active 使用默认高亮颜色
|
||||
layer.select(true)
|
||||
|
||||
// 开启 Active 自定义高亮颜色
|
||||
|
||||
layer.select({
|
||||
color: 'red'
|
||||
})
|
||||
|
||||
// 关闭高亮效果
|
||||
layer.select(false)
|
||||
|
||||
```
|
||||
|
||||
### 数据交互
|
||||
|
||||
有些时候我们可能需要直接指定某个数据高亮，比如鼠标点击数据面板的数据，我们需要高亮地图对应的元素
|
||||
|
||||
#### setActive
|
||||
|
||||
```javascript
|
||||
layer.setActive(id);
|
||||
```
|
||||
|
||||
#### setSelect
|
||||
|
||||
```javascript
|
||||
layer.setSelect(id);
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -1,3 +1,272 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||
|
||||
# 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { DrawControl } from '@antv/l7-draw';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-Draw -->
|
||||
<script src="https://unpkg.com/@antv/l7-draw"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### 参数
|
||||
|
||||
```javascript
|
||||
const control = new DrawControl(scene, option);
|
||||
```
|
||||
|
||||
#### scene
|
||||
|
||||
scene 对象
|
||||
|
||||
#### options
|
||||
|
||||
control 配置项
|
||||
|
||||
| name | Type | Default | Description |
|
||||
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
||||
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
|
||||
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
|
||||
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
|
||||
| style | | | 地图绘制样式 |
|
||||
|
||||
**controlOptions**
|
||||
UI 组件配置项
|
||||
|
||||
- point `boolean | drawOption` 绘制点工具配置
|
||||
- line `boolean | drawOption` 绘制线工具配置
|
||||
- polygon `boolean | drawOption` 绘制面工具配置
|
||||
- circle `boolean | drawOption` 绘制圆工具配置
|
||||
- rect `boolean | drawOption` 绘制矩形工具配置
|
||||
- delete `boolean | drawOption` 添加删除工具
|
||||
|
||||
默认配置
|
||||
|
||||
```
|
||||
{
|
||||
point: true,
|
||||
line: true,
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: true
|
||||
}
|
||||
```
|
||||
|
||||
示例
|
||||
|
||||
```
|
||||
{
|
||||
point: false,
|
||||
line: {
|
||||
editEnable: false,
|
||||
},
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: false
|
||||
```
|
||||
|
||||
### 添加到地图
|
||||
|
||||
```javascript
|
||||
scene.addControl(control);
|
||||
```
|
||||
|
||||
### 从地图中移除
|
||||
|
||||
```javascript
|
||||
scene.removeControl(control);
|
||||
```
|
||||
|
||||
### Draw Type
|
||||
|
||||
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
|
||||
|
||||
#### DrawCircle
|
||||
|
||||
绘制圆形
|
||||
|
||||
```javascript
|
||||
import { DrawCircle } from '@antv/l7-draw';
|
||||
const drawCircle = new DrawCircle(scene);
|
||||
drawCircle.enable();
|
||||
```
|
||||
|
||||
#### DrawRect
|
||||
|
||||
绘制四边形
|
||||
|
||||
```javascript
|
||||
import { DrawRect } from '@antv/l7-draw';
|
||||
const drawRect = new DrawRect(scene);
|
||||
drawRect.enable();
|
||||
```
|
||||
|
||||
#### DrawLine
|
||||
|
||||
绘制路径
|
||||
|
||||
```javascript
|
||||
import { DrawLine } from '@antv/l7-draw';
|
||||
const drawLine = new DrawLine(scene);
|
||||
drawLine.enable();
|
||||
```
|
||||
|
||||
#### DrawPoint
|
||||
|
||||
绘制点
|
||||
|
||||
```javascript
|
||||
import { DrawPoint } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPoint(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
#### DrawPolygon
|
||||
|
||||
绘制多边形
|
||||
|
||||
```javascript
|
||||
import { DrawPolygon } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPolygon(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
### 配置项 DrawOption
|
||||
|
||||
- editEnable boolean 是否允许编辑
|
||||
- selectEnable boolean 是否允许选中
|
||||
|
||||
### 方法
|
||||
|
||||
#### enable
|
||||
|
||||
开始编辑，绘制完成之后会自动结束。
|
||||
|
||||
#### disable
|
||||
|
||||
结束编辑
|
||||
|
||||
### 事件
|
||||
|
||||
#### draw.create
|
||||
|
||||
绘制完成时触发该事件
|
||||
|
||||
#### draw.delete
|
||||
|
||||
图形删除时触发该事件
|
||||
|
||||
#### draw.update
|
||||
|
||||
图形更新时触发该事件，图形的平移，顶点的编辑
|
||||
|
||||
### style
|
||||
|
||||
- active 绘制过程中高亮颜色
|
||||
- normal 正常显示状态
|
||||
|
||||
```javascript
|
||||
const style = {
|
||||
active: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 5,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
color: '#fbb03b',
|
||||
size: 1,
|
||||
style: {
|
||||
opacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
polygon: {
|
||||
shape: 'fill',
|
||||
color: '#fbb03b',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#fbb03b',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
normal: {
|
||||
polygon: {
|
||||
type: 'PolygonLayer',
|
||||
shape: 'fill',
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#3bb2d0',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'solid',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
size: 1,
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
normal_point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
mid_point: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 3,
|
||||
style: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,3 +1,272 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||
|
||||
# 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { DrawControl } from '@antv/l7-draw';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-Draw -->
|
||||
<script src="https://unpkg.com/@antv/l7-draw"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### 参数
|
||||
|
||||
```javascript
|
||||
const control = new DrawControl(scene, option);
|
||||
```
|
||||
|
||||
#### scene
|
||||
|
||||
scene 对象
|
||||
|
||||
#### options
|
||||
|
||||
control 配置项
|
||||
|
||||
| name | Type | Default | Description |
|
||||
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
||||
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
|
||||
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
|
||||
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
|
||||
| style | | | 地图绘制样式 |
|
||||
|
||||
**controlOptions**
|
||||
UI 组件配置项
|
||||
|
||||
- point `boolean | drawOption` 绘制点工具配置
|
||||
- line `boolean | drawOption` 绘制线工具配置
|
||||
- polygon `boolean | drawOption` 绘制面工具配置
|
||||
- circle `boolean | drawOption` 绘制圆工具配置
|
||||
- rect `boolean | drawOption` 绘制矩形工具配置
|
||||
- delete `boolean | drawOption` 添加删除工具
|
||||
|
||||
默认配置
|
||||
|
||||
```
|
||||
{
|
||||
point: true,
|
||||
line: true,
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: true
|
||||
}
|
||||
```
|
||||
|
||||
示例
|
||||
|
||||
```
|
||||
{
|
||||
point: false,
|
||||
line: {
|
||||
editEnable: false,
|
||||
},
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: false
|
||||
```
|
||||
|
||||
### 添加到地图
|
||||
|
||||
```javascript
|
||||
scene.addControl(control);
|
||||
```
|
||||
|
||||
### 从地图中移除
|
||||
|
||||
```javascript
|
||||
scene.removeControl(control);
|
||||
```
|
||||
|
||||
### Draw Type
|
||||
|
||||
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
|
||||
|
||||
#### DrawCircle
|
||||
|
||||
绘制圆形
|
||||
|
||||
```javascript
|
||||
import { DrawCircle } from '@antv/l7-draw';
|
||||
const drawCircle = new DrawCircle(scene);
|
||||
drawCircle.enable();
|
||||
```
|
||||
|
||||
#### DrawRect
|
||||
|
||||
绘制四边形
|
||||
|
||||
```javascript
|
||||
import { DrawRect } from '@antv/l7-draw';
|
||||
const drawRect = new DrawRect(scene);
|
||||
drawRect.enable();
|
||||
```
|
||||
|
||||
#### DrawLine
|
||||
|
||||
绘制路径
|
||||
|
||||
```javascript
|
||||
import { DrawLine } from '@antv/l7-draw';
|
||||
const drawLine = new DrawLine(scene);
|
||||
drawLine.enable();
|
||||
```
|
||||
|
||||
#### DrawPoint
|
||||
|
||||
绘制点
|
||||
|
||||
```javascript
|
||||
import { DrawPoint } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPoint(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
#### DrawPolygon
|
||||
|
||||
绘制多边形
|
||||
|
||||
```javascript
|
||||
import { DrawPolygon } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPolygon(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
### 配置项 DrawOption
|
||||
|
||||
- editEnable boolean 是否允许编辑
|
||||
- selectEnable boolean 是否允许选中
|
||||
|
||||
### 方法
|
||||
|
||||
#### enable
|
||||
|
||||
开始编辑，绘制完成之后会自动结束。
|
||||
|
||||
#### disable
|
||||
|
||||
结束编辑
|
||||
|
||||
### 事件
|
||||
|
||||
#### draw.create
|
||||
|
||||
绘制完成时触发该事件
|
||||
|
||||
#### draw.delete
|
||||
|
||||
图形删除时触发该事件
|
||||
|
||||
#### draw.update
|
||||
|
||||
图形更新时触发该事件，图形的平移，顶点的编辑
|
||||
|
||||
### style
|
||||
|
||||
- active 绘制过程中高亮颜色
|
||||
- normal 正常显示状态
|
||||
|
||||
```javascript
|
||||
const style = {
|
||||
active: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 5,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
color: '#fbb03b',
|
||||
size: 1,
|
||||
style: {
|
||||
opacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
polygon: {
|
||||
shape: 'fill',
|
||||
color: '#fbb03b',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#fbb03b',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
normal: {
|
||||
polygon: {
|
||||
type: 'PolygonLayer',
|
||||
shape: 'fill',
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#3bb2d0',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'solid',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
size: 1,
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
normal_point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
mid_point: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 3,
|
||||
style: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
## 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={[]} />;
|
||||
```
|
||||
|
||||
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
|
||||
|
||||
## 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 属性数据 |
|
||||
|
||||
## Maker 事件
|
||||
|
||||
通过 onMarkerLoaded 方法获取 Marker 实例监听
|
||||
|
||||
## 实例
|
||||
|
||||
```jsx
|
||||
import { Marker} from '@antv/l7-react'
|
||||
<Marker
|
||||
option = {{
|
||||
color:'red'
|
||||
}}
|
||||
lnglat ={{[120,32]}}
|
||||
/>
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
## 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={[]} />;
|
||||
```
|
||||
|
||||
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
|
||||
|
||||
## 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 属性数据 |
|
||||
|
||||
## Maker 事件
|
||||
|
||||
通过 onMarkerLoaded 方法获取 Marker 实例监听
|
||||
|
||||
## 实例
|
||||
|
||||
```jsx
|
||||
import { Marker} from '@antv/l7-react'
|
||||
<Marker
|
||||
option = {{
|
||||
color:'red'
|
||||
}}
|
||||
lnglat ={{[120,32]}}
|
||||
/>
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
## Layer 类型
|
||||
|
||||
React 各个组件名称和 L7 名称保持一致
|
||||
|
||||
- PointLayer
|
||||
- PolygonLayer
|
||||
- LineLayer
|
||||
- HeatmapLayer
|
||||
- RasterLayer
|
||||
- ImageLayer
|
||||
- CityBuildingLayer
|
||||
|
||||
### 使用方式
|
||||
|
||||
```jsx
|
||||
import { PointLayer } '@antv/l7-react';
|
||||
|
||||
```
|
||||
|
||||
## Layer Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
||||
| options | `layer options` | | 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 高亮 |
|
||||
| animate | `animate Option` | `null` | 图层动画配置 |
|
||||
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
||||
|
||||
### layer options
|
||||
|
||||
| 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') |
|
||||
|
||||
### 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
|
||||
|
||||
active，select 配置项
|
||||
|
||||
**option**
|
||||
|
||||
- color 设置交互的颜色，指滑过或者选中的
|
||||
|
||||
```jsx
|
||||
<>
|
||||
```
|
||||
|
||||
### 获取 layer 对象
|
||||
|
||||
#### onLayerLoaded
|
||||
|
||||
回调函数获取 layer, scene 对象
|
||||
|
||||
```javascript
|
||||
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>;
|
||||
```
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
## Layer 类型
|
||||
|
||||
React 各个组件名称和 L7 名称保持一致
|
||||
|
||||
- PointLayer
|
||||
- PolygonLayer
|
||||
- LineLayer
|
||||
- HeatmapLayer
|
||||
- RasterLayer
|
||||
- ImageLayer
|
||||
- CityBuildingLayer
|
||||
|
||||
### 使用方式
|
||||
|
||||
```jsx
|
||||
import { PointLayer } '@antv/l7-react';
|
||||
|
||||
```
|
||||
|
||||
## Layer Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
||||
| options | `layer options` | | 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 高亮 |
|
||||
| animate | `animate Option` | `null` | 图层动画配置 |
|
||||
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
||||
|
||||
### layer options
|
||||
|
||||
| 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') |
|
||||
|
||||
### 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
|
||||
|
||||
active，select 配置项
|
||||
|
||||
**option**
|
||||
|
||||
- color 设置交互的颜色，指滑过或者选中的
|
||||
|
||||
```jsx
|
||||
<>
|
||||
```
|
||||
|
||||
### 获取 layer 对象
|
||||
|
||||
#### onLayerLoaded
|
||||
|
||||
回调函数获取 layer, scene 对象
|
||||
|
||||
```javascript
|
||||
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>;
|
||||
```
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
在 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 | `map option` | `Required` | map option [地图配置项]() |
|
||||
| option | `scene option` | `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>;
|
||||
```
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
在 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 | `map option` | `Required` | map option [地图配置项]() |
|
||||
| option | `scene option` | `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>;
|
||||
```
|
||||
Loading…
Reference in New Issue