diff --git a/docs/api/draw/api.en.md b/docs/api/draw/api.en.md
index df24469f38..635b7f29ce 100644
--- a/docs/api/draw/api.en.md
+++ b/docs/api/draw/api.en.md
@@ -157,10 +157,18 @@ drawPoint.enable();
开始编辑，绘制完成之后会自动结束。
+```javascript
+draw.enable()
+```
+
#### disable
结束编辑
+```javascript
+draw.enable()
+```
+
### 事件
#### draw.create
diff --git a/docs/api/draw/api.zh.md b/docs/api/draw/api.zh.md
index 301f2120e1..cc4d0a0961 100644
--- a/docs/api/draw/api.zh.md
+++ b/docs/api/draw/api.zh.md
@@ -1,102 +1,8 @@
---
-title: 地图绘制组件
+title: Draw 实例
order: 2
---
-地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
-
-# 使用
-
-**using modules**
-
-```javascript
-import { DrawControl } from '@antv/l7-draw';
-```
-
-**CDN 版本引用**
-
-```html
-
-
-
-
-```
-
-### 参数
-
-```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: {},
- },
- },
-};
-```
diff --git a/docs/api/draw/draw_control.en.md b/docs/api/draw/draw_control.en.md
new file mode 100644
index 0000000000..1543dc4995
--- /dev/null
+++ b/docs/api/draw/draw_control.en.md
@@ -0,0 +1,250 @@
+---
+title: Draw UI Component
+order: 2
+---
+地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
+
+# 使用
+
+**using modules**
+
+```javascript
+import { DrawControl } from '@antv/l7-draw';
+```
+
+**CDN 版本引用**
+
+```html
+
+
+
+
+```
+
+### 参数
+
+```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: {},
+ },
+ },
+};
+```
+
+
+
diff --git a/docs/api/draw/draw_control.zh.md b/docs/api/draw/draw_control.zh.md
new file mode 100644
index 0000000000..ac7ecb6304
--- /dev/null
+++ b/docs/api/draw/draw_control.zh.md
@@ -0,0 +1,260 @@
+---
+title: 绘制 UI 组件
+order: 2
+---
+地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
+
+# 使用
+
+**using modules**
+
+```javascript
+import { DrawControl } from '@antv/l7-draw';
+```
+
+**CDN 版本引用**
+
+```html
+
+
+
+
+```
+
+### 参数
+
+```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: {},
+ },
+ },
+};
+```
+
+
+
diff --git a/packages/draw/rollup.config.js b/packages/draw/rollup.config.js
index 18c711ef67..9f46514f9c 100644
--- a/packages/draw/rollup.config.js
+++ b/packages/draw/rollup.config.js
@@ -25,7 +25,7 @@ export default {
commonjs({
namedExports: {
eventemitter3: [ 'EventEmitter' ],
- lodash: [ 'merge' ]
+ lodash: [ 'merge', 'clone' ]
}
}),
buble({
diff --git a/packages/draw/src/draw_control.ts b/packages/draw/src/draw_control.ts
index 9af5be1e87..230fa40159 100644
--- a/packages/draw/src/draw_control.ts
+++ b/packages/draw/src/draw_control.ts
@@ -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,
diff --git a/packages/draw/src/modes/draw_circle.ts b/packages/draw/src/modes/draw_circle.ts
index 92606cb227..d3bd645902 100644
--- a/packages/draw/src/modes/draw_circle.ts
+++ b/packages/draw/src/modes/draw_circle.ts
@@ -15,6 +15,7 @@ import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { createCircle, createPoint } from '../util/create_geometry';
import moveFeatures, { movePoint } from '../util/move_featrues';
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
+import circle from '@turf/circle';
export default class DrawCircle extends DrawFeature {
protected startPoint: ILngLat;
protected endPoint: ILngLat;
diff --git a/packages/draw/src/modes/draw_feature.ts b/packages/draw/src/modes/draw_feature.ts
index cb61360eb4..eda9ad2dba 100644
--- a/packages/draw/src/modes/draw_feature.ts
+++ b/packages/draw/src/modes/draw_feature.ts
@@ -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();
diff --git a/packages/draw/src/modes/draw_point.ts b/packages/draw/src/modes/draw_point.ts
index 62ac73b78e..a9a7fb8cc7 100644
--- a/packages/draw/src/modes/draw_point.ts
+++ b/packages/draw/src/modes/draw_point.ts
@@ -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);
diff --git a/packages/draw/src/modes/draw_polygon.ts b/packages/draw/src/modes/draw_polygon.ts
index b6c45812c5..b86bb5bcb0 100644
--- a/packages/draw/src/modes/draw_polygon.ts
+++ b/packages/draw/src/modes/draw_polygon.ts
@@ -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 端点响应事件
diff --git a/packages/draw/src/render/renderFeature.ts b/packages/draw/src/render/renderFeature.ts
index 2b29221152..a3470206f1 100644
--- a/packages/draw/src/render/renderFeature.ts
+++ b/packages/draw/src/render/renderFeature.ts
@@ -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')
diff --git a/packages/draw/src/source.ts b/packages/draw/src/source.ts
index e45b7ea671..befbb667c5 100644
--- a/packages/draw/src/source.ts
+++ b/packages/draw/src/source.ts
@@ -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) {
diff --git a/stories/Draw/Components/AmapDraw.tsx b/stories/Draw/Components/AmapDraw.tsx
index e1ef95554c..81ac7c1ade 100644
--- a/stories/Draw/Components/AmapDraw.tsx
+++ b/stories/Draw/Components/AmapDraw.tsx
@@ -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);
});
diff --git a/stories/Draw/Components/DrawPolygon.tsx b/stories/Draw/Components/DrawPolygon.tsx
deleted file mode 100644
index 10cf5f7f90..0000000000
--- a/stories/Draw/Components/DrawPolygon.tsx
+++ /dev/null
@@ -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 (
-
- );
- }
- 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,
- });
- }
-}
diff --git a/stories/Draw/Components/Polygon.tsx b/stories/Draw/Components/Polygon.tsx
index b7b42d0fd1..e8867de0f4 100644
--- a/stories/Draw/Components/Polygon.tsx
+++ b/stories/Draw/Components/Polygon.tsx
@@ -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();
});
}
diff --git a/stories/Draw/Draw.stories.tsx b/stories/Draw/Draw.stories.tsx
index 15209db892..ad3dee147b 100644
--- a/stories/Draw/Draw.stories.tsx
+++ b/stories/Draw/Draw.stories.tsx
@@ -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('路径', () => , {})
.add('绘制组件', () => , {})
.add('绘制圆', () => , {})
- .add('高德地图', () => , {})
- .add('绘制面', () => , {});
+ .add('高德地图', () => , {});