From 0007cac0512c933bb17c2c7833ba62cb32ccc6eb Mon Sep 17 00:00:00 2001
From: heiyexing <oujinhui.ojh@antgroup.com>
Date: Fri, 26 Jan 2024 14:06:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=20bbox=20=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=20(#166)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/example/common/bbox.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/docs/example/common/bbox.tsx b/docs/example/common/bbox.tsx
index eef8a36..61bda52 100644
--- 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>
   );
 };