diff --git a/packages/draw/src/modes/draw_feature.ts b/packages/draw/src/modes/draw_feature.ts index d32172dd94..02eda582b4 100644 --- a/packages/draw/src/modes/draw_feature.ts +++ b/packages/draw/src/modes/draw_feature.ts @@ -58,6 +58,10 @@ export default abstract class DrawFeature extends DrawMode { this.on(DrawEvent.CREATE, this.onDrawCreate); this.on(DrawEvent.MODE_CHANGE, this.onModeChange); document.addEventListener('keydown', this.addKeyDownEvent); + if (this.options.data && this.initData()) { + this.normalLayer.update(this.source.data); + this.normalLayer.enableSelect(); + } } public abstract drawFinish(): void; public setCurrentFeature(feature: Feature) { @@ -143,6 +147,9 @@ export default abstract class DrawFeature extends DrawMode { protected abstract hideOtherLayer(): void; protected abstract showOtherLayer(): void; + protected initData(): boolean { + return false; + } private addDrawPopup(lnglat: ILngLat, dis: number) { const popup = new Popup({ diff --git a/packages/draw/src/modes/draw_line.ts b/packages/draw/src/modes/draw_line.ts index b82ea221a5..9af6198350 100644 --- a/packages/draw/src/modes/draw_line.ts +++ b/packages/draw/src/modes/draw_line.ts @@ -30,16 +30,39 @@ export default class DrawLine extends DrawPolygon { this.pointFeatures = newPointFeture; return this.currentFeature; } - protected createFeature(points: ILngLat[]): Feature { - const pointfeatures = createPoint(this.points); + protected createFeature( + points: ILngLat[], + id?: string, + active: boolean = true, + ): Feature { + const pointfeatures = createPoint(points); this.pointFeatures = pointfeatures.features; const feature = createLine(points, { - id: this.getUniqId(), + id: id || this.getUniqId(), type: 'line', - active: true, + active, pointFeatures: this.pointFeatures, }); this.setCurrentFeature(feature as Feature); return feature; } + protected initData(): boolean { + const features: Feature[] = []; + this.source.data.features.forEach((feature) => { + if (feature.geometry.type === 'LineString') { + // @ts-ignore + const points = feature.geometry.coordinates.map((coord) => { + return { + lng: coord[0], + lat: coord[1], + }; + }); + features.push( + this.createFeature(points, feature?.properties?.id, false), + ); + } + }); + this.source.data.features = features; + return true; + } } diff --git a/packages/draw/src/modes/draw_point.ts b/packages/draw/src/modes/draw_point.ts index a9a7fb8cc7..e66900da87 100644 --- a/packages/draw/src/modes/draw_point.ts +++ b/packages/draw/src/modes/draw_point.ts @@ -57,15 +57,34 @@ export default class DrawPoint extends DrawFeature { }; return this.currentFeature; } - protected createFeature(p: ILngLat): Feature { + protected createFeature( + p: ILngLat, + id?: string, + active: boolean = true, + ): Feature { const feature = point([p.lng, p.lat], { - id: this.getUniqId(), + id: id || this.getUniqId(), type: 'point', + active, pointFeatures: [point([p.lng, p.lat])], }); this.setCurrentFeature(feature as Feature); return feature; } + protected initData(): boolean { + const features: Feature[] = []; + this.source.data.features.forEach((feature) => { + if (feature.geometry.type === 'Point') { + const p = { + lng: feature.geometry.coordinates[0] as number, + lat: feature.geometry.coordinates[1] as number, + }; + features.push(this.createFeature(p, feature?.properties?.id, false)); + } + }); + this.source.data.features = features; + return true; + } protected editFeature(endPoint: ILngLat): void { this.createFeature(endPoint); diff --git a/packages/draw/src/modes/draw_polygon.ts b/packages/draw/src/modes/draw_polygon.ts index b86bb5bcb0..a200c4df4f 100644 --- a/packages/draw/src/modes/draw_polygon.ts +++ b/packages/draw/src/modes/draw_polygon.ts @@ -29,11 +29,6 @@ export default class DrawPolygon extends DrawFeature { this.type = 'polygon'; this.drawMidVertexLayer = new DrawMidVertex(this); this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent); - if (this.options.data) { - this.initData(); - this.normalLayer.update(this.source.data); - this.normalLayer.enableSelect(); - } } public enable() { super.enable(); @@ -240,6 +235,26 @@ export default class DrawPolygon extends DrawFeature { break; } } + protected initData(): boolean { + const features: Feature[] = []; + this.source.data.features.forEach((feature) => { + if (feature.geometry.type === 'Polygon') { + const points = (feature.geometry.coordinates[0] as Position[]).map( + (coord) => { + return { + lng: coord[0], + lat: coord[1], + }; + }, + ); + features.push( + this.createFeature(points.slice(1), feature?.properties?.id, false), + ); + } + }); + this.source.data.features = features; + return true; + } private editPolygonVertex(id: number, vertex: ILngLat) { const feature = this.currentFeature as Feature; @@ -259,26 +274,6 @@ export default class DrawPolygon extends DrawFeature { featureCollection([this.currentFeature as Feature]), ); } - - private initData() { - const features: Feature[] = []; - this.source.data.features.forEach((feature) => { - if (feature.geometry.type === 'Polygon') { - const points = (feature.geometry.coordinates[0] as Position[]).map( - (coord) => { - return { - lng: coord[0], - lat: coord[1], - }; - }, - ); - features.push( - this.createFeature(points.slice(1), feature?.properties?.id, false), - ); - } - }); - this.source.data.features = features; - } } /** * draw 端点响应事件 diff --git a/stories/Draw/Components/DrawLine.tsx b/stories/Draw/Components/DrawLine.tsx index dd7873ff1a..b23bf93940 100644 --- a/stories/Draw/Components/DrawLine.tsx +++ b/stories/Draw/Components/DrawLine.tsx @@ -16,36 +16,37 @@ export default class Circle extends React.Component { map: new Mapbox({ pitch: 0, style: 'light', - center: [113.775374, 28.31067], - zoom: 12, + center: [79.8046875, 52.482780222078226], + zoom: 4, }), }); this.scene = scene; - const linneData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [79.8046875, 52.482780222078226], - [110.74218749999999, 36.87962060502676], - [111.4453125, 19.973348786110602], - [112.8515625, 9.795677582829743], - [95.2734375, -6.664607562172573], - [82.265625, -14.264383087562637], - [74.53125, -25.799891182088306], - [68.203125, -30.145127183376115], - [41.484375, -16.63619187839765], - ], - }, - }, - ], - }; const line = scene.on('loaded', () => { - const drawLine = new DrawLine(scene); + const drawLine = new DrawLine(scene, { + data: { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [79.8046875, 52.482780222078226], + [110.74218749999999, 36.87962060502676], + [111.4453125, 19.973348786110602], + [112.8515625, 9.795677582829743], + [95.2734375, -6.664607562172573], + [82.265625, -14.264383087562637], + [74.53125, -25.799891182088306], + [68.203125, -30.145127183376115], + [41.484375, -16.63619187839765], + ], + }, + }, + ], + }, + }); drawLine.enable(); }); } diff --git a/stories/Draw/Components/DrawPoint.tsx b/stories/Draw/Components/DrawPoint.tsx index 933c64a127..be58ad40b7 100644 --- a/stories/Draw/Components/DrawPoint.tsx +++ b/stories/Draw/Components/DrawPoint.tsx @@ -23,7 +23,37 @@ export default class Circle extends React.Component { this.scene = scene; scene.on('loaded', () => { - const drawPoint = new DrawPoint(scene); + const drawPoint = new DrawPoint(scene, { + data: { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'Point', + coordinates: [88.9453125, 53.330872983017066], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'Point', + coordinates: [109.3359375, 28.613459424004414], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'Point', + coordinates: [97.734375, 35.460669951495305], + }, + }, + ], + }, + }); drawPoint.enable(); }); }