feat: 完善 bbox 文档 (#166)

antvis · Jan 26, 2024 · 0007cac · 0007cac
1 parent 1abc0dd
commit 0007cac
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/docs/example/common/bbox.tsx b/docs/example/common/bbox.tsx
@@ -1,7 +1,7 @@
-import { Scene } from '@antv/l7';
+import { Scene, PolygonLayer } from '@antv/l7';
 import { DrawEvent, DrawPolygon } from '@antv/l7-draw';
 import { GaodeMap } from '@antv/l7-maps';
-import { Feature } from '@turf/turf';
+import { Feature, bboxPolygon, featureCollection } from '@turf/turf';
 import 'antd/dist/antd.css';
 import React, { useEffect, useState } from 'react';
 
@@ -22,24 +22,43 @@ const Demo: React.FC = () => {
     });
     scene.on('loaded', () => {
       const drawer = new DrawPolygon(scene, {
-        adsorbOptions: {},
+        bbox: true,
       });
       drawer.enable();
 
-      drawer.on(DrawEvent.Change, setPolygonList);
+      const polygonLayer = new PolygonLayer();
+
+      polygonLayer
+        .source(featureCollection([]))
+        .shape('line')
+        .size(2)
+        .color('#fff')
+        .style({
+          opacity: 0.5,
+        });
+
+      scene.addLayer(polygonLayer);
+
+      drawer.on(DrawEvent.Change, (newFeatures: Feature[]) => {
+        setPolygonList(newFeatures);
+
+        polygonLayer.setData(
+          featureCollection(newFeatures.map((item) => bboxPolygon(item.bbox!))),
+        );
+      });
     });
   }, []);
 
   return (
     <div>
       <div id={id} style={{ height: 400, position: 'relative' }} />
-      <div>
+      <pre style={{ padding: 12 }}>
         {JSON.stringify(
           polygonList.map((item) => item.bbox),
           null,
           2,
         )}
-      </div>
+      </pre>
     </div>
   );
 };