27 lines
767 B
TypeScript
27 lines
767 B
TypeScript
import { useEffect } from 'react';
|
|
import { useMap } from '@vis.gl/react-maplibre';
|
|
|
|
interface FlyToControllerProps {
|
|
target?: { lng: number; lat: number; zoom?: number } | null;
|
|
/** 이동 애니메이션 시간(ms). 기본: 1000 */
|
|
duration?: number;
|
|
}
|
|
|
|
/** 지도 특정 좌표로 flyTo 트리거 컴포넌트.
|
|
* target이 바뀔 때마다 flyTo를 실행한다.
|
|
* 반드시 <Map> 자식으로 사용해야 한다. */
|
|
export function FlyToController({ target, duration = 1000 }: FlyToControllerProps) {
|
|
const { current: map } = useMap();
|
|
|
|
useEffect(() => {
|
|
if (!map || !target) return;
|
|
map.flyTo({
|
|
center: [target.lng, target.lat],
|
|
zoom: target.zoom ?? 10,
|
|
duration,
|
|
});
|
|
}, [target, map, duration]);
|
|
|
|
return null;
|
|
}
|