From 766688eccd2ac9e12c8685c33c37e60b9a4d15b1 Mon Sep 17 00:00:00 2001 From: syb01094648 Date: Tue, 14 Nov 2023 10:51:59 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix/sam-control=E7=BB=84=E4=BB=B6=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map-control-group/sam-control/index.tsx | 152 ++++++++++++------ 1 file changed, 105 insertions(+), 47 deletions(-) diff --git a/src/components/map-control-group/sam-control/index.tsx b/src/components/map-control-group/sam-control/index.tsx index 110d054..2ea2e62 100644 --- a/src/components/map-control-group/sam-control/index.tsx +++ b/src/components/map-control-group/sam-control/index.tsx @@ -1,9 +1,21 @@ -import type { LineLayerProps } from '@antv/larkmap'; -import { CustomControl, LineLayer, Marker, useLayerList } from '@antv/larkmap'; +import type { LineLayerProps, PolygonLayerProps } from '@antv/larkmap'; +import { + CustomControl, + LineLayer, + Marker, + PolygonLayer, + useLayerList, +} from '@antv/larkmap'; import type { Layer } from '@antv/larkmap/es/types'; import { MODEL_URL, SAMGeo } from '@antv/sam'; import type { Feature, MultiPolygon, Polygon } from '@turf/turf'; -import { booleanPointInPolygon, point, polygon } from '@turf/turf'; +import { + booleanPointInPolygon, + featureCollection, + point, + polygon, +} from '@turf/turf'; +import { useDebounceFn } from 'ahooks'; import { Spin, Tooltip, message } from 'antd'; import { isEmpty } from 'lodash-es'; import React, { useCallback, useEffect, useState } from 'react'; @@ -34,6 +46,24 @@ const options: Omit = { }, }; +const layerOptions: Omit = { + shape: 'fill', + color: '#ff0000', + id: 'hoverLayer', + state: { + active: false, + }, + style: { + opacity: 0.5, + }, + zIndex: 100, +}; + +const defaultPolygonSource = { + data: { type: 'FeatureCollection', features: [] }, + parser: { type: 'geojson' }, +}; + export const SamControl = () => { const styles = useStyle(); const style = useStyles(); @@ -46,6 +76,9 @@ export const SamControl = () => { const [polygonLayer, setPolygonLayer] = useState( undefined, ); + const [hoverPolyonLayer, setHoverPolyonLayer] = useState( + undefined, + ); const [loading, setLoading] = useState(false); const [marker, setMarker] = useState(undefined); const [bound, setBound] = useState< @@ -54,51 +87,18 @@ export const SamControl = () => { const [source, setSource] = useState({ data: { type: 'FeatureCollection', features: [] }, }); + const [polygonSource, setPolygonSource] = useState(defaultPolygonSource); const { t } = useTranslation(); const onMapClick = useCallback( (event: any) => { - const coords = [event.lngLat.lng, event.lngLat.lat] as [number, number]; - if (bound) { - if (booleanPointInPolygon(point(coords), bound)) { - if (samModel) { - const px = samModel.lngLat2ImagePixel(coords)!; - const newPoint = [ - { - x: px[0], - y: px[1], - clickType: 1, - }, - ]; - const threshold = 1; - - samModel.predict(newPoint).then(async (res) => { - const fc = await samModel.exportGeoPolygon(res, threshold); - const image = samModel.exportImageClip(res)!; - const newData = { - feature: fc.features as any, - imageUrl: image.src, - }; - if ( - booleanPointInPolygon(point(coords), newData?.feature[0]) && - newData?.feature[0].geometry.coordinates[0].length > 4 - ) { - const newFeature = revertCoord(newData.feature); - resetFeatures([...features, ...newFeature] as IFeatures); - } else { - message.warning(t('map_control_group.sam.tuXingJieXiCuoWu')); - } - }); - } - } else { - message.error(t('map_control_group.sam.qingZaiQuYuNei')); - } - } + const newFeature = revertCoord([event.feature]); + resetFeatures([...features, ...newFeature] as IFeatures); + setPolygonSource(defaultPolygonSource); }, // eslint-disable-next-line react-hooks/exhaustive-deps - [bound, samModel, features, t], + [features], ); - // 生成 embedding 并初始化载入模型 const generateEmbedding = async () => { setLoading(true); @@ -175,7 +175,6 @@ export const SamControl = () => { } } catch (error) { message.error(t('map_control_group.sam.jiSuanShiBai')); - scene?.off('click', onMapClick); } finally { setLoading(false); } @@ -198,26 +197,84 @@ export const SamControl = () => { const selectLayer = allLayerList.find( (layer) => layer.id === LayerId.PolygonLayer, ); + const hoverLayer = allLayerList.find( + (layer) => layer.id === 'hoverLayer', + ); + setHoverPolyonLayer(hoverLayer); setPolygonLayer(selectLayer); setTileLayer(targetLayer); } }, [allLayerList]); + const { run: onMapHover } = useDebounceFn( + (e) => { + const coords = [e.lngLat.lng, e.lngLat.lat] as [number, number]; + if (bound) { + if (booleanPointInPolygon(point(coords), bound)) { + if (samModel) { + const px = samModel.lngLat2ImagePixel(coords)!; + const newPoint = [ + { + x: px[0], + y: px[1], + clickType: 1, + }, + ]; + const threshold = 1; + + samModel.predict(newPoint).then(async (res) => { + const fc = await samModel.exportGeoPolygon(res, threshold); + const image = samModel.exportImageClip(res)!; + const newData = { + feature: fc.features as any, + imageUrl: image.src, + }; + if ( + booleanPointInPolygon(point(coords), newData?.feature[0]) && + newData?.feature[0].geometry.coordinates[0].length > 4 + ) { + const newFeatures = revertCoord(newData.feature); + setPolygonSource((prevState: any) => ({ + ...prevState, + data: featureCollection(newFeatures), + })); + // resetFeatures([...features, ...newFeature] as IFeatures); + } else { + message.warning(t('map_control_group.sam.tuXingJieXiCuoWu')); + } + }); + } + } else { + message.error(t('map_control_group.sam.qingZaiQuYuNei')); + setPolygonSource(defaultPolygonSource); + } + } + }, + { + wait: 1000, + maxWait: 1000, + }, + ); + useEffect(() => { - if (polygonLayer) { + if (polygonLayer && hoverPolyonLayer) { if (samOpen) { - polygonLayer.on('unclick', onMapClick); + polygonLayer.on('unmousemove', onMapHover); + hoverPolyonLayer.on('click', onMapClick); } else { setSource({ data: { type: 'FeatureCollection', features: [] } }); setMarker(undefined); - polygonLayer.off('unclick', onMapClick); + setPolygonSource(defaultPolygonSource); + polygonLayer.off('unmousemove', onMapHover); + hoverPolyonLayer.off('click', onMapClick); } } return () => { - polygonLayer?.off('unclick', onMapClick); + polygonLayer?.off('unmousemove', onMapHover); + hoverPolyonLayer?.off('click', onMapClick); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [samOpen, scene, onMapClick]); + }, [samOpen, scene, onMapHover, onMapClick]); useEffect(() => { if (samOpen && samModel) { @@ -268,6 +325,7 @@ export const SamControl = () => { )} + ); }; From d1c9fa18f3eef8fe493239cff255f1a8e0d0863c Mon Sep 17 00:00:00 2001 From: syb01094648 Date: Tue, 14 Nov 2023 13:51:36 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix/sam-control=E7=BB=84=E4=BB=B6=E9=98=B2?= =?UTF-8?q?=E6=8A=96=E6=97=B6=E9=97=B4=E8=B0=83=E6=95=B4=EF=BC=8C=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map-control-group/sam-control/index.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/map-control-group/sam-control/index.tsx b/src/components/map-control-group/sam-control/index.tsx index 2ea2e62..990b065 100644 --- a/src/components/map-control-group/sam-control/index.tsx +++ b/src/components/map-control-group/sam-control/index.tsx @@ -239,20 +239,17 @@ export const SamControl = () => { data: featureCollection(newFeatures), })); // resetFeatures([...features, ...newFeature] as IFeatures); - } else { - message.warning(t('map_control_group.sam.tuXingJieXiCuoWu')); } }); } } else { - message.error(t('map_control_group.sam.qingZaiQuYuNei')); setPolygonSource(defaultPolygonSource); } } }, { - wait: 1000, - maxWait: 1000, + wait: 5000, + maxWait: 5000, }, ); From bc45a9cf3e0768c802cb5ae56ca8f0edde9d1769 Mon Sep 17 00:00:00 2001 From: syb01094648 Date: Tue, 14 Nov 2023 14:09:35 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20click=20=E4=BF=AE=E6=94=B9=E4=B8=BA?= =?UTF-8?q?=20onClick?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map-control-group/sam-control/index.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/map-control-group/sam-control/index.tsx b/src/components/map-control-group/sam-control/index.tsx index 990b065..a52bd34 100644 --- a/src/components/map-control-group/sam-control/index.tsx +++ b/src/components/map-control-group/sam-control/index.tsx @@ -76,9 +76,6 @@ export const SamControl = () => { const [polygonLayer, setPolygonLayer] = useState( undefined, ); - const [hoverPolyonLayer, setHoverPolyonLayer] = useState( - undefined, - ); const [loading, setLoading] = useState(false); const [marker, setMarker] = useState(undefined); const [bound, setBound] = useState< @@ -197,10 +194,6 @@ export const SamControl = () => { const selectLayer = allLayerList.find( (layer) => layer.id === LayerId.PolygonLayer, ); - const hoverLayer = allLayerList.find( - (layer) => layer.id === 'hoverLayer', - ); - setHoverPolyonLayer(hoverLayer); setPolygonLayer(selectLayer); setTileLayer(targetLayer); } @@ -254,21 +247,18 @@ export const SamControl = () => { ); useEffect(() => { - if (polygonLayer && hoverPolyonLayer) { + if (polygonLayer) { if (samOpen) { polygonLayer.on('unmousemove', onMapHover); - hoverPolyonLayer.on('click', onMapClick); } else { setSource({ data: { type: 'FeatureCollection', features: [] } }); setMarker(undefined); setPolygonSource(defaultPolygonSource); polygonLayer.off('unmousemove', onMapHover); - hoverPolyonLayer.off('click', onMapClick); } } return () => { polygonLayer?.off('unmousemove', onMapHover); - hoverPolyonLayer?.off('click', onMapClick); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [samOpen, scene, onMapHover, onMapClick]); @@ -322,7 +312,11 @@ export const SamControl = () => { )} - + ); }; From 01b68f1dfcb206ffee3a26d93c12430c12438847 Mon Sep 17 00:00:00 2001 From: syb01094648 Date: Thu, 16 Nov 2023 10:53:22 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E5=BB=B6=E8=BF=9F=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E6=94=B9=E4=B8=BA2S?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map-control-group/sam-control/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/map-control-group/sam-control/index.tsx b/src/components/map-control-group/sam-control/index.tsx index a52bd34..a13361c 100644 --- a/src/components/map-control-group/sam-control/index.tsx +++ b/src/components/map-control-group/sam-control/index.tsx @@ -241,8 +241,8 @@ export const SamControl = () => { } }, { - wait: 5000, - maxWait: 5000, + wait: 2000, + maxWait: 2000, }, );