diff --git a/docs/api/draw/index.zh.md b/docs/api/draw/index.zh.md index 57cd6e4884..e3342efa97 100644 --- a/docs/api/draw/index.zh.md +++ b/docs/api/draw/index.zh.md @@ -2,3 +2,231 @@ title: 地图绘制组件 order: 2 --- + +地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 + +# 使用 + +**using modules** + +```javascript +import { DrawControl } from '@antv/l7-draw'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +### 参数 + +```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: {}, + }, + }, +}; +``` diff --git a/docs/api/react/popup.en.md b/docs/api/react/popup.en.md index 60da099bb8..593b9d1f1f 100644 --- a/docs/api/react/popup.en.md +++ b/docs/api/react/popup.en.md @@ -25,4 +25,5 @@ order: 4 import { Popup } from '@antv/l7-react'; ; ``` -[popup 使用完整demo](../../../examples/react/covid#covid_bubble) + +[popup 使用完整 demo](../../../examples/react/covid#covid_bubble) diff --git a/docs/api/react/popup.zh.md b/docs/api/react/popup.zh.md index a6474f6070..34a8ed7395 100644 --- a/docs/api/react/popup.zh.md +++ b/docs/api/react/popup.zh.md @@ -26,4 +26,5 @@ import { Popup } from '@antv/l7-react'; ; ``` -[popup 使用完整demo](../../../examples/react/covid#covid_bubble) + +[popup 使用完整 demo](../../../examples/react/covid#covid_bubble) diff --git a/packages/component/src/control/BaseControl.ts b/packages/component/src/control/BaseControl.ts index 679183515b..4f61dcee19 100644 --- a/packages/component/src/control/BaseControl.ts +++ b/packages/component/src/control/BaseControl.ts @@ -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 diff --git a/packages/component/src/control/layer.ts b/packages/component/src/control/layer.ts index 2fdd7d8245..06169079f8 100644 --- a/packages/component/src/control/layer.ts +++ b/packages/component/src/control/layer.ts @@ -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', diff --git a/packages/component/src/control/logo.ts b/packages/component/src/control/logo.ts index dd027735df..e25251cd35 100644 --- a/packages/component/src/control/logo.ts +++ b/packages/component/src/control/logo.ts @@ -23,4 +23,8 @@ export default class Logo extends Control { container.appendChild(anchor); return container; } + + public onRemove() { + return null; + } } diff --git a/packages/core/src/services/component/IControlService.ts b/packages/core/src/services/component/IControlService.ts index 8d6872b9a6..12970064dc 100644 --- a/packages/core/src/services/component/IControlService.ts +++ b/packages/core/src/services/component/IControlService.ts @@ -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; diff --git a/packages/draw/README.md b/packages/draw/README.md index ac0afb8089..7b71cee0bc 100644 --- a/packages/draw/README.md +++ b/packages/draw/README.md @@ -10,3 +10,47 @@ import { DrawControl } from '@antv/l7-draw'; ``` CDN 版本引用 + +```html + + + + +``` + +### 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); + }); + +``` diff --git a/packages/draw/src/draw_control.ts b/packages/draw/src/draw_control.ts index 2356b0663c..00f94533ec 100644 --- a/packages/draw/src/draw_control.ts +++ b/packages/draw/src/draw_control.ts @@ -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) { @@ -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); } } }; diff --git a/packages/draw/src/modes/draw_circle.ts b/packages/draw/src/modes/draw_circle.ts index b7f17b9153..b8881952ee 100644 --- a/packages/draw/src/modes/draw_circle.ts +++ b/packages/draw/src/modes/draw_circle.ts @@ -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 = {}) { 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; 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), ); diff --git a/packages/draw/src/modes/draw_delete.ts b/packages/draw/src/modes/draw_delete.ts index fe864c2278..bbcc03879d 100644 --- a/packages/draw/src/modes/draw_delete.ts +++ b/packages/draw/src/modes/draw_delete.ts @@ -9,7 +9,6 @@ export interface IDrawCircleOption extends IDrawOption { } export default class DrawDelete extends DrawFeature { - private endPoint: ILngLat; // 绘制完成之后显示 constructor(scene: Scene, options: Partial = {}) { super(scene, options); diff --git a/packages/draw/src/modes/draw_edit.ts b/packages/draw/src/modes/draw_edit.ts index d26e170bf0..d6b291ae52 100644 --- a/packages/draw/src/modes/draw_edit.ts +++ b/packages/draw/src/modes/draw_edit.ts @@ -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 = {}) { @@ -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(); }; diff --git a/packages/draw/src/modes/draw_feature.ts b/packages/draw/src/modes/draw_feature.ts index d4d30dd252..bd77e9bb89 100644 --- a/packages/draw/src/modes/draw_feature.ts +++ b/packages/draw/src/modes/draw_feature.ts @@ -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 = {}) { 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(); + } }; } diff --git a/packages/draw/src/modes/draw_line.ts b/packages/draw/src/modes/draw_line.ts index be444f6038..d67eb53469 100644 --- a/packages/draw/src/modes/draw_line.ts +++ b/packages/draw/src/modes/draw_line.ts @@ -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; diff --git a/packages/draw/src/modes/draw_mode.ts b/packages/draw/src/modes/draw_mode.ts index 1aae317b5b..f0652d624b 100644 --- a/packages/draw/src/modes/draw_mode.ts +++ b/packages/draw/src/modes/draw_mode.ts @@ -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 {}; diff --git a/packages/draw/src/modes/draw_point.ts b/packages/draw/src/modes/draw_point.ts index e87fb3d19a..72ae5f4be1 100644 --- a/packages/draw/src/modes/draw_point.ts +++ b/packages/draw/src/modes/draw_point.ts @@ -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; diff --git a/packages/draw/src/modes/draw_polygon.ts b/packages/draw/src/modes/draw_polygon.ts index 9445a51c63..aa454fa0d8 100644 --- a/packages/draw/src/modes/draw_polygon.ts +++ b/packages/draw/src/modes/draw_polygon.ts @@ -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]), ); } diff --git a/packages/draw/src/modes/draw_selected.ts b/packages/draw/src/modes/draw_selected.ts index afdfc7e82a..7874c6aba6 100644 --- a/packages/draw/src/modes/draw_selected.ts +++ b/packages/draw/src/modes/draw_selected.ts @@ -28,7 +28,6 @@ export default class DrawSelect extends DrawFeature { // 绘制完成之后显示 constructor(scene: Scene, options: Partial = {}) { super(scene, options); - // this.editLayer = new EditRender(this); } public setSelectedFeature(feature: Feature) { diff --git a/packages/draw/src/render/draw.ts b/packages/draw/src/render/draw.ts index ce4d859e32..957c574869 100644 --- a/packages/draw/src/render/draw.ts +++ b/packages/draw/src/render/draw.ts @@ -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); diff --git a/packages/draw/src/render/draw_result.ts b/packages/draw/src/render/draw_result.ts index 50b933c19d..d3037798b2 100644 --- a/packages/draw/src/render/draw_result.ts +++ b/packages/draw/src/render/draw_result.ts @@ -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); } diff --git a/packages/draw/src/render/draw_vertex.ts b/packages/draw/src/render/draw_vertex.ts index d936161107..4cc6e0dd57 100644 --- a/packages/draw/src/render/draw_vertex.ts +++ b/packages/draw/src/render/draw_vertex.ts @@ -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; } diff --git a/packages/draw/src/source.ts b/packages/draw/src/source.ts index bcb52f8282..e45b7ea671 100644 --- a/packages/draw/src/source.ts +++ b/packages/draw/src/source.ts @@ -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', diff --git a/packages/l7/__tests__/version.spec.ts b/packages/l7/__tests__/version.spec.ts new file mode 100644 index 0000000000..89008119c3 --- /dev/null +++ b/packages/l7/__tests__/version.spec.ts @@ -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); + }); +}); diff --git a/packages/l7/src/index.ts b/packages/l7/src/index.ts index ab2507de7b..242d1c912c 100644 --- a/packages/l7/src/index.ts +++ b/packages/l7/src/index.ts @@ -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'; diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts new file mode 100644 index 0000000000..3339b9457f --- /dev/null +++ b/packages/l7/src/version.ts @@ -0,0 +1,2 @@ +const version = '2.1.11'; +export { version }; diff --git a/stories/Draw/Components/Circle.tsx b/stories/Draw/Components/Circle.tsx index 677468fa9b..ebe983aae3 100644 --- a/stories/Draw/Components/Circle.tsx +++ b/stories/Draw/Components/Circle.tsx @@ -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); + }); }); }