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: 地图绘制组件
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';
<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 使用完整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 {
throw new Error('Method not implemented.');
}
public onRemove(): void {
throw new Error('Method not implemented.');
}
public hide() {
const container = this.container;
DOM.addClass(container, 'l7-control-hide');
@ -98,6 +102,7 @@ export default class Control extends EventEmitter {
return this;
}
DOM.remove(this.container);
this.onRemove();
}
public _refocusOnMap(e: MouseEvent) {
// 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;
}
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() {
const className = 'l7-control-layers';
const container = (this.container = DOM.create('div', className));
const { collapsed } = this.controlOption;
// 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');
const form = (this.form = DOM.create(
'form',
className + '-list',

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

@ -23,4 +23,8 @@ export default class Logo extends Control {
container.appendChild(anchor);
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;
addTo(sceneContainer: Container): void;
onAdd(): HTMLElement;
onRemove(): void;
hide(): void;
show(): void;
remove(): void;

44
packages/draw/README.md
View File

@ -10,3 +10,47 @@ import { DrawControl } from '@antv/l7-draw';
```
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
* @Date: 2020-04-03 19:24:16
* @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 './css/draw.less';
@ -38,7 +38,6 @@ export class DrawControl extends Control {
private draw: {
[key: string]: DrawFeature;
} = {};
private drawDelete: DrawDelete;
private currentDraw: DrawFeature;
private scene: Scene;
constructor(scene: Scene, options: Partial<IDrawControlOption>) {
@ -65,6 +64,14 @@ export class DrawControl extends Control {
// 监听组件 选中, 编辑
return container;
}
public onRemove() {
for (const draw in this.draw) {
if (this.draw[draw]) {
this.draw[draw].destory();
}
}
}
private addControls(controls: IControls, container: HTMLElement) {
for (const type in controls) {
if (DrawType[type]) {
@ -108,7 +115,6 @@ export class DrawControl extends Control {
this.draw[draw].enable();
} else {
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 {
Feature,
FeatureCollection,
featureCollection,
Geometries,
Properties,
@ -18,6 +23,7 @@ export default class DrawCircle extends DrawFeature {
protected startPoint: ILngLat;
protected endPoint: ILngLat;
protected pointFeatures: Feature[];
protected centerLayer: ILayer;
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
this.type = 'circle';
@ -30,7 +36,6 @@ export default class DrawCircle extends DrawFeature {
public setCurrentFeature(feature: Feature) {
this.currentFeature = feature as Feature;
// @ts-ignore
// @ts-ignore
this.pointFeatures = feature.properties.pointFeatures;
// @ts-ignore
this.startPoint = feature.properties.startPoint;
@ -48,7 +53,7 @@ export default class DrawCircle extends DrawFeature {
protected onDragStart = (e: IInteractionTarget) => {
if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null);
this.drawLayer.emit('unclick', null);
}
this.startPoint = e.lngLat;
this.setCursor('grabbing');
@ -60,14 +65,14 @@ export default class DrawCircle extends DrawFeature {
this.endPoint = e.lngLat;
const feature = this.createFeature() as Feature<Geometries, Properties>;
const properties = feature.properties as { pointFeatures: Feature[] };
this.drawRender.update(featureCollection([feature]));
this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
};
protected onDragEnd = () => {
const feature = this.createFeature(`${this.getUniqId()}`);
const properties = feature.properties as { pointFeatures: Feature[] };
this.drawRender.update(featureCollection([feature]));
this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
this.emit(DrawEvent.CREATE, this.currentFeature);
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
@ -76,7 +81,7 @@ export default class DrawCircle extends DrawFeature {
protected moveFeature(delta: ILngLat): void {
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
this.drawRender.updateData(featureCollection(newFeature));
this.drawLayer.updateData(featureCollection(newFeature));
const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawVertexLayer.updateData(featureCollection(newPointFeture));
const newStartPoint = movePoint(
@ -116,7 +121,7 @@ export default class DrawCircle extends DrawFeature {
this.endPoint = endPoint;
const newFeature = this.createFeature();
const properties = newFeature.properties as { pointFeatures: Feature[] };
this.drawRender.updateData(featureCollection([newFeature]));
this.drawLayer.updateData(featureCollection([newFeature]));
this.drawVertexLayer.updateData(
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 {
private endPoint: ILngLat;
// 绘制完成之后显示
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
super(scene, options);

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

@ -7,12 +7,7 @@ export interface IDrawCircleOption extends IDrawOption {
units: unitsType;
steps: number;
}
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
export default class DrawEdit extends DrawFeature {
private center: ILngLat;
private endPoint: ILngLat;
// 绘制完成之后显示
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
@ -41,7 +36,7 @@ export default class DrawEdit extends DrawFeature {
};
protected onDragEnd = () => {
this.emit(DrawEvent.UPDATE, null);
this.emit(DrawEvent.UPDATE, this.currentFeature);
this.resetCursor();
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 deleteMode: DrawDelete;
protected renderLayer: RenderLayer;
protected drawRender: DrawRender;
protected normalLayer: RenderLayer;
protected drawLayer: DrawRender;
protected drawVertexLayer: DrawVertexLayer;
protected centerLayer: ILayer;
// 编辑过程中显示
protected drawLayer: ILayer;
protected drawLineLayer: ILayer;
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
super(scene, options);
this.drawRender = new DrawRender(this);
this.drawLayer = new DrawRender(this);
this.drawVertexLayer = new DrawVertexLayer(this);
this.renderLayer = new RenderLayer(this);
this.normalLayer = new RenderLayer(this);
// this.editLayer = new EditLayer(this);
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.on(DrawEvent.CREATE, this.onDrawCreate);
this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
document.addEventListener('keydown', this.addKeyDownEvent);
}
public abstract drawFinish(): void;
public setCurrentFeature(feature: Feature) {
@ -71,19 +68,19 @@ export default abstract class DrawFeature extends DrawMode {
}
public disableLayer() {
// this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
this.drawRender.disableDrag();
this.drawLayer.disableSelect();
}
public enableLayer() {
this.drawRender.enableDrag();
this.drawLayer.enableSelect();
}
public clear() {
this.drawRender.hide();
this.drawLayer.hide();
this.drawVertexLayer.hide();
this.hideOtherLayer();
this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
}
public reset() {
this.drawRender.show();
this.drawLayer.show();
this.drawVertexLayer.show();
this.showOtherLayer();
}
@ -91,6 +88,17 @@ export default abstract class DrawFeature extends DrawMode {
public addVertex(feature: Feature): void {
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() {
return {
steps: 64,
@ -130,7 +138,7 @@ export default abstract class DrawFeature extends DrawMode {
case DrawModes.DIRECT_SELECT:
this.editMode.enable();
this.editMode.setEditFeature(this.currentFeature as Feature);
this.drawRender.updateData(
this.drawLayer.updateData(
featureCollection([this.currentFeature as Feature]),
);
this.drawVertexLayer.updateData(
@ -144,8 +152,8 @@ export default abstract class DrawFeature extends DrawMode {
case DrawModes.SIMPLE_SELECT:
this.selectMode.setSelectedFeature(this.currentFeature as Feature);
this.selectMode.enable();
this.drawRender.enableDrag();
this.drawRender.updateData(
this.drawLayer.enableSelect();
this.drawLayer.updateData(
featureCollection([this.currentFeature as Feature]),
);
this.drawVertexLayer.updateData(
@ -153,7 +161,7 @@ export default abstract class DrawFeature extends DrawMode {
);
this.drawVertexLayer.disableEdit();
this.drawVertexLayer.show();
this.drawRender.show();
this.drawLayer.show();
this.showOtherLayer();
this.drawStatus = 'DrawSelected';
break;
@ -163,8 +171,8 @@ export default abstract class DrawFeature extends DrawMode {
this.drawVertexLayer.hide();
this.drawVertexLayer.disableEdit();
this.hideOtherLayer();
this.renderLayer.update(this.source.data);
this.renderLayer.enableDrag();
this.normalLayer.update(this.source.data);
this.normalLayer.enableSelect();
this.drawStatus = 'DrawFinish';
break;
}
@ -176,6 +184,7 @@ export default abstract class DrawFeature extends DrawMode {
private onDrawUpdate = (feature: Feature) => {
this.source.updateFeature(this.currentFeature as Feature);
this.emit(DrawEvent.UPDATE, this.currentFeature);
};
private onDrawMove = (delta: ILngLat) => {
@ -190,10 +199,15 @@ export default abstract class DrawFeature extends DrawMode {
if (this.drawStatus === 'DrawSelected') {
this.clear();
this.source.removeFeature(this.currentFeature as Feature);
this.renderLayer.update(this.source.data);
// this.reset();
this.normalLayer.update(this.source.data);
}
};
// 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 {
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawRender.updateData(featureCollection(newFeature));
this.drawLayer.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newPointFeture));
this.currentFeature = newFeature[0];
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');
}
}
public destory() {
DrawFeatureId = 0;
this.removeAllListeners();
this.disable();
}
protected getDefaultOptions() {
return {};

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

@ -1,10 +1,5 @@
import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7';
import {
Feature,
FeatureCollection,
featureCollection,
point,
} from '@turf/helpers';
import { Feature, featureCollection, point } from '@turf/helpers';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import moveFeatures from '../util/move_featrues';
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
@ -45,18 +40,18 @@ export default class DrawPoint extends DrawFeature {
protected onClick = (e: any) => {
if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null);
this.drawLayer.emit('unclick', null);
}
const lngLat = e.lngLat || e.lnglat;
const feature = this.createFeature(lngLat);
this.drawRender.update(featureCollection([feature]));
this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection([feature]));
this.drawFinish();
};
protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
this.drawRender.updateData(featureCollection(newFeature));
this.drawLayer.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newFeature));
this.currentFeature = newFeature[0];
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() {
const feature = this.createFeature(this.points);
const properties = feature.properties as { pointFeatures: Feature[] };
this.drawRender.update(featureCollection([feature]));
this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
// @ts-ignore
// feature.properties.pointFeatures = pointfeatures;
@ -84,7 +84,7 @@ export default class DrawPolygon extends DrawFeature {
}
const pointfeatures = createPoint(points);
this.pointFeatures = pointfeatures.features;
this.drawRender.updateData(featureCollection([feature]));
this.drawLayer.updateData(featureCollection([feature]));
this.drawVertexLayer.updateData(pointfeatures);
this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
// @ts-ignore
@ -111,7 +111,7 @@ export default class DrawPolygon extends DrawFeature {
protected onClick = (e: any) => {
if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null);
this.drawLayer.emit('unclick', null);
}
const lngLat = e.lngLat || e.lnglat;
this.endPoint = lngLat;
@ -120,7 +120,7 @@ export default class DrawPolygon extends DrawFeature {
const properties = feature.properties as { pointFeatures: Feature[] };
const pointfeatures = createPoint([this.points[0], this.endPoint]);
// this.pointFeatures = pointfeatures.features;
this.drawRender.update(featureCollection([feature]));
this.drawLayer.update(featureCollection([feature]));
this.drawVertexLayer.update(featureCollection(pointfeatures.features));
this.onDraw();
};
@ -133,7 +133,7 @@ export default class DrawPolygon extends DrawFeature {
const tmpPoints = this.points.slice();
tmpPoints.push(lngLat);
const feature = this.createFeature(tmpPoints);
this.drawRender.update(featureCollection([feature]));
this.drawLayer.update(featureCollection([feature]));
};
protected onDblClick = (e: any) => {
@ -148,7 +148,7 @@ export default class DrawPolygon extends DrawFeature {
protected moveFeature(delta: ILngLat): void {
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawRender.updateData(featureCollection(newFeature));
this.drawLayer.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newPointFeture));
newFeature[0].properties = {
...newFeature[0].properties,
@ -186,7 +186,7 @@ export default class DrawPolygon extends DrawFeature {
this.drawVertexLayer.updateData(featureCollection(this.pointFeatures));
this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
this.editPolygonVertex(id, vertex);
this.drawRender.updateData(
this.drawLayer.updateData(
featureCollection([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];
}
this.setCurrentFeature(feature);
this.drawRender.updateData(
this.drawLayer.updateData(
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> = {}) {
super(scene, options);
// this.editLayer = new EditRender(this);
}
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.addLayers();
}
public enableDrag() {
public enableSelect() {
this.show();
if (this.isEnableDrag) {
return;
@ -24,10 +24,10 @@ export default class DrawLayer extends BaseRender {
layer.on('mouseenter', this.onMouseMove);
layer.on('mouseout', this.onUnMouseMove);
layer.on('click', this.onClick);
layer.on('unmouseup', this.onUnClick);
layer.on('unclick', this.onUnClick);
this.isEnableDrag = true;
}
public disableDrag() {
public disableSelect() {
if (!this.isEnableDrag) {
return;
}
@ -35,7 +35,7 @@ export default class DrawLayer extends BaseRender {
layer.off('mouseenter', this.onMouseMove);
layer.off('mouseout', this.onUnMouseMove);
layer.off('click', this.onClick);
layer.off('unmouseup', this.onUnClick);
layer.off('unclick', this.onUnClick);
this.isEnableDrag = false;
}
@ -44,7 +44,7 @@ export default class DrawLayer extends BaseRender {
return;
}
const layer = this.drawLayers[0];
layer.on('unmouseup', this.onUnClick);
layer.on('unclick', this.onUnClick);
this.isEnableDrag = true;
}
@ -53,7 +53,7 @@ export default class DrawLayer extends BaseRender {
return;
}
const layer = this.drawLayers[0];
layer.off('unmouseup', this.onUnClick);
layer.off('unclick', this.onUnClick);
this.isEnableDrag = false;
}
@ -68,7 +68,7 @@ export default class DrawLayer extends BaseRender {
private onClick = (e: any) => {
this.draw.selectMode.disable();
this.draw.editMode.enable();
this.disableDrag();
this.disableSelect();
this.draw.resetCursor();
this.enableEdit();
this.draw.setCurrentFeature(e.feature);
@ -81,7 +81,7 @@ export default class DrawLayer extends BaseRender {
this.draw.source.setFeatureUnActive(
this.draw.getCurrentFeature() as Feature,
);
this.disableDrag();
this.disableSelect();
this.disableEdit();
this.hide();
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.addLayers();
}
public enableDrag() {
public enableSelect() {
if (this.isEnableDrag) {
return;
}
@ -22,7 +22,7 @@ export default class DrawResultLayer extends BaseRender {
layer.on('click', this.onClick);
this.isEnableDrag = true;
}
public disableDrag() {
public disableSelect() {
if (!this.isEnableDrag) {
return;
}
@ -31,7 +31,7 @@ export default class DrawResultLayer extends BaseRender {
this.isEnableDrag = false;
}
public enableDelete() {
this.disableDrag();
this.disableSelect();
const layer = this.drawLayers[0];
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.addLayers();
}
public enableDrag() {
public enableSelect() {
return;
}
public disableDrag() {
public disableSelect() {
return;
}

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

@ -46,6 +46,9 @@ export default class DrawSource {
this.removeFeature(feature);
this.addFeature(feature);
}
public destroy() {
this.data = this.getDefaultData();
}
private getDefaultData(): FeatureCollection {
return {
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-component';
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', () => {
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
drawCircle.on('draw.create', (e: any) => {
console.log(e);
});
drawCircle.on('draw.update', (e: any) => {
console.log(e);
});
});
}