2020-04-14 17:01:40 +08:00
|
|
|
|
---
|
|
|
|
|
|
title: API
|
|
|
|
|
|
---
|
2020-04-14 18:07:42 +08:00
|
|
|
|
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
|
|
|
|
|
|
|
|
|
|
|
# 使用
|
|
|
|
|
|
|
|
|
|
|
|
**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);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
## 方法
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
### getDraw(type)
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
获取 draw 实例
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
参数： type 绘制实例 `point|line|polygon|rect| circle`
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
|
|
|
|
|
```javascript
|
2020-05-15 21:07:04 +08:00
|
|
|
|
const pointDraw = drawcontrol.get('point');
|
2020-04-14 18:07:42 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
### getAllData()
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
获取每个 Draw 实例绘制的结果数据
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
返回数据格式如下
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
|
|
|
|
|
```javascript
|
2020-05-15 21:07:04 +08:00
|
|
|
|
{
|
|
|
|
|
|
point: []; // geojson数据格式
|
|
|
|
|
|
line: [];
|
|
|
|
|
|
}
|
2020-04-14 18:07:42 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
### removeAllData()
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
2020-05-15 21:07:04 +08:00
|
|
|
|
移除绘制的的所有数据
|
2020-04-14 18:07:42 +08:00
|
|
|
|
|
|
|
|
|
|
```javascript
|
2020-05-15 21:07:04 +08:00
|
|
|
|
drawcontrol.removeAllData();
|
2020-04-14 18:07:42 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 事件
|
|
|
|
|
|
|
|
|
|
|
|
#### 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: {},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
```
|
