mirror of https://gitee.com/antv-l7/antv-l7
273 lines
4.8 KiB
Markdown
273 lines
4.8 KiB
Markdown
|
---
|
|||
|
|
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: {},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
```
|