p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
antv-l7/docs/api/draw/draw_control.en.md

246 lines
4.5 KiB
Markdown
Raw Normal View History

improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
---
title: Draw UI Component
order: 2
---
fix(source): 聚合图获取聚合原始数据 fix #306
2020-04-27 10:42:04 +08:00
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +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);
```
```javascript
// CDN 引用
const control = new L7.Draw.DrawControl(scene, option);
```
#### scene
chore: publish
2020-04-27 11:46:11 +08:00
scene 对象, 绘制控件需要传入 scene 实例
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
#### 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);
```
## 方法
### getDraw()
参数： type 绘制实例 `point|line|polygon|rect| circle`
```javascript
const pointDraw = drawcontrol.get('point');
```
### getAllData()
fix(source): 聚合图获取聚合原始数据 fix #306
2020-04-27 10:42:04 +08:00
获取每个 Draw 实例绘制的结果数据
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
返回数据格式如下
```javascript
{
fix(source): 聚合图获取聚合原始数据 fix #306
2020-04-27 10:42:04 +08:00
point: [];
line: [];
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
}
```
### 事件
fix(source): 聚合图获取聚合原始数据 fix #306
2020-04-27 10:42:04 +08:00
drawControl 的事件类型和每个 Draw 的事件一致，如果在 drawControl 监听事件会为每个 draw 增加事件监听。
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
fix(source): 聚合图获取聚合原始数据 fix #306
2020-04-27 10:42:04 +08:00
- drawType: Draw 类型
- feature: 对应的数据
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
#### draw.create
绘制完成时触发该事件
#### draw.delete
图形删除时触发该事件
#### draw.update
图形更新时触发该事件，图形的平移，顶点的编辑
```javascript
fix(source): 聚合图获取聚合原始数据 fix #306
2020-04-27 10:42:04 +08:00
drawControl.on('draw.delete', (e) => {});
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
```
### style
fix(source): 聚合图获取聚合原始数据 fix #306
2020-04-27 10:42:04 +08:00
style 配置项可以按需配置，内部会和默认值进行 merge
improvement(draw): ui 组件新增事件,获取数据方法
2020-04-26 23:42:25 +08:00
- 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: {},
},
},
};
```