mirror of https://gitee.com/antv-l7/antv-l7
improvement(draw): ui 组件新增事件,获取数据方法
This commit is contained in:
thinkinggis
parent
532ade4083
commit
ba3f7b5676
|
|
@ -157,10 +157,18 @@ drawPoint.enable();
|
||||||
|
|
||||||
开始编辑，绘制完成之后会自动结束。
|
开始编辑，绘制完成之后会自动结束。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
draw.enable()
|
||||||
|
```
|
||||||
|
|
||||||
#### disable
|
#### disable
|
||||||
|
|
||||||
结束编辑
|
结束编辑
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
draw.enable()
|
||||||
|
```
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
#### draw.create
|
#### draw.create
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 地图绘制组件
|
title: Draw 实例
|
||||||
order: 2
|
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);
|
|
||||||
```
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// CDN 引用
|
|
||||||
const control = new L7.Draw.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 Type
|
||||||
|
|
||||||
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
|
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
|
||||||
|
|
@ -153,8 +59,9 @@ drawPoint.enable();
|
||||||
|
|
||||||
### 配置项 DrawOption
|
### 配置项 DrawOption
|
||||||
|
|
||||||
- editEnable boolean 是否允许编辑
|
- editEnable `boolean` 是否允许编辑
|
||||||
- selectEnable boolean 是否允许选中
|
- selectEnable `boolean` 是否允许选中
|
||||||
|
- data `geojson` 传入数据
|
||||||
|
|
||||||
### 方法
|
### 方法
|
||||||
|
|
||||||
|
|
@ -179,101 +86,3 @@ drawPoint.enable();
|
||||||
#### draw.update
|
#### 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,250 @@
|
||||||
|
---
|
||||||
|
title: Draw UI 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);
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// CDN 引用
|
||||||
|
const control = new L7.Draw.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 绘制实例 `point|line|polygon|rect| circle`
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const pointDraw = drawcontrol.get('point');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### getAllData()
|
||||||
|
|
||||||
|
获取每个Draw 实例绘制的结果数据
|
||||||
|
|
||||||
|
返回数据格式如下
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
point: []
|
||||||
|
line: []
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 事件
|
||||||
|
|
||||||
|
drawControl 的事件类型和每个Draw的事件一致，如果在 drawControl 监听事件会为每个draw增加事件监听。
|
||||||
|
|
||||||
|
- drawType: Draw 类型
|
||||||
|
- feature: 对应的数据
|
||||||
|
|
||||||
|
#### draw.create
|
||||||
|
|
||||||
|
绘制完成时触发该事件
|
||||||
|
|
||||||
|
#### draw.delete
|
||||||
|
|
||||||
|
图形删除时触发该事件
|
||||||
|
|
||||||
|
#### draw.update
|
||||||
|
|
||||||
|
图形更新时触发该事件，图形的平移，顶点的编辑
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
drawControl.on('draw.delete',(e) => {
|
||||||
|
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
style 配置项可以按需配置，内部会和默认值进行merge
|
||||||
|
|
||||||
|
- 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,260 @@
|
||||||
|
---
|
||||||
|
title: 绘制 UI 组件
|
||||||
|
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);
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// CDN 引用
|
||||||
|
const control = new L7.Draw.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();
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 事件
|
||||||
|
|
||||||
|
drawControl 的事件类型和每个Draw的事件一致，如果在 drawControl 监听事件会为每个draw增加事件监听。
|
||||||
|
|
||||||
|
- drawType: Draw 类型
|
||||||
|
- feature: 对应的数据
|
||||||
|
|
||||||
|
#### draw.create
|
||||||
|
|
||||||
|
绘制完成时触发该事件
|
||||||
|
|
||||||
|
#### draw.delete
|
||||||
|
|
||||||
|
图形删除时触发该事件
|
||||||
|
|
||||||
|
#### draw.update
|
||||||
|
|
||||||
|
图形更新时触发该事件，图形的平移，顶点的编辑
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
drawControl.on('draw.delete',(e) => {
|
||||||
|
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
style 配置项可以按需配置，内部会和默认值进行merge
|
||||||
|
|
||||||
|
- 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: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -25,7 +25,7 @@ export default {
|
||||||
commonjs({
|
commonjs({
|
||||||
namedExports: {
|
namedExports: {
|
||||||
eventemitter3: [ 'EventEmitter' ],
|
eventemitter3: [ 'EventEmitter' ],
|
||||||
lodash: [ 'merge' ]
|
lodash: [ 'merge', 'clone' ]
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
buble({
|
buble({
|
||||||
|
|
|
||||||
|
|
@ -68,6 +68,10 @@ export class DrawControl extends Control {
|
||||||
const { controls } = this.controlOption as IDrawControlOption;
|
const { controls } = this.controlOption as IDrawControlOption;
|
||||||
const container = DOM.create('div', controlClass) as HTMLElement;
|
const container = DOM.create('div', controlClass) as HTMLElement;
|
||||||
this.addControls(controls, container);
|
this.addControls(controls, container);
|
||||||
|
|
||||||
|
// 代理每个绘制组件的事件
|
||||||
|
|
||||||
|
this.addControlEvent();
|
||||||
// 监听组件 选中, 编辑
|
// 监听组件 选中, 编辑
|
||||||
return container;
|
return container;
|
||||||
}
|
}
|
||||||
|
|
@ -79,6 +83,32 @@ export class DrawControl extends Control {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getDraw(type: string): DrawFeature | null {
|
||||||
|
const { controls } = this.controlOption as IDrawControlOption;
|
||||||
|
if (controls[type]) {
|
||||||
|
return this.draw[type];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
public getAllData() {
|
||||||
|
const res: { [key: string]: any } = {};
|
||||||
|
for (const draw in this.draw) {
|
||||||
|
if (this.draw[draw]) {
|
||||||
|
res[draw] = this.draw[draw].getData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
public removeAllData() {
|
||||||
|
for (const draw in this.draw) {
|
||||||
|
if (this.draw[draw]) {
|
||||||
|
this.draw[draw].removeAllData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private addControls(controls: IControls, container: HTMLElement) {
|
private addControls(controls: IControls, container: HTMLElement) {
|
||||||
for (const type in controls) {
|
for (const type in controls) {
|
||||||
if (DrawType[type] && controls[type] !== false) {
|
if (DrawType[type] && controls[type] !== false) {
|
||||||
|
|
@ -107,6 +137,22 @@ export class DrawControl extends Control {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private addControlEvent() {
|
||||||
|
for (const draw in this.draw) {
|
||||||
|
if (this.draw[draw]) {
|
||||||
|
['draw.create', 'draw.update', 'draw.delete'].forEach(
|
||||||
|
(type: string) => {
|
||||||
|
this.draw[draw].on('draw.create', (feature) => {
|
||||||
|
this.emit(type, {
|
||||||
|
drawType: draw,
|
||||||
|
feature,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
private createButton(
|
private createButton(
|
||||||
tile: string,
|
tile: string,
|
||||||
className: string,
|
className: string,
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import { DrawEvent, DrawModes, unitsType } from '../util/constant';
|
||||||
import { createCircle, createPoint } from '../util/create_geometry';
|
import { createCircle, createPoint } from '../util/create_geometry';
|
||||||
import moveFeatures, { movePoint } from '../util/move_featrues';
|
import moveFeatures, { movePoint } from '../util/move_featrues';
|
||||||
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
|
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
|
||||||
|
import circle from '@turf/circle';
|
||||||
export default class DrawCircle extends DrawFeature {
|
export default class DrawCircle extends DrawFeature {
|
||||||
protected startPoint: ILngLat;
|
protected startPoint: ILngLat;
|
||||||
protected endPoint: ILngLat;
|
protected endPoint: ILngLat;
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,6 @@ export default abstract class DrawFeature extends DrawMode {
|
||||||
public setCurrentFeature(feature: Feature) {
|
public setCurrentFeature(feature: Feature) {
|
||||||
this.currentFeature = feature as Feature;
|
this.currentFeature = feature as Feature;
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
// @ts-ignore
|
|
||||||
this.pointFeatures = feature.properties.pointFeatures;
|
this.pointFeatures = feature.properties.pointFeatures;
|
||||||
|
|
||||||
this.source.setFeatureActive(feature);
|
this.source.setFeatureActive(feature);
|
||||||
|
|
@ -78,6 +77,20 @@ export default abstract class DrawFeature extends DrawMode {
|
||||||
public enableLayer() {
|
public enableLayer() {
|
||||||
this.drawLayer.enableSelect();
|
this.drawLayer.enableSelect();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getData() {
|
||||||
|
return this.source.getData();
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeAllData() {
|
||||||
|
this.source.removeAllFeatures();
|
||||||
|
this.currentFeature = null;
|
||||||
|
this.drawLayer.hide();
|
||||||
|
this.drawVertexLayer.hide();
|
||||||
|
this.normalLayer.hide();
|
||||||
|
this.hideOtherLayer();
|
||||||
|
}
|
||||||
|
|
||||||
public clear() {
|
public clear() {
|
||||||
this.drawLayer.hide();
|
this.drawLayer.hide();
|
||||||
this.drawVertexLayer.hide();
|
this.drawVertexLayer.hide();
|
||||||
|
|
|
||||||
|
|
@ -60,6 +60,7 @@ export default class DrawPoint extends DrawFeature {
|
||||||
protected createFeature(p: ILngLat): Feature {
|
protected createFeature(p: ILngLat): Feature {
|
||||||
const feature = point([p.lng, p.lat], {
|
const feature = point([p.lng, p.lat], {
|
||||||
id: this.getUniqId(),
|
id: this.getUniqId(),
|
||||||
|
type: 'point',
|
||||||
pointFeatures: [point([p.lng, p.lat])],
|
pointFeatures: [point([p.lng, p.lat])],
|
||||||
});
|
});
|
||||||
this.setCurrentFeature(feature as Feature);
|
this.setCurrentFeature(feature as Feature);
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,11 @@ export default class DrawPolygon extends DrawFeature {
|
||||||
this.type = 'polygon';
|
this.type = 'polygon';
|
||||||
this.drawMidVertexLayer = new DrawMidVertex(this);
|
this.drawMidVertexLayer = new DrawMidVertex(this);
|
||||||
this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
|
this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
|
||||||
|
if (this.options.data) {
|
||||||
|
this.initData();
|
||||||
|
this.normalLayer.update(this.source.data);
|
||||||
|
this.normalLayer.enableSelect();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
public enable() {
|
public enable() {
|
||||||
super.enable();
|
super.enable();
|
||||||
|
|
@ -116,9 +121,7 @@ export default class DrawPolygon extends DrawFeature {
|
||||||
this.endPoint = lngLat;
|
this.endPoint = lngLat;
|
||||||
this.points.push(lngLat);
|
this.points.push(lngLat);
|
||||||
const feature = this.createFeature(this.points);
|
const feature = this.createFeature(this.points);
|
||||||
const properties = feature.properties as { pointFeatures: Feature[] };
|
|
||||||
const pointfeatures = createPoint([this.points[0], this.endPoint]);
|
const pointfeatures = createPoint([this.points[0], this.endPoint]);
|
||||||
// this.pointFeatures = pointfeatures.features;
|
|
||||||
this.drawLayer.update(featureCollection([feature]));
|
this.drawLayer.update(featureCollection([feature]));
|
||||||
this.drawVertexLayer.update(featureCollection(pointfeatures.features));
|
this.drawVertexLayer.update(featureCollection(pointfeatures.features));
|
||||||
this.onDraw();
|
this.onDraw();
|
||||||
|
|
@ -155,13 +158,17 @@ export default class DrawPolygon extends DrawFeature {
|
||||||
};
|
};
|
||||||
this.setCurrentFeature(newFeature[0]);
|
this.setCurrentFeature(newFeature[0]);
|
||||||
}
|
}
|
||||||
protected createFeature(points: ILngLat[]): Feature {
|
protected createFeature(
|
||||||
const pointfeatures = createPoint(this.points);
|
points: ILngLat[],
|
||||||
|
id?: string,
|
||||||
|
active: boolean = true,
|
||||||
|
): Feature {
|
||||||
|
const pointfeatures = createPoint(points);
|
||||||
this.pointFeatures = pointfeatures.features;
|
this.pointFeatures = pointfeatures.features;
|
||||||
const feature = createPolygon(points, {
|
const feature = createPolygon(points, {
|
||||||
id: this.getUniqId(),
|
id: id || this.getUniqId(),
|
||||||
type: 'polygon',
|
type: 'polygon',
|
||||||
active: true,
|
active,
|
||||||
pointFeatures: this.pointFeatures,
|
pointFeatures: this.pointFeatures,
|
||||||
});
|
});
|
||||||
this.setCurrentFeature(feature as Feature);
|
this.setCurrentFeature(feature as Feature);
|
||||||
|
|
@ -252,6 +259,26 @@ export default class DrawPolygon extends DrawFeature {
|
||||||
featureCollection([this.currentFeature as Feature]),
|
featureCollection([this.currentFeature as Feature]),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private initData() {
|
||||||
|
const features: Feature[] = [];
|
||||||
|
this.source.data.features.forEach((feature) => {
|
||||||
|
if (feature.geometry.type === 'Polygon') {
|
||||||
|
const points = (feature.geometry.coordinates[0] as Position[]).map(
|
||||||
|
(coord) => {
|
||||||
|
return {
|
||||||
|
lng: coord[0],
|
||||||
|
lat: coord[1],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
);
|
||||||
|
features.push(
|
||||||
|
this.createFeature(points.slice(1), feature?.properties?.id, false),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.source.data.features = features;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* draw 端点响应事件
|
* draw 端点响应事件
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ export function renderFeature(fe: FeatureCollection, style: any): ILayer[] {
|
||||||
function drawPoint(fe: FeatureCollection, style: any) {
|
function drawPoint(fe: FeatureCollection, style: any) {
|
||||||
const layer = new PointLayer({
|
const layer = new PointLayer({
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
|
pickingBuffer: 3,
|
||||||
})
|
})
|
||||||
.source(fe)
|
.source(fe)
|
||||||
.shape('circle')
|
.shape('circle')
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import { Feature, FeatureCollection } from '@turf/helpers';
|
import { Feature, FeatureCollection } from '@turf/helpers';
|
||||||
|
// tslint:disable-next-line:no-submodule-imports
|
||||||
|
import cloneDeep from 'lodash/cloneDeep';
|
||||||
export default class DrawSource {
|
export default class DrawSource {
|
||||||
public data: FeatureCollection;
|
public data: FeatureCollection;
|
||||||
constructor(data?: FeatureCollection) {
|
constructor(data?: FeatureCollection) {
|
||||||
|
|
@ -9,6 +11,20 @@ export default class DrawSource {
|
||||||
this.data.features.push(feature);
|
this.data.features.push(feature);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getData() {
|
||||||
|
const features = cloneDeep(this.data.features).map((feature: Feature) => {
|
||||||
|
feature.properties = {
|
||||||
|
id: feature?.properties?.id,
|
||||||
|
type: feature?.properties?.type,
|
||||||
|
};
|
||||||
|
return feature;
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
type: 'FeatureCollection',
|
||||||
|
features,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
public getFeature(id: string): Feature | undefined {
|
public getFeature(id: string): Feature | undefined {
|
||||||
const result = this.data.features.find((fe: Feature) => {
|
const result = this.data.features.find((fe: Feature) => {
|
||||||
return fe?.properties?.id === id;
|
return fe?.properties?.id === id;
|
||||||
|
|
@ -16,6 +32,9 @@ export default class DrawSource {
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
public removeAllFeatures() {
|
||||||
|
this.data = this.getDefaultData();
|
||||||
|
}
|
||||||
public removeFeature(feature: Feature) {
|
public removeFeature(feature: Feature) {
|
||||||
const index = this.getFeatureIndex(feature);
|
const index = this.getFeatureIndex(feature);
|
||||||
if (index !== undefined) {
|
if (index !== undefined) {
|
||||||
|
|
|
||||||
|
|
@ -35,8 +35,13 @@ export default class AMapDraw extends React.Component {
|
||||||
delete: true,
|
delete: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
scene.on('click', () => {
|
// @ts-ignore
|
||||||
console.log('click');
|
window.drawControl = drawControl;
|
||||||
|
drawControl.on('draw.create', (e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
scene.on('dblclick', () => {
|
||||||
|
drawControl.removeAllData();
|
||||||
});
|
});
|
||||||
scene.addControl(drawControl);
|
scene.addControl(drawControl);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,210 +0,0 @@
|
||||||
import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
|
|
||||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
function convertRGB2Hex(rgb: number[]) {
|
|
||||||
return (
|
|
||||||
'#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
|
|
||||||
);
|
|
||||||
}
|
|
||||||
function calcMid(data1: number[], data2: number[]) {
|
|
||||||
return {
|
|
||||||
x: (data1[0] + data2[0]) / 2,
|
|
||||||
y: (data1[1] + data2[1]) / 2,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
export default class MultiPolygon extends React.Component {
|
|
||||||
private gui: dat.GUI;
|
|
||||||
private $stats: Node;
|
|
||||||
private scene: Scene;
|
|
||||||
|
|
||||||
public componentWillUnmount() {
|
|
||||||
this.scene.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
public async componentDidMount() {
|
|
||||||
const data = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: [
|
|
||||||
{
|
|
||||||
type: 'Feature',
|
|
||||||
properties: {},
|
|
||||||
geometry: {
|
|
||||||
type: 'Polygon',
|
|
||||||
coordinates: [
|
|
||||||
[
|
|
||||||
[108.6328125, 40.17887331434696],
|
|
||||||
[92.28515625, 37.3002752813443],
|
|
||||||
[99.31640625, 25.799891182088334],
|
|
||||||
[111.26953125, 23.885837699862005],
|
|
||||||
[115.83984375, 36.87962060502676],
|
|
||||||
[108.6328125, 40.17887331434696],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const data2 = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: [
|
|
||||||
{
|
|
||||||
type: 'Feature',
|
|
||||||
properties: {},
|
|
||||||
geometry: {
|
|
||||||
type: 'Polygon',
|
|
||||||
coordinates: [
|
|
||||||
[
|
|
||||||
[117.59765625, 45.9511496866914],
|
|
||||||
[120.76171875, 35.60371874069731],
|
|
||||||
[129.0234375, 30.90222470517144],
|
|
||||||
[135.703125, 37.43997405227057],
|
|
||||||
[135.703125, 45.9511496866914],
|
|
||||||
[117.59765625, 45.9511496866914],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const scene = new Scene({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
pitch: 0,
|
|
||||||
style: 'dark',
|
|
||||||
center: [121.775374, 31.31067],
|
|
||||||
zoom: 2,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
const layer = new PolygonLayer()
|
|
||||||
.source(data)
|
|
||||||
.shape('fill')
|
|
||||||
.color('#3bb2d0')
|
|
||||||
.style({
|
|
||||||
opacity: 0.1,
|
|
||||||
});
|
|
||||||
layer.on('click', (e) => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
layer.on('dblclick', (e) => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
const line = new PolygonLayer()
|
|
||||||
.source(data)
|
|
||||||
.shape('line')
|
|
||||||
.size(1)
|
|
||||||
.color('#3bb2d0')
|
|
||||||
.style({
|
|
||||||
opacity: 1,
|
|
||||||
});
|
|
||||||
scene.addLayer(layer);
|
|
||||||
scene.addLayer(line);
|
|
||||||
|
|
||||||
const activelayer = new PolygonLayer()
|
|
||||||
.source(data2)
|
|
||||||
.shape('fill')
|
|
||||||
.color('#fbb03b')
|
|
||||||
.style({
|
|
||||||
opacity: 0.1,
|
|
||||||
});
|
|
||||||
const activeline = new PolygonLayer()
|
|
||||||
.source(data2)
|
|
||||||
.shape('line')
|
|
||||||
.size(1)
|
|
||||||
.color('#fbb03b')
|
|
||||||
.style({
|
|
||||||
opacity: 1,
|
|
||||||
lineType: 'dash',
|
|
||||||
dashArray: [2, 2],
|
|
||||||
});
|
|
||||||
scene.addLayer(activelayer);
|
|
||||||
scene.addLayer(activeline);
|
|
||||||
scene.addLayer(this.addPoint(data2));
|
|
||||||
scene.addLayer(this.addActivePoint());
|
|
||||||
scene.addLayer(this.addMidPoint(data2));
|
|
||||||
this.scene = scene;
|
|
||||||
}
|
|
||||||
public render() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
id="map"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
private addPoint(data: any) {
|
|
||||||
const pointData = data.features[0].geometry.coordinates[0].map(
|
|
||||||
(coor: any) => {
|
|
||||||
return {
|
|
||||||
x: coor[0],
|
|
||||||
y: coor[1],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
);
|
|
||||||
return new PointLayer()
|
|
||||||
.source(pointData, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: 'x',
|
|
||||||
y: 'y',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.shape('circle')
|
|
||||||
.color('#fbb03b')
|
|
||||||
.size(3)
|
|
||||||
.style({
|
|
||||||
stroke: '#fff',
|
|
||||||
strokeWidth: 2,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private addMidPoint(data: any) {
|
|
||||||
const coords = data.features[0].geometry.coordinates[0];
|
|
||||||
const midPoint = [];
|
|
||||||
for (let i = 0; i < coords.length - 1; i++) {
|
|
||||||
midPoint.push(calcMid(coords[i], coords[i + 1]));
|
|
||||||
}
|
|
||||||
return new PointLayer()
|
|
||||||
.source(midPoint, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: 'x',
|
|
||||||
y: 'y',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.shape('circle')
|
|
||||||
.color('#fbb03b')
|
|
||||||
.size(2);
|
|
||||||
}
|
|
||||||
private addActivePoint() {
|
|
||||||
return new PointLayer()
|
|
||||||
.source(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
x: 117.59765625,
|
|
||||||
y: 45.9511496866914,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: 'x',
|
|
||||||
y: 'y',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
.shape('circle')
|
|
||||||
.color('#fbb03b')
|
|
||||||
.size(5)
|
|
||||||
.style({
|
|
||||||
stroke: '#fff',
|
|
||||||
strokeWidth: 2,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -23,7 +23,32 @@ export default class Circle extends React.Component {
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
|
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
const drawPolygon = new DrawPolygon(scene);
|
const drawPolygon = new DrawPolygon(scene, {
|
||||||
|
data: {
|
||||||
|
type: 'FeatureCollection',
|
||||||
|
features: [
|
||||||
|
{
|
||||||
|
type: 'Feature',
|
||||||
|
properties: {},
|
||||||
|
geometry: {
|
||||||
|
type: 'Polygon',
|
||||||
|
coordinates: [
|
||||||
|
[
|
||||||
|
[44.29687499999999, 55.3791104480105],
|
||||||
|
[28.4765625, 47.754097979680026],
|
||||||
|
[27.0703125, 38.8225909761771],
|
||||||
|
[42.890625, 33.43144133557529],
|
||||||
|
[73.47656249999999, 37.43997405227057],
|
||||||
|
[85.4296875, 47.989921667414194],
|
||||||
|
[79.1015625, 60.58696734225869],
|
||||||
|
[44.29687499999999, 55.3791104480105],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
drawPolygon.enable();
|
drawPolygon.enable();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@ import DrawCircle from './Components/DrawCircle';
|
||||||
import DrawControl from './Components/DrawControl';
|
import DrawControl from './Components/DrawControl';
|
||||||
import Line from './Components/DrawLine';
|
import Line from './Components/DrawLine';
|
||||||
import Point from './Components/DrawPoint';
|
import Point from './Components/DrawPoint';
|
||||||
import DrawPolygon from './Components/DrawPolygon';
|
|
||||||
import DrawRect from './Components/DrawRect';
|
import DrawRect from './Components/DrawRect';
|
||||||
import Polygon from './Components/Polygon';
|
import Polygon from './Components/Polygon';
|
||||||
|
|
||||||
|
|
@ -18,5 +17,4 @@ storiesOf('绘制', module)
|
||||||
.add('路径', () => <Line />, {})
|
.add('路径', () => <Line />, {})
|
||||||
.add('绘制组件', () => <DrawControl />, {})
|
.add('绘制组件', () => <DrawControl />, {})
|
||||||
.add('绘制圆', () => <DrawCircle />, {})
|
.add('绘制圆', () => <DrawCircle />, {})
|
||||||
.add('高德地图', () => <AMapDraw />, {})
|
.add('高德地图', () => <AMapDraw />, {});
|
||||||
.add('绘制面', () => <DrawPolygon />, {});
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue