p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(draw): 增加键盘事件& control移除方法

This commit is contained in:
thinkinggis 2020-04-08 14:06:02 +08:00
parent ac3cb4409e
commit 62052648bc
26 changed files with 405 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
docs/api/draw/index.zh.md
View File

@ -2,3 +2,231 @@
title: 地图绘制组件 title: 地图绘制组件
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);
```
#### scene
scene 对象
#### options
control 配置项
| name | Type | Default | Description |
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
| controls | | 子组件 |
| style | | | 地图绘制样式 |
### 添加到地图
```javascript
scene.addControl(control);
```
### 从地图中移除
```javascript
scene.removeControl(control);
```
### Draw Type
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
#### DrawCircle
绘制圆形
```javascript
import { DrawCircle } from '@antv/l7-draw';
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
```
#### DrawRect
绘制四边形
```javascript
import { DrawRect } from '@antv/l7-draw';
const drawRect = new DrawRect(scene);
drawRect.enable();
```
#### DrawLine
绘制路径
```javascript
import { DrawLine } from '@antv/l7-draw';
const drawLine = new DrawLine(scene);
drawLine.enable();
```
#### DrawPoint
绘制点
```javascript
import { DrawPoint } from '@antv/l7-draw';
const drawPoint = new DrawPoint(scene);
drawPoint.enable();
```
#### DrawPolygon
绘制多边形
```javascript
import { DrawPolygon } from '@antv/l7-draw';
const drawPoint = new DrawPolygon(scene);
drawPoint.enable();
```
### 方法
#### enable
开始编辑，绘制完成之后会自动结束。
#### disable
结束编辑
### 事件
#### draw.create
绘制完成时触发该事件
#### draw.delete
图形删除时触发该事件
#### draw.update
图形更新时触发该事件，图形的平移，顶点的编辑
### style
- active 绘制过程中高亮颜色
- normal 正常显示状态
```javascript
{
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: {},
},
},
};
```

3
docs/api/react/popup.en.md
View File

@ -25,4 +25,5 @@ order: 4
import { Popup } from '@antv/l7-react'; import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />; <Popup option={{}} lnglat={[]} />;
``` ```
[popup 使用完整demo](../../../examples/react/covid#covid_bubble)
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)

3
docs/api/react/popup.zh.md
View File

@ -26,4 +26,5 @@ import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />; <Popup option={{}} lnglat={[]} />;
``` ```
[popup 使用完整demo](../../../examples/react/covid#covid_bubble)
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)

5
packages/component/src/control/BaseControl.ts
View File

@ -83,6 +83,10 @@ export default class Control extends EventEmitter {
public onAdd(): HTMLElement { public onAdd(): HTMLElement {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');
} }
public onRemove(): void {
throw new Error('Method not implemented.');
}
public hide() { public hide() {
const container = this.container; const container = this.container;
DOM.addClass(container, 'l7-control-hide'); DOM.addClass(container, 'l7-control-hide');
@ -98,6 +102,7 @@ export default class Control extends EventEmitter {
return this; return this;
} }
DOM.remove(this.container); DOM.remove(this.container);
this.onRemove();
} }
public _refocusOnMap(e: MouseEvent) { public _refocusOnMap(e: MouseEvent) {
// if map exists and event is not a keyboard event // if map exists and event is not a keyboard event

11
packages/component/src/control/layer.ts
View File

@ -89,13 +89,22 @@ export default class Layers extends Control {
return this; return this;
} }
public onRemove() {
if (!this.mapsService) {
return;
}
this.mapsService.off('click', this.collapse);
this.layers.forEach((layerItem) => {
layerItem.layer.off('remove', this.onLayerChange);
layerItem.layer.off('add', this.onLayerChange);
});
}
private initLayout() { private initLayout() {
const className = 'l7-control-layers'; const className = 'l7-control-layers';
const container = (this.container = DOM.create('div', className)); const container = (this.container = DOM.create('div', className));
const { collapsed } = this.controlOption; const { collapsed } = this.controlOption;
// makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released // makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released
container.setAttribute('aria-haspopup', 'true'); container.setAttribute('aria-haspopup', 'true');
const form = (this.form = DOM.create( const form = (this.form = DOM.create(
'form', 'form',
className + '-list', className + '-list',

4
packages/component/src/control/logo.ts
View File

@ -23,4 +23,8 @@ export default class Logo extends Control {
container.appendChild(anchor); container.appendChild(anchor);
return container; return container;
} }
public onRemove() {
return null;
}
} }

1
packages/core/src/services/component/IControlService.ts
View File

@ -27,6 +27,7 @@ export interface IControl {
setPosition(pos: PositionType): void; setPosition(pos: PositionType): void;
addTo(sceneContainer: Container): void; addTo(sceneContainer: Container): void;
onAdd(): HTMLElement; onAdd(): HTMLElement;
onRemove(): void;
hide(): void; hide(): void;
show(): void; show(): void;
remove(): void; remove(): void;

44
packages/draw/README.md
View File

@ -10,3 +10,47 @@ import { DrawControl } from '@antv/l7-draw';
``` ```
CDN 版本引用 CDN 版本引用
```html
<head>
<! --引入最新版的L7-Draw -->
<script src = 'https://unpkg.com/@antv/l7-draw'></script>
</head>
```
### example
```javascript
import { Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { DrawControl } from '@antv/l7-draw';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark', // hosted style id
center: [112.874, 32.76], // starting position
zoom: 12, // starting zoom
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawControl = new DrawControl(scene, {
position: 'topright',
layout: 'horizontal', // horizontal vertical
controls: {
point: true,
polygon: true,
line: true,
circle: true,
rect: true,
delete: true,
},
});
scene.addControl(drawControl);
});
```

12
packages/draw/src/draw_control.ts
View File

@ -2,7 +2,7 @@
* @Author: lzxue * @Author: lzxue
* @Date: 2020-04-03 19:24:16 * @Date: 2020-04-03 19:24:16
* @Last Modified by: mikey.zhaopeng * @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-04-07 20:15:45 * @Last Modified time: 2020-04-08 11:12:08
*/ */
import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7'; import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
import './css/draw.less'; import './css/draw.less';
@ -38,7 +38,6 @@ export class DrawControl extends Control {
private draw: { private draw: {
[key: string]: DrawFeature; [key: string]: DrawFeature;
} = {}; } = {};
private drawDelete: DrawDelete;
private currentDraw: DrawFeature; private currentDraw: DrawFeature;
private scene: Scene; private scene: Scene;
constructor(scene: Scene, options: Partial<IDrawControlOption>) { constructor(scene: Scene, options: Partial<IDrawControlOption>) {
@ -65,6 +64,14 @@ export class DrawControl extends Control {
// 监听组件 选中, 编辑 // 监听组件 选中, 编辑
return container; return container;
} }
public onRemove() {
for (const draw in this.draw) {
if (this.draw[draw]) {
this.draw[draw].destory();
}
}
}
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]) { if (DrawType[type]) {
@ -108,7 +115,6 @@ export class DrawControl extends Control {
this.draw[draw].enable(); this.draw[draw].enable();
} else { } else {
this.draw[draw].disable(); this.draw[draw].disable();
// this.draw[draw].emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
} }
} }
}; };

21
packages/draw/src/modes/draw_circle.ts
View File

@ -1,7 +1,12 @@
import { IInteractionTarget, ILngLat, PointLayer, Scene } from '@antv/l7'; import {
IInteractionTarget,
ILayer,
ILngLat,
PointLayer,
Scene,
} from '@antv/l7';
import { import {
Feature, Feature,
FeatureCollection,
featureCollection, featureCollection,
Geometries, Geometries,
Properties, Properties,
@ -18,6 +23,7 @@ export default class DrawCircle extends DrawFeature {
protected startPoint: ILngLat; protected startPoint: ILngLat;
protected endPoint: ILngLat; protected endPoint: ILngLat;
protected pointFeatures: Feature[]; protected pointFeatures: Feature[];
protected centerLayer: ILayer;
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) { constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options); super(scene, options);
this.type = 'circle'; this.type = 'circle';
@ -30,7 +36,6 @@ export default class DrawCircle extends DrawFeature {
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;
// @ts-ignore // @ts-ignore
this.startPoint = feature.properties.startPoint; this.startPoint = feature.properties.startPoint;
@ -48,7 +53,7 @@ export default class DrawCircle extends DrawFeature {
protected onDragStart = (e: IInteractionTarget) => { protected onDragStart = (e: IInteractionTarget) => {
if (this.drawStatus !== 'Drawing') { if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null); this.drawLayer.emit('unclick', null);
} }
this.startPoint = e.lngLat; this.startPoint = e.lngLat;
this.setCursor('grabbing'); this.setCursor('grabbing');
@ -60,14 +65,14 @@ export default class DrawCircle extends DrawFeature {
this.endPoint = e.lngLat; this.endPoint = e.lngLat;
const feature = this.createFeature() as Feature<Geometries, Properties>; const feature = this.createFeature() as Feature<Geometries, Properties>;
const properties = feature.properties as { pointFeatures: Feature[] }; const properties = feature.properties as { pointFeatures: Feature[] };
this.drawRender.update(featureCollection([feature])); this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(properties.pointFeatures)); this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
}; };
protected onDragEnd = () => { protected onDragEnd = () => {
const feature = this.createFeature(`${this.getUniqId()}`); const feature = this.createFeature(`${this.getUniqId()}`);
const properties = feature.properties as { pointFeatures: Feature[] }; const properties = feature.properties as { pointFeatures: Feature[] };
this.drawRender.update(featureCollection([feature])); this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(properties.pointFeatures)); this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
this.emit(DrawEvent.CREATE, this.currentFeature); this.emit(DrawEvent.CREATE, this.currentFeature);
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT); this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
@ -76,7 +81,7 @@ export default class DrawCircle extends DrawFeature {
protected moveFeature(delta: ILngLat): void { protected moveFeature(delta: ILngLat): void {
const newFeature = moveFeatures([this.currentFeature as Feature], delta); const newFeature = moveFeatures([this.currentFeature as Feature], delta);
this.drawRender.updateData(featureCollection(newFeature)); this.drawLayer.updateData(featureCollection(newFeature));
const newPointFeture = moveFeatures(this.pointFeatures, delta); const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawVertexLayer.updateData(featureCollection(newPointFeture)); this.drawVertexLayer.updateData(featureCollection(newPointFeture));
const newStartPoint = movePoint( const newStartPoint = movePoint(
@ -116,7 +121,7 @@ export default class DrawCircle extends DrawFeature {
this.endPoint = endPoint; this.endPoint = endPoint;
const newFeature = this.createFeature(); const newFeature = this.createFeature();
const properties = newFeature.properties as { pointFeatures: Feature[] }; const properties = newFeature.properties as { pointFeatures: Feature[] };
this.drawRender.updateData(featureCollection([newFeature])); this.drawLayer.updateData(featureCollection([newFeature]));
this.drawVertexLayer.updateData( this.drawVertexLayer.updateData(
featureCollection(properties.pointFeatures), featureCollection(properties.pointFeatures),
); );

1
packages/draw/src/modes/draw_delete.ts
View File

@ -9,7 +9,6 @@ export interface IDrawCircleOption extends IDrawOption {
} }
export default class DrawDelete extends DrawFeature { export default class DrawDelete extends DrawFeature {
private endPoint: ILngLat;
// 绘制完成之后显示 // 绘制完成之后显示
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) { constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
super(scene, options); super(scene, options);

7
packages/draw/src/modes/draw_edit.ts
View File

@ -7,12 +7,7 @@ export interface IDrawCircleOption extends IDrawOption {
units: unitsType; units: unitsType;
steps: number; steps: number;
} }
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
export default class DrawEdit extends DrawFeature { export default class DrawEdit extends DrawFeature {
private center: ILngLat;
private endPoint: ILngLat; private endPoint: ILngLat;
// 绘制完成之后显示 // 绘制完成之后显示
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) { constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
@ -41,7 +36,7 @@ export default class DrawEdit extends DrawFeature {
}; };
protected onDragEnd = () => { protected onDragEnd = () => {
this.emit(DrawEvent.UPDATE, null); this.emit(DrawEvent.UPDATE, this.currentFeature);
this.resetCursor(); this.resetCursor();
this.disable(); this.disable();
}; };

56
packages/draw/src/modes/draw_feature.ts
View File

@ -27,19 +27,15 @@ export default abstract class DrawFeature extends DrawMode {
public editMode: DrawEdit; public editMode: DrawEdit;
public deleteMode: DrawDelete; public deleteMode: DrawDelete;
protected renderLayer: RenderLayer; protected normalLayer: RenderLayer;
protected drawRender: DrawRender; protected drawLayer: DrawRender;
protected drawVertexLayer: DrawVertexLayer; protected drawVertexLayer: DrawVertexLayer;
protected centerLayer: ILayer;
// 编辑过程中显示
protected drawLayer: ILayer;
protected drawLineLayer: ILayer;
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) { constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
super(scene, options); super(scene, options);
this.drawRender = new DrawRender(this); this.drawLayer = new DrawRender(this);
this.drawVertexLayer = new DrawVertexLayer(this); this.drawVertexLayer = new DrawVertexLayer(this);
this.renderLayer = new RenderLayer(this); this.normalLayer = new RenderLayer(this);
// this.editLayer = new EditLayer(this); // this.editLayer = new EditLayer(this);
this.selectMode = new DrawSelected(this.scene, {}); this.selectMode = new DrawSelected(this.scene, {});
@ -56,6 +52,7 @@ export default abstract class DrawFeature extends DrawMode {
this.deleteMode.on(DrawEvent.DELETE, this.onDrawDelete); this.deleteMode.on(DrawEvent.DELETE, this.onDrawDelete);
this.on(DrawEvent.CREATE, this.onDrawCreate); this.on(DrawEvent.CREATE, this.onDrawCreate);
this.on(DrawEvent.MODE_CHANGE, this.onModeChange); this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
document.addEventListener('keydown', this.addKeyDownEvent);
} }
public abstract drawFinish(): void; public abstract drawFinish(): void;
public setCurrentFeature(feature: Feature) { public setCurrentFeature(feature: Feature) {
@ -71,19 +68,19 @@ export default abstract class DrawFeature extends DrawMode {
} }
public disableLayer() { public disableLayer() {
// this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); // this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
this.drawRender.disableDrag(); this.drawLayer.disableSelect();
} }
public enableLayer() { public enableLayer() {
this.drawRender.enableDrag(); this.drawLayer.enableSelect();
} }
public clear() { public clear() {
this.drawRender.hide(); this.drawLayer.hide();
this.drawVertexLayer.hide(); this.drawVertexLayer.hide();
this.hideOtherLayer(); this.hideOtherLayer();
this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
} }
public reset() { public reset() {
this.drawRender.show(); this.drawLayer.show();
this.drawVertexLayer.show(); this.drawVertexLayer.show();
this.showOtherLayer(); this.showOtherLayer();
} }
@ -91,6 +88,17 @@ export default abstract class DrawFeature extends DrawMode {
public addVertex(feature: Feature): void { public addVertex(feature: Feature): void {
throw new Error('子类未实现该方法'); throw new Error('子类未实现该方法');
} }
public onRemove() {
this.destory();
this.selectMode.destory();
this.editMode.destory();
this.source.destroy();
this.drawLayer.destroy();
this.drawVertexLayer.destroy();
this.normalLayer.destroy();
document.removeEventListener('keydown', this.addKeyDownEvent);
}
protected getDefaultOptions() { protected getDefaultOptions() {
return { return {
steps: 64, steps: 64,
@ -130,7 +138,7 @@ export default abstract class DrawFeature extends DrawMode {
case DrawModes.DIRECT_SELECT: case DrawModes.DIRECT_SELECT:
this.editMode.enable(); this.editMode.enable();
this.editMode.setEditFeature(this.currentFeature as Feature); this.editMode.setEditFeature(this.currentFeature as Feature);
this.drawRender.updateData( this.drawLayer.updateData(
featureCollection([this.currentFeature as Feature]), featureCollection([this.currentFeature as Feature]),
); );
this.drawVertexLayer.updateData( this.drawVertexLayer.updateData(
@ -144,8 +152,8 @@ export default abstract class DrawFeature extends DrawMode {
case DrawModes.SIMPLE_SELECT: case DrawModes.SIMPLE_SELECT:
this.selectMode.setSelectedFeature(this.currentFeature as Feature); this.selectMode.setSelectedFeature(this.currentFeature as Feature);
this.selectMode.enable(); this.selectMode.enable();
this.drawRender.enableDrag(); this.drawLayer.enableSelect();
this.drawRender.updateData( this.drawLayer.updateData(
featureCollection([this.currentFeature as Feature]), featureCollection([this.currentFeature as Feature]),
); );
this.drawVertexLayer.updateData( this.drawVertexLayer.updateData(
@ -153,7 +161,7 @@ export default abstract class DrawFeature extends DrawMode {
); );
this.drawVertexLayer.disableEdit(); this.drawVertexLayer.disableEdit();
this.drawVertexLayer.show(); this.drawVertexLayer.show();
this.drawRender.show(); this.drawLayer.show();
this.showOtherLayer(); this.showOtherLayer();
this.drawStatus = 'DrawSelected'; this.drawStatus = 'DrawSelected';
break; break;
@ -163,8 +171,8 @@ export default abstract class DrawFeature extends DrawMode {
this.drawVertexLayer.hide(); this.drawVertexLayer.hide();
this.drawVertexLayer.disableEdit(); this.drawVertexLayer.disableEdit();
this.hideOtherLayer(); this.hideOtherLayer();
this.renderLayer.update(this.source.data); this.normalLayer.update(this.source.data);
this.renderLayer.enableDrag(); this.normalLayer.enableSelect();
this.drawStatus = 'DrawFinish'; this.drawStatus = 'DrawFinish';
break; break;
} }
@ -176,6 +184,7 @@ export default abstract class DrawFeature extends DrawMode {
private onDrawUpdate = (feature: Feature) => { private onDrawUpdate = (feature: Feature) => {
this.source.updateFeature(this.currentFeature as Feature); this.source.updateFeature(this.currentFeature as Feature);
this.emit(DrawEvent.UPDATE, this.currentFeature);
}; };
private onDrawMove = (delta: ILngLat) => { private onDrawMove = (delta: ILngLat) => {
@ -190,10 +199,15 @@ export default abstract class DrawFeature extends DrawMode {
if (this.drawStatus === 'DrawSelected') { if (this.drawStatus === 'DrawSelected') {
this.clear(); this.clear();
this.source.removeFeature(this.currentFeature as Feature); this.source.removeFeature(this.currentFeature as Feature);
this.renderLayer.update(this.source.data); this.normalLayer.update(this.source.data);
// this.reset();
} }
};
// this.source.removeFeature(this.currentFeature as Feature private addKeyDownEvent = (event: KeyboardEvent) => {
// tslint:disable-next-line:no-arg
const e = event || window.event;
if (e && e.keyCode === 8) {
this.deleteMode.enable();
}
}; };
} }

2
packages/draw/src/modes/draw_line.ts
View File

@ -24,7 +24,7 @@ export default class DrawLine extends DrawPolygon {
protected moveFeature(delta: ILngLat): Feature { protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta); const newFeature = moveFeatures([this.currentFeature as Feature], delta);
const newPointFeture = moveFeatures(this.pointFeatures, delta); const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawRender.updateData(featureCollection(newFeature)); this.drawLayer.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newPointFeture)); this.drawVertexLayer.updateData(featureCollection(newPointFeture));
this.currentFeature = newFeature[0]; this.currentFeature = newFeature[0];
this.pointFeatures = newPointFeture; this.pointFeatures = newPointFeture;

5
packages/draw/src/modes/draw_mode.ts
View File

@ -119,6 +119,11 @@ export default abstract class DrawMode extends EventEmitter {
container.removeAttribute('style'); container.removeAttribute('style');
} }
} }
public destory() {
DrawFeatureId = 0;
this.removeAllListeners();
this.disable();
}
protected getDefaultOptions() { protected getDefaultOptions() {
return {}; return {};

13
packages/draw/src/modes/draw_point.ts
View File

@ -1,10 +1,5 @@
import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7'; import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7';
import { import { Feature, featureCollection, point } from '@turf/helpers';
Feature,
FeatureCollection,
featureCollection,
point,
} from '@turf/helpers';
import { DrawEvent, DrawModes, unitsType } from '../util/constant'; import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import moveFeatures from '../util/move_featrues'; import moveFeatures from '../util/move_featrues';
import DrawFeature, { IDrawFeatureOption } from './draw_feature'; import DrawFeature, { IDrawFeatureOption } from './draw_feature';
@ -45,18 +40,18 @@ export default class DrawPoint extends DrawFeature {
protected onClick = (e: any) => { protected onClick = (e: any) => {
if (this.drawStatus !== 'Drawing') { if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null); this.drawLayer.emit('unclick', null);
} }
const lngLat = e.lngLat || e.lnglat; const lngLat = e.lngLat || e.lnglat;
const feature = this.createFeature(lngLat); const feature = this.createFeature(lngLat);
this.drawRender.update(featureCollection([feature])); this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection([feature])); this.drawVertexLayer.update(featureCollection([feature]));
this.drawFinish(); this.drawFinish();
}; };
protected moveFeature(delta: ILngLat): Feature { protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta); const newFeature = moveFeatures([this.currentFeature as Feature], delta);
this.drawRender.updateData(featureCollection(newFeature)); this.drawLayer.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newFeature)); this.drawVertexLayer.updateData(featureCollection(newFeature));
this.currentFeature = newFeature[0]; this.currentFeature = newFeature[0];
this.pointFeatures = newFeature; this.pointFeatures = newFeature;

16
packages/draw/src/modes/draw_polygon.ts
View File

@ -46,7 +46,7 @@ export default class DrawPolygon extends DrawFeature {
public drawFinish() { public drawFinish() {
const feature = this.createFeature(this.points); const feature = this.createFeature(this.points);
const properties = feature.properties as { pointFeatures: Feature[] }; const properties = feature.properties as { pointFeatures: Feature[] };
this.drawRender.update(featureCollection([feature])); this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(properties.pointFeatures)); this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
// @ts-ignore // @ts-ignore
// feature.properties.pointFeatures = pointfeatures; // feature.properties.pointFeatures = pointfeatures;
@ -84,7 +84,7 @@ export default class DrawPolygon extends DrawFeature {
} }
const pointfeatures = createPoint(points); const pointfeatures = createPoint(points);
this.pointFeatures = pointfeatures.features; this.pointFeatures = pointfeatures.features;
this.drawRender.updateData(featureCollection([feature])); this.drawLayer.updateData(featureCollection([feature]));
this.drawVertexLayer.updateData(pointfeatures); this.drawVertexLayer.updateData(pointfeatures);
this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures)); this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
// @ts-ignore // @ts-ignore
@ -111,7 +111,7 @@ export default class DrawPolygon extends DrawFeature {
protected onClick = (e: any) => { protected onClick = (e: any) => {
if (this.drawStatus !== 'Drawing') { if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null); this.drawLayer.emit('unclick', null);
} }
const lngLat = e.lngLat || e.lnglat; const lngLat = e.lngLat || e.lnglat;
this.endPoint = lngLat; this.endPoint = lngLat;
@ -120,7 +120,7 @@ export default class DrawPolygon extends DrawFeature {
const properties = feature.properties as { pointFeatures: Feature[] }; 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.pointFeatures = pointfeatures.features;
this.drawRender.update(featureCollection([feature])); this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(pointfeatures.features)); this.drawVertexLayer.update(featureCollection(pointfeatures.features));
this.onDraw(); this.onDraw();
}; };
@ -133,7 +133,7 @@ export default class DrawPolygon extends DrawFeature {
const tmpPoints = this.points.slice(); const tmpPoints = this.points.slice();
tmpPoints.push(lngLat); tmpPoints.push(lngLat);
const feature = this.createFeature(tmpPoints); const feature = this.createFeature(tmpPoints);
this.drawRender.update(featureCollection([feature])); this.drawLayer.update(featureCollection([feature]));
}; };
protected onDblClick = (e: any) => { protected onDblClick = (e: any) => {
@ -148,7 +148,7 @@ export default class DrawPolygon extends DrawFeature {
protected moveFeature(delta: ILngLat): void { protected moveFeature(delta: ILngLat): void {
const newFeature = moveFeatures([this.currentFeature as Feature], delta); const newFeature = moveFeatures([this.currentFeature as Feature], delta);
const newPointFeture = moveFeatures(this.pointFeatures, delta); const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawRender.updateData(featureCollection(newFeature)); this.drawLayer.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newPointFeture)); this.drawVertexLayer.updateData(featureCollection(newPointFeture));
newFeature[0].properties = { newFeature[0].properties = {
...newFeature[0].properties, ...newFeature[0].properties,
@ -186,7 +186,7 @@ export default class DrawPolygon extends DrawFeature {
this.drawVertexLayer.updateData(featureCollection(this.pointFeatures)); this.drawVertexLayer.updateData(featureCollection(this.pointFeatures));
this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures)); this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
this.editPolygonVertex(id, vertex); this.editPolygonVertex(id, vertex);
this.drawRender.updateData( this.drawLayer.updateData(
featureCollection([this.currentFeature as Feature]), featureCollection([this.currentFeature as Feature]),
); );
const feature = this.currentFeature as Feature; const feature = this.currentFeature as Feature;
@ -249,7 +249,7 @@ export default class DrawPolygon extends DrawFeature {
coords[id] = [vertex.lng, vertex.lat]; coords[id] = [vertex.lng, vertex.lat];
} }
this.setCurrentFeature(feature); this.setCurrentFeature(feature);
this.drawRender.updateData( this.drawLayer.updateData(
featureCollection([this.currentFeature as Feature]), featureCollection([this.currentFeature as Feature]),
); );
} }

1
packages/draw/src/modes/draw_selected.ts
View File

@ -28,7 +28,6 @@ export default class DrawSelect extends DrawFeature {
// 绘制完成之后显示 // 绘制完成之后显示
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) { constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
super(scene, options); super(scene, options);
// this.editLayer = new EditRender(this);
} }
public setSelectedFeature(feature: Feature) { public setSelectedFeature(feature: Feature) {

16
packages/draw/src/render/draw.ts
View File

@ -15,7 +15,7 @@ export default class DrawLayer extends BaseRender {
this.drawLayers = renderFeature(feature, style); this.drawLayers = renderFeature(feature, style);
this.addLayers(); this.addLayers();
} }
public enableDrag() { public enableSelect() {
this.show(); this.show();
if (this.isEnableDrag) { if (this.isEnableDrag) {
return; return;
@ -24,10 +24,10 @@ export default class DrawLayer extends BaseRender {
layer.on('mouseenter', this.onMouseMove); layer.on('mouseenter', this.onMouseMove);
layer.on('mouseout', this.onUnMouseMove); layer.on('mouseout', this.onUnMouseMove);
layer.on('click', this.onClick); layer.on('click', this.onClick);
layer.on('unmouseup', this.onUnClick); layer.on('unclick', this.onUnClick);
this.isEnableDrag = true; this.isEnableDrag = true;
} }
public disableDrag() { public disableSelect() {
if (!this.isEnableDrag) { if (!this.isEnableDrag) {
return; return;
} }
@ -35,7 +35,7 @@ export default class DrawLayer extends BaseRender {
layer.off('mouseenter', this.onMouseMove); layer.off('mouseenter', this.onMouseMove);
layer.off('mouseout', this.onUnMouseMove); layer.off('mouseout', this.onUnMouseMove);
layer.off('click', this.onClick); layer.off('click', this.onClick);
layer.off('unmouseup', this.onUnClick); layer.off('unclick', this.onUnClick);
this.isEnableDrag = false; this.isEnableDrag = false;
} }
@ -44,7 +44,7 @@ export default class DrawLayer extends BaseRender {
return; return;
} }
const layer = this.drawLayers[0]; const layer = this.drawLayers[0];
layer.on('unmouseup', this.onUnClick); layer.on('unclick', this.onUnClick);
this.isEnableDrag = true; this.isEnableDrag = true;
} }
@ -53,7 +53,7 @@ export default class DrawLayer extends BaseRender {
return; return;
} }
const layer = this.drawLayers[0]; const layer = this.drawLayers[0];
layer.off('unmouseup', this.onUnClick); layer.off('unclick', this.onUnClick);
this.isEnableDrag = false; this.isEnableDrag = false;
} }
@ -68,7 +68,7 @@ export default class DrawLayer extends BaseRender {
private onClick = (e: any) => { private onClick = (e: any) => {
this.draw.selectMode.disable(); this.draw.selectMode.disable();
this.draw.editMode.enable(); this.draw.editMode.enable();
this.disableDrag(); this.disableSelect();
this.draw.resetCursor(); this.draw.resetCursor();
this.enableEdit(); this.enableEdit();
this.draw.setCurrentFeature(e.feature); this.draw.setCurrentFeature(e.feature);
@ -81,7 +81,7 @@ export default class DrawLayer extends BaseRender {
this.draw.source.setFeatureUnActive( this.draw.source.setFeatureUnActive(
this.draw.getCurrentFeature() as Feature, this.draw.getCurrentFeature() as Feature,
); );
this.disableDrag(); this.disableSelect();
this.disableEdit(); this.disableEdit();
this.hide(); this.hide();
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);

6
packages/draw/src/render/draw_result.ts
View File

@ -14,7 +14,7 @@ export default class DrawResultLayer extends BaseRender {
this.addFilter(); this.addFilter();
this.addLayers(); this.addLayers();
} }
public enableDrag() { public enableSelect() {
if (this.isEnableDrag) { if (this.isEnableDrag) {
return; return;
} }
@ -22,7 +22,7 @@ export default class DrawResultLayer extends BaseRender {
layer.on('click', this.onClick); layer.on('click', this.onClick);
this.isEnableDrag = true; this.isEnableDrag = true;
} }
public disableDrag() { public disableSelect() {
if (!this.isEnableDrag) { if (!this.isEnableDrag) {
return; return;
} }
@ -31,7 +31,7 @@ export default class DrawResultLayer extends BaseRender {
this.isEnableDrag = false; this.isEnableDrag = false;
} }
public enableDelete() { public enableDelete() {
this.disableDrag(); this.disableSelect();
const layer = this.drawLayers[0]; const layer = this.drawLayers[0];
layer.on('click', this.onDeleteClick); layer.on('click', this.onDeleteClick);
} }

4
packages/draw/src/render/draw_vertex.ts
View File

@ -8,10 +8,10 @@ export default class DrawVertexLayer extends BaseRender {
this.drawLayers = renderFeature(feature, style); this.drawLayers = renderFeature(feature, style);
this.addLayers(); this.addLayers();
} }
public enableDrag() { public enableSelect() {
return; return;
} }
public disableDrag() { public disableSelect() {
return; return;
} }

3
packages/draw/src/source.ts
View File

@ -46,6 +46,9 @@ export default class DrawSource {
this.removeFeature(feature); this.removeFeature(feature);
this.addFeature(feature); this.addFeature(feature);
} }
public destroy() {
this.data = this.getDefaultData();
}
private getDefaultData(): FeatureCollection { private getDefaultData(): FeatureCollection {
return { return {
type: 'FeatureCollection', type: 'FeatureCollection',

8
packages/l7/__tests__/version.spec.ts Normal file
View File

@ -0,0 +1,8 @@
import { version } from '../src/version';
describe('version', () => {
it('should match the `version` field of package.json', () => {
const expected = require('../package.json').version;
expect(version).toBe(expected);
});
});

2
packages/l7/src/index.ts
View File

@ -4,4 +4,4 @@ export * from '@antv/l7-maps';
export * from '@antv/l7-layers'; export * from '@antv/l7-layers';
export * from '@antv/l7-component'; export * from '@antv/l7-component';
export * from '@antv/l7-utils'; export * from '@antv/l7-utils';
export const version = '2.1.11'; export * from './version';

2
packages/l7/src/version.ts Normal file
View File

@ -0,0 +1,2 @@
const version = '2.1.11';
export { version };

6
stories/Draw/Components/Circle.tsx
View File

@ -25,6 +25,12 @@ export default class Circle extends React.Component {
scene.on('loaded', () => { scene.on('loaded', () => {
const drawCircle = new DrawCircle(scene); const drawCircle = new DrawCircle(scene);
drawCircle.enable(); drawCircle.enable();
drawCircle.on('draw.create', (e: any) => {
console.log(e);
});
drawCircle.on('draw.update', (e: any) => {
console.log(e);
});
}); });
} }