Skip to main content

Function: DrawingManager

DrawingManager<T>(_props): null

그리기 관리자 객체를 생성하는 컴포넌트 입니다.

초기 생성자에 필요한 Props는 최초 렌더링에만 반영을 하고 이후에는 값이 변경되더라도 적용되지 않습니다.

on~ 시리즈를 제외한 props는 초기 렌더링 이후 작동 안함

DrawingManager는 이전 Map, Marker, CustomOverlay와 달리 Props를 통해 제어를 하는 것이 아닌 직접 DrawingManager 객체를 이용하여 제어를 해야 합니다.

이를 위해 ref 객체를 통해 DrawingManager 객체를 접근 할 수 있으며, 이를 활용하여 여러 이벤트 처리 및 제어가 가능합니다.

TypeScript 사용자를 위한 Generic이 적용되어 있으므로, ref 객체에 대한 typing 및 drawingMode에 대해 확실하게 정의해야 합니다.

const Main = () => {
const managerRef = useRef<kakao.maps.drawing.DrawingManager<
kakao.maps.drawing.OverlayType.POLYLINE
>>(null);

function selectOverlay(type: string) {
const manager = managerRef.current;
manager.cancel();
manager.select(kakao.maps.drawing.OverlayType.POLYLINE);
}

return (
<>
<Map
center={{
// 지도의 중심좌표
lat: 33.450701,
lng: 126.570667,
}}
style={{
width: "100%",
height: "450px",
}}
level={3} // 지도의 확대 레벨
>
<DrawingManager
ref={managerRef}
drawingMode={[
kakao.maps.drawing.OverlayType.POLYLINE,
]}
guideTooltip={['draw', 'drag', 'edit']}
polylineOptions={{
draggable: true,
removable: true,
editable: true
}}
/>
</Map>
<button onClick={(e) => {
selectOverlay('POLYLINE')
}}></button>
</>
)
}

JavaScript 코드 버전

Result
Loading...
Live Editor

Type parameters

NameType
Textends OverlayType = OverlayType

Parameters

NameType
_propsPartial<OverlayOptions> & Pick<OverlayOptions, `${T}Options`> & { children?: ReactNode ; drawingMode?: T[] ; guideTooltip?: ("drag" | "draw" | "edit")[] ; onCancle?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onCreate?: (drawingManager: DrawingManager<T>) => void ; onDraw?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onDrawend?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onDrawnext?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onDrawstart?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onRemove?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onSelect?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onStateChanged?: (drawingManager: DrawingManager<T>) => void } & RefAttributes<DrawingManager<T>>

Returns

null

Defined in

src/components/DrawingManager.tsx:316