mirror of https://gitee.com/antv-l7/antv-l7
@thinkinggis
GitHub
commit
e9c98283e8
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Draw Component
|
||||
order: 2
|
||||
order: 3
|
||||
---
|
||||
|
||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||
|
|
@ -157,10 +157,18 @@ drawPoint.enable();
|
|||
|
||||
开始编辑，绘制完成之后会自动结束。
|
||||
|
||||
```javascript
|
||||
draw.enable();
|
||||
```
|
||||
|
||||
#### disable
|
||||
|
||||
结束编辑
|
||||
|
||||
```javascript
|
||||
draw.enable();
|
||||
```
|
||||
|
||||
### 事件
|
||||
|
||||
#### draw.create
|
||||
|
|
|
|||
|
|
@ -1,102 +1,8 @@
|
|||
---
|
||||
title: 地图绘制组件
|
||||
order: 2
|
||||
title: Draw 实例
|
||||
order: 3
|
||||
---
|
||||
|
||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||
|
||||
# 使用
|
||||
|
||||
**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 UI 组件，独立的使用每一个 Draw
|
||||
|
|
@ -153,8 +59,9 @@ drawPoint.enable();
|
|||
|
||||
### 配置项 DrawOption
|
||||
|
||||
- editEnable boolean 是否允许编辑
|
||||
- selectEnable boolean 是否允许选中
|
||||
- editEnable `boolean` 是否允许编辑
|
||||
- selectEnable `boolean` 是否允许选中
|
||||
- data `geojson` 传入数据
|
||||
|
||||
### 方法
|
||||
|
||||
|
|
@ -179,101 +86,3 @@ drawPoint.enable();
|
|||
#### 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,246 @@
|
|||
---
|
||||
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 对象, 绘制控件需要传入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,255 @@
|
|||
---
|
||||
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: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
@ -52,6 +52,18 @@ layer.source(pointsData, {
|
|||
});
|
||||
```
|
||||
|
||||
### 方法
|
||||
获取聚合节点的原始数据,通过Source的 getClustersLeaves方法
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const source = layer.getSource();
|
||||
source.getClustersLeaves(id)
|
||||
layer.on('click', (e) => {
|
||||
console.log(source.getClustersLeaves(e.feature.cluster_id));
|
||||
});
|
||||
```
|
||||
|
||||
### 完整示例
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,35 @@ layer.source(data);
|
|||
```javascript
|
||||
layer.setData(data);
|
||||
```
|
||||
### 方法
|
||||
|
||||
#### getClustersLeaves(cluster_id)
|
||||
聚合图使用，获取聚合节点的原始数据
|
||||
|
||||
参数：
|
||||
id 聚合节点的 cluster_id
|
||||
|
||||
```javascript
|
||||
layer.on('click', (e) => {
|
||||
console.log(source.getClustersLeaves(e.feature.cluster_id));
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 方法
|
||||
|
||||
#### getClustersLeaves(cluster_id)
|
||||
|
||||
聚合图使用，获取聚合节点的原始数据
|
||||
|
||||
参数：
|
||||
id 聚合节点的 cluster_id
|
||||
|
||||
```javascript
|
||||
layer.on('click', (e) => {
|
||||
console.log(source.getClustersLeaves(e.feature.cluster_id));
|
||||
});
|
||||
```
|
||||
|
||||
#### JSON
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
commonjs({
|
||||
namedExports: {
|
||||
eventemitter3: [ 'EventEmitter' ],
|
||||
lodash: [ 'merge' ]
|
||||
lodash: [ 'merge', 'clone' ]
|
||||
}
|
||||
}),
|
||||
buble({
|
||||
|
|
|
|||
|
|
@ -68,6 +68,10 @@ export class DrawControl extends Control {
|
|||
const { controls } = this.controlOption as IDrawControlOption;
|
||||
const container = DOM.create('div', controlClass) as HTMLElement;
|
||||
this.addControls(controls, container);
|
||||
|
||||
// 代理每个绘制组件的事件
|
||||
|
||||
this.addControlEvent();
|
||||
// 监听组件 选中, 编辑
|
||||
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) {
|
||||
for (const type in controls) {
|
||||
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(
|
||||
tile: string,
|
||||
className: string,
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@ export default abstract class DrawFeature extends DrawMode {
|
|||
public setCurrentFeature(feature: Feature) {
|
||||
this.currentFeature = feature as Feature;
|
||||
// @ts-ignore
|
||||
// @ts-ignore
|
||||
this.pointFeatures = feature.properties.pointFeatures;
|
||||
|
||||
this.source.setFeatureActive(feature);
|
||||
|
|
@ -78,6 +77,20 @@ export default abstract class DrawFeature extends DrawMode {
|
|||
public enableLayer() {
|
||||
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() {
|
||||
this.drawLayer.hide();
|
||||
this.drawVertexLayer.hide();
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ export default class DrawPoint extends DrawFeature {
|
|||
protected createFeature(p: ILngLat): Feature {
|
||||
const feature = point([p.lng, p.lat], {
|
||||
id: this.getUniqId(),
|
||||
type: 'point',
|
||||
pointFeatures: [point([p.lng, p.lat])],
|
||||
});
|
||||
this.setCurrentFeature(feature as Feature);
|
||||
|
|
|
|||
|
|
@ -29,6 +29,11 @@ export default class DrawPolygon extends DrawFeature {
|
|||
this.type = 'polygon';
|
||||
this.drawMidVertexLayer = new DrawMidVertex(this);
|
||||
this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
|
||||
if (this.options.data) {
|
||||
this.initData();
|
||||
this.normalLayer.update(this.source.data);
|
||||
this.normalLayer.enableSelect();
|
||||
}
|
||||
}
|
||||
public enable() {
|
||||
super.enable();
|
||||
|
|
@ -116,9 +121,7 @@ export default class DrawPolygon extends DrawFeature {
|
|||
this.endPoint = lngLat;
|
||||
this.points.push(lngLat);
|
||||
const feature = this.createFeature(this.points);
|
||||
const properties = feature.properties as { pointFeatures: Feature[] };
|
||||
const pointfeatures = createPoint([this.points[0], this.endPoint]);
|
||||
// this.pointFeatures = pointfeatures.features;
|
||||
this.drawLayer.update(featureCollection([feature]));
|
||||
this.drawVertexLayer.update(featureCollection(pointfeatures.features));
|
||||
this.onDraw();
|
||||
|
|
@ -155,13 +158,17 @@ export default class DrawPolygon extends DrawFeature {
|
|||
};
|
||||
this.setCurrentFeature(newFeature[0]);
|
||||
}
|
||||
protected createFeature(points: ILngLat[]): Feature {
|
||||
const pointfeatures = createPoint(this.points);
|
||||
protected createFeature(
|
||||
points: ILngLat[],
|
||||
id?: string,
|
||||
active: boolean = true,
|
||||
): Feature {
|
||||
const pointfeatures = createPoint(points);
|
||||
this.pointFeatures = pointfeatures.features;
|
||||
const feature = createPolygon(points, {
|
||||
id: this.getUniqId(),
|
||||
id: id || this.getUniqId(),
|
||||
type: 'polygon',
|
||||
active: true,
|
||||
active,
|
||||
pointFeatures: this.pointFeatures,
|
||||
});
|
||||
this.setCurrentFeature(feature as Feature);
|
||||
|
|
@ -252,6 +259,26 @@ export default class DrawPolygon extends DrawFeature {
|
|||
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 端点响应事件
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export function renderFeature(fe: FeatureCollection, style: any): ILayer[] {
|
|||
function drawPoint(fe: FeatureCollection, style: any) {
|
||||
const layer = new PointLayer({
|
||||
zIndex: 2,
|
||||
pickingBuffer: 3,
|
||||
})
|
||||
.source(fe)
|
||||
.shape('circle')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Feature, FeatureCollection } from '@turf/helpers';
|
||||
// tslint:disable-next-line:no-submodule-imports
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
export default class DrawSource {
|
||||
public data: FeatureCollection;
|
||||
constructor(data?: FeatureCollection) {
|
||||
|
|
@ -9,6 +11,20 @@ export default class DrawSource {
|
|||
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 {
|
||||
const result = this.data.features.find((fe: Feature) => {
|
||||
return fe?.properties?.id === id;
|
||||
|
|
@ -16,6 +32,9 @@ export default class DrawSource {
|
|||
|
||||
return result;
|
||||
}
|
||||
public removeAllFeatures() {
|
||||
this.data = this.getDefaultData();
|
||||
}
|
||||
public removeFeature(feature: Feature) {
|
||||
const index = this.getFeatureIndex(feature);
|
||||
if (index !== undefined) {
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.2.0';
|
||||
const version = '2.2.1';
|
||||
export { version };
|
||||
|
|
|
|||
|
|
@ -39,7 +39,9 @@ export function cluster(
|
|||
type: 'Point',
|
||||
coordinates: item.coordinates,
|
||||
},
|
||||
properties: {},
|
||||
properties: {
|
||||
...item,
|
||||
},
|
||||
};
|
||||
});
|
||||
pointIndex.load(geojson.features);
|
||||
|
|
|
|||
|
|
@ -35,8 +35,13 @@ export default class AMapDraw extends React.Component {
|
|||
delete: true,
|
||||
},
|
||||
});
|
||||
scene.on('click', () => {
|
||||
console.log('click');
|
||||
// @ts-ignore
|
||||
window.drawControl = drawControl;
|
||||
drawControl.on('draw.create', (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
scene.on('dblclick', () => {
|
||||
drawControl.removeAllData();
|
||||
});
|
||||
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;
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import DrawCircle from './Components/DrawCircle';
|
|||
import DrawControl from './Components/DrawControl';
|
||||
import Line from './Components/DrawLine';
|
||||
import Point from './Components/DrawPoint';
|
||||
import DrawPolygon from './Components/DrawPolygon';
|
||||
import DrawRect from './Components/DrawRect';
|
||||
import Polygon from './Components/Polygon';
|
||||
|
||||
|
|
@ -18,5 +17,4 @@ storiesOf('绘制', module)
|
|||
.add('路径', () => <Line />, {})
|
||||
.add('绘制组件', () => <DrawControl />, {})
|
||||
.add('绘制圆', () => <DrawCircle />, {})
|
||||
.add('高德地图', () => <AMapDraw />, {})
|
||||
.add('绘制面', () => <DrawPolygon />, {});
|
||||
.add('高德地图', () => <AMapDraw />, {});
|
||||
|
|
|
|||
Loading…
Reference in New Issue