fix(draw): line&point 初始化已有数据

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({

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 {
+  protected createFeature(
-    const pointfeatures = createPoint(this.points);
+    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;
+  }
 }

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);

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<Geometries, Properties>;
@@ -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 端点响应事件

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],
+        center: [79.8046875, 52.482780222078226],
-        zoom: 12,
+        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();
     });
   }

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();
     });
   }