mirror of https://gitee.com/antv-l7/antv-l7
docs: 将 L7 官网中 L7Draw 相关的示例升级至 L7Draw3.0 版本 (#1473)
Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>
This commit is contained in:
heiyexing
GitHub
parent
64b51fa459
commit
c815cb9bc2
|
|
@ -10,7 +10,7 @@
|
||||||
"@antv/g2plot": "^2.3.40",
|
"@antv/g2plot": "^2.3.40",
|
||||||
"@antv/gatsby-theme-antv": "^1.1.15",
|
"@antv/gatsby-theme-antv": "^1.1.15",
|
||||||
"@antv/l7-district": "^2.3.9",
|
"@antv/l7-district": "^2.3.9",
|
||||||
"@antv/l7-draw": "2.4.18",
|
"@antv/l7-draw": "^3.0.9",
|
||||||
"@antv/l7-react": "^2.3.3",
|
"@antv/l7-react": "^2.3.3",
|
||||||
"@antv/l7plot": "^0.1.0",
|
"@antv/l7plot": "^0.1.0",
|
||||||
"@babel/cli": "^7.6.4",
|
"@babel/cli": "^7.6.4",
|
||||||
|
|
|
||||||
|
|
@ -1,272 +1,9 @@
|
||||||
---
|
---
|
||||||
title: API
|
title: API
|
||||||
---
|
---
|
||||||
|
|
||||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||||
|
|
||||||
# 使用
|
# 使用
|
||||||
|
|
||||||
**using modules**
|
L7Draw 的使用文件可见 [L7Draw 官网](https://l7draw.antv.vision/)
|
||||||
|
|
||||||
```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,236 +1,9 @@
|
||||||
---
|
---
|
||||||
title: API
|
title: API
|
||||||
---
|
---
|
||||||
|
|
||||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||||
|
|
||||||
# 使用
|
# 使用
|
||||||
|
|
||||||
**using modules**
|
L7Draw 的使用文件可见 [L7Draw 官网](https://l7draw.antv.vision/)
|
||||||
|
|
||||||
```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);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 方法
|
|
||||||
|
|
||||||
### getDraw(type)
|
|
||||||
|
|
||||||
获取 draw 实例
|
|
||||||
|
|
||||||
参数： type 绘制实例 `point|line|polygon|rect| circle`
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const pointDraw = drawcontrol.get('point');
|
|
||||||
```
|
|
||||||
|
|
||||||
### getAllData()
|
|
||||||
|
|
||||||
获取每个 Draw 实例绘制的结果数据
|
|
||||||
|
|
||||||
返回数据格式如下
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
{
|
|
||||||
point: []; // geojson数据格式
|
|
||||||
line: [];
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### removeAllData()
|
|
||||||
|
|
||||||
移除绘制的的所有数据
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
drawcontrol.removeAllData();
|
|
||||||
```
|
|
||||||
|
|
||||||
### 事件
|
|
||||||
|
|
||||||
#### 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,32 +1,23 @@
|
||||||
// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
|
// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
|
||||||
import { Scene } from '@antv/l7';
|
import { Scene } from '@antv/l7';
|
||||||
import { GaodeMap } from '@antv/l7-maps';
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
import { DrawControl } from '@antv/l7-draw';
|
import { ControlEvent, DrawControl } from '@antv/l7-draw';
|
||||||
|
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new GaodeMap({
|
map: new GaodeMap({
|
||||||
style: 'light',
|
style: 'light',
|
||||||
center: [ 116.1608, 40.1119 ],
|
center: [116.1608, 40.1119],
|
||||||
zoom: 15
|
zoom: 15,
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
const layer1 = new AMap.TileLayer.Satellite();
|
const tileLayer = new AMap.TileLayer.Satellite();
|
||||||
scene.map.setLayers([]);
|
tileLayer.setMap(scene.map);
|
||||||
layer1.setMap(scene.map);
|
|
||||||
const drawControl = new DrawControl(scene, {
|
|
||||||
position: 'topright',
|
|
||||||
layout: 'horizontal', // horizontal vertical
|
|
||||||
controls: {
|
|
||||||
point: true,
|
|
||||||
polygon: true,
|
|
||||||
line: true,
|
|
||||||
circle: true,
|
|
||||||
rect: true,
|
|
||||||
delete: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
scene.addControl(drawControl);
|
|
||||||
|
|
||||||
|
const drawControl = new DrawControl(scene, {});
|
||||||
|
scene.addControl(drawControl);
|
||||||
|
drawControl.on(ControlEvent.DrawChange, (changeType) => {
|
||||||
|
console.log(changeType);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,272 +1,9 @@
|
||||||
---
|
---
|
||||||
title: API
|
title: API
|
||||||
---
|
---
|
||||||
|
|
||||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||||
|
|
||||||
## 使用
|
# 使用
|
||||||
|
|
||||||
**using modules**
|
L7Draw 的使用文件可见 [L7Draw 官网](https://l7draw.antv.vision/)
|
||||||
|
|
||||||
```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,209 +1,9 @@
|
||||||
---
|
---
|
||||||
title: API
|
title: API
|
||||||
---
|
---
|
||||||
|
|
||||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||||
|
|
||||||
# 使用
|
# 使用
|
||||||
|
|
||||||
**using modules**
|
L7Draw 的使用文件可见 [L7Draw 官网](https://l7draw.antv.vision/)
|
||||||
|
|
||||||
```javascript
|
|
||||||
import { DrawControl } from '@antv/l7-draw';
|
|
||||||
```
|
|
||||||
|
|
||||||
**CDN 版本引用**
|
|
||||||
|
|
||||||
```html
|
|
||||||
<head>
|
|
||||||
<! --引入最新版的L7-Draw -->
|
|
||||||
<script src="https://unpkg.com/@antv/l7-draw"></script>
|
|
||||||
</head>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 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
|
|
||||||
|
|
||||||
- data `geojson' 初始化数据仅支持 Polygon, Line, Point, 不支持MultPolygon,Circle 可用编辑现有数据
|
|
||||||
- editEnable boolean 是否允许编辑
|
|
||||||
- selectEnable boolean 是否允许选中
|
|
||||||
- style 绘制样式
|
|
||||||
|
|
||||||
### 方法
|
|
||||||
|
|
||||||
#### enable
|
|
||||||
|
|
||||||
开始编辑，绘制完成之后会自动结束。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
draw.enable();
|
|
||||||
```
|
|
||||||
|
|
||||||
#### disable
|
|
||||||
结束绘制
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
draw.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,22 +1,20 @@
|
||||||
import { Scene } from '@antv/l7';
|
import { Scene } from '@antv/l7';
|
||||||
import { DrawCircle } from '@antv/l7-draw';
|
import { DrawCircle, DrawEvent } from '@antv/l7-draw';
|
||||||
import { GaodeMap } from '@antv/l7-maps';
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new GaodeMap({
|
map: new GaodeMap({
|
||||||
style: 'light',
|
style: 'light',
|
||||||
center: [ 113.775374, 28.31067 ],
|
center: [120.211944, 30.288946],
|
||||||
zoom: 12
|
zoom: 7.05,
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
const drawCircle = new DrawCircle(scene);
|
const drawCircle = new DrawCircle(scene, {});
|
||||||
drawCircle.enable();
|
drawCircle.enable();
|
||||||
drawCircle.on('draw.create', e => {
|
|
||||||
console.log(e);
|
drawCircle.on(DrawEvent.Change, (allFeatures) => {
|
||||||
});
|
console.log(allFeatures);
|
||||||
drawCircle.on('draw.update', e => {
|
|
||||||
console.log('update', e);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { Scene } from '@antv/l7';
|
||||||
|
import { DrawEvent, DrawLine } from '@antv/l7-draw';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
style: 'light',
|
||||||
|
center: [120.211944, 30.288946],
|
||||||
|
zoom: 7.05,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
const drawLine = new DrawLine(scene, {
|
||||||
|
distanceOptions: {},
|
||||||
|
});
|
||||||
|
drawLine.enable();
|
||||||
|
|
||||||
|
drawLine.on(DrawEvent.Change, (allFeatures) => {
|
||||||
|
console.log(allFeatures);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { Scene } from '@antv/l7';
|
||||||
|
import { DrawEvent, DrawPoint } from '@antv/l7-draw';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
style: 'light',
|
||||||
|
center: [120.211944, 30.288946],
|
||||||
|
zoom: 7.05,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
const drawPoint = new DrawPoint(scene, {});
|
||||||
|
drawPoint.enable();
|
||||||
|
|
||||||
|
drawPoint.on(DrawEvent.Change, (allFeatures) => {
|
||||||
|
console.log(allFeatures);
|
||||||
|
});
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
console.log(scene.getZoom(), scene.getCenter());
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
|
@ -1,115 +1,21 @@
|
||||||
import { Scene } from '@antv/l7';
|
import { Scene } from '@antv/l7';
|
||||||
import { DrawPolygon } from '@antv/l7-draw';
|
import { DrawEvent, DrawPolygon } from '@antv/l7-draw';
|
||||||
import { GaodeMap } from '@antv/l7-maps';
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
const polygon = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: [
|
|
||||||
{
|
|
||||||
type: 'Feature',
|
|
||||||
properties: {},
|
|
||||||
geometry: {
|
|
||||||
type: 'Polygon',
|
|
||||||
coordinates: [
|
|
||||||
[
|
|
||||||
[
|
|
||||||
116.30470275878906,
|
|
||||||
39.88352811449648
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.32083892822264,
|
|
||||||
39.89380183825623
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.31637573242188,
|
|
||||||
39.89617247892832
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.30556106567381,
|
|
||||||
39.89577737784395
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.30281448364258,
|
|
||||||
39.89709437260048
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.28822326660156,
|
|
||||||
39.90657598772839
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.27809524536131,
|
|
||||||
39.901571965464
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.27843856811523,
|
|
||||||
39.880103197763546
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.28822326660156,
|
|
||||||
39.87457027859936
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.29131317138673,
|
|
||||||
39.85928656392012
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.29371643066405,
|
|
||||||
39.852302354195864
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.3129425048828,
|
|
||||||
39.853620184014325
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.3393783569336,
|
|
||||||
39.85414730885731
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.3448715209961,
|
|
||||||
39.85796884289976
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.3448715209961,
|
|
||||||
39.87233063679467
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.3422966003418,
|
|
||||||
39.885240508711654
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.32564544677734,
|
|
||||||
39.889060310919994
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.31465911865234,
|
|
||||||
39.88813830918363
|
|
||||||
],
|
|
||||||
[
|
|
||||||
116.30470275878906,
|
|
||||||
39.88352811449648
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new GaodeMap({
|
map: new GaodeMap({
|
||||||
style: 'light',
|
style: 'light',
|
||||||
center: [ 116.30470275878906, 39.88352811449648 ],
|
center: [120.211944, 30.288946],
|
||||||
zoom: 12
|
zoom: 7.05,
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
|
const drawPolygon = new DrawPolygon(scene, {
|
||||||
|
areaOptions: {},
|
||||||
|
});
|
||||||
|
drawPolygon.enable();
|
||||||
|
|
||||||
const draw = new DrawPolygon(scene, {
|
drawPolygon.on(DrawEvent.Change, (allFeatures) => {
|
||||||
data: polygon
|
console.log(allFeatures);
|
||||||
});
|
|
||||||
draw.on('draw.create', e => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
draw.on('draw.update', e => {
|
|
||||||
console.log('update', e);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { Scene } from '@antv/l7';
|
||||||
|
import { DrawEvent, DrawRect } from '@antv/l7-draw';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
style: 'light',
|
||||||
|
center: [120.211944, 30.288946],
|
||||||
|
zoom: 7.05,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
const drawRect = new DrawRect(scene, {});
|
||||||
|
drawRect.enable();
|
||||||
|
|
||||||
|
drawRect.on(DrawEvent.Change, (allFeatures) => {
|
||||||
|
console.log(allFeatures);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -4,16 +4,30 @@
|
||||||
"en": "Draw"
|
"en": "Draw"
|
||||||
},
|
},
|
||||||
"demos": [
|
"demos": [
|
||||||
|
|
||||||
{
|
{
|
||||||
"filename": "draw_circle.js",
|
"filename": "draw_point.js",
|
||||||
"title": "绘制圆",
|
"title": "绘制点",
|
||||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*pawjTqbwM4gAAAAAAAAAAABkARQnAQ"
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*9UalSKnKqOAAAAAAAAAAAAAAARQnAQ"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "draw_line.js",
|
||||||
|
"title": "绘制线",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*y68yToJoy34AAAAAAAAAAAAAARQnAQ"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename": "draw_polygon.js",
|
"filename": "draw_polygon.js",
|
||||||
"title": "绘制多边形",
|
"title": "绘制面",
|
||||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*m1eqS4gwgz4AAAAAAAAAAABkARQnAQ"
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*YmIPSK2bY0oAAAAAAAAAAAAAARQnAQ"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "draw_rect.js",
|
||||||
|
"title": "绘制矩形",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*X_IGRrjsPCoAAAAAAAAAAAAAARQnAQ"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "draw_circle.js",
|
||||||
|
"title": "绘制圆",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bnaxRLpYvdwAAAAAAAAAAAAAARQnAQ"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
---
|
|
||||||
title: introduction
|
|
||||||
---
|
|
||||||
|
|
||||||
`markdown:examples/draw/basic/design.zh.md`
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
---
|
|
||||||
title: 如何使用
|
|
||||||
---
|
|
||||||
图形绘制包括4种状态
|
|
||||||
|
|
||||||
- 绘制 绘制图形
|
|
||||||
- 选中 平移图形
|
|
||||||
- 编辑 图形顶点编辑
|
|
||||||
- 完成态 绘制完成，点击进入选中太
|
|
||||||
|
|
||||||
|
|
||||||
### 绘制圆
|
|
||||||
|
|
||||||
#### 绘制态
|
|
||||||
|
|
||||||
1. 点击，地图生成第一个点既圆心
|
|
||||||
2. 拖动，拖动过程中根据当前点实时计算距离圆心的距离，生成当前圆
|
|
||||||
3. 拖动结束，绘制完成，进入选中状态
|
|
||||||
|
|
||||||
#### 选中态
|
|
||||||
|
|
||||||
鼠标点击图形进入编辑态，鼠标点击图形外部，取消选中
|
|
||||||
|
|
||||||
1. 鼠标 mouseenter 图形鼠标 move
|
|
||||||
2. 拖到鼠标即可实现图形的平移
|
|
||||||
3. 鼠标点击图形进入编辑态，鼠标点击图形外部
|
|
||||||
|
|
||||||
#### 编辑态
|
|
||||||
|
|
||||||
鼠标点击图形外部，完成编辑
|
|
||||||
|
|
||||||
1. 鼠标滑入顶点，鼠标变成 move
|
|
||||||
1. 拖动顶点即可改变圆的半径
|
|
||||||
|
|
||||||
### 绘制多边形
|
|
||||||
|
|
||||||
#### 绘制态
|
|
||||||
1. 点击， 生成第一个点
|
|
||||||
2. 连续点击， 依次生成多边形的点序列，点击过程中会始终显示第一个点和最后一个点
|
|
||||||
3. 结束，双击地图结束，或者点击第一个点或最后一个点结束 
|
|
||||||
|
|
||||||
#### 选中态
|
|
||||||
|
|
||||||
鼠标点击图形进入选中态，选中态可对图形平移，鼠标点击图形外部，取消选中
|
|
||||||
|
|
||||||
#### 编辑态
|
|
||||||
|
|
||||||
鼠标点击图形进入编辑态，编辑态会标注多边形顶点，和各个顶点的中心点
|
|
||||||
鼠标点击图形外部，取消选中
|
|
||||||
|
|
||||||
1. 添加顶点，点击中心点，为多边形新增一个顶点
|
|
||||||
2. 移动顶点，拖动顶点可对顶点移动
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue