Drawing Library 사용하기

Drawing Library의 기본적인 사용 방법을 설명합니다. Drawing Library로 사용자에게 쉬운 도형 그리기를 제공하기 위해서 Drawing Manager를 생성합니다.

original docs : https://apis.map.kakao.com/web/sample/basicDrawingLibrary/

JavaScript (live)

결과

Loading...

라이브 에디터

function Main() { // ref 객체를 통해 kakao.maps.drawng.DrawingManager 객체를 전달 받아 사용합니다. const managerRef = useRef(null) function selectOverlay(type) { const manager = managerRef.current manager.cancel() manager.select(type) } return ( <> <Map center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 > <DrawingManager ref={managerRef} drawingMode={[ "arrow", "circle", "ellipse", "marker", "polyline", "rectangle", "polygon", ]} guideTooltip={["draw", "drag", "edit"]} markerOptions={{ // 마커 옵션입니다 draggable: true, // 마커를 그리고 나서 드래그 가능하게 합니다 removable: true, // 마커를 삭제 할 수 있도록 x 버튼이 표시됩니다 }} polylineOptions={{ // 선 옵션입니다 draggable: true, // 그린 후 드래그가 가능하도록 설정합니다 removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다 editable: true, // 그린 후 수정할 수 있도록 설정합니다 strokeColor: "#39f", // 선 색 hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일 hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도 }} rectangleOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", // 외곽선 색 fillColor: "#39f", // 채우기 색 fillOpacity: 0.5, // 채우기색 투명도 }} circleOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", fillColor: "#39f", fillOpacity: 0.5, }} polygonOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", fillColor: "#39f", fillOpacity: 0.5, hintStrokeStyle: "dash", hintStrokeOpacity: 0.5, }} arrowOptions={{ draggable: true, // 그린 후 드래그가 가능하도록 설정합니다 removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다 editable: true, // 그린 후 수정할 수 있도록 설정합니다 strokeColor: "#39f", // 선 색 hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일 hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도 }} ellipseOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", fillColor: "#39f", fillOpacity: 0.5, }} /> </Map> <div style={{ display: "flex", gap: "8px", }} > <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.POLYLINE) }} > 선 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.ARROW) }} > 화살표 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.CIRCLE) }} > 원 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.MARKER) }} > 마커 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.POLYGON) }} > 다각형 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.RECTANGLE) }} > 사각형 </button> </div> </> ) }

function Main() {
  // ref 객체를 통해 kakao.maps.drawng.DrawingManager 객체를 전달 받아 사용합니다.
  const managerRef = useRef(null)

  function selectOverlay(type) {
    const manager = managerRef.current
    manager.cancel()
    manager.select(type)
  }

  return (
    <>
      <Map
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
      >
        <DrawingManager
          ref={managerRef}
          drawingMode={[
            "arrow",
            "circle",
            "ellipse",
            "marker",
            "polyline",
            "rectangle",
            "polygon",
          ]}
          guideTooltip={["draw", "drag", "edit"]}
          markerOptions={{
            // 마커 옵션입니다
            draggable: true, // 마커를 그리고 나서 드래그 가능하게 합니다
            removable: true, // 마커를 삭제 할 수 있도록 x 버튼이 표시됩니다
          }}
          polylineOptions={{
            // 선 옵션입니다
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          rectangleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f", // 외곽선 색
            fillColor: "#39f", // 채우기 색
            fillOpacity: 0.5, // 채우기색 투명도
          }}
          circleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
          polygonOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
            hintStrokeStyle: "dash",
            hintStrokeOpacity: 0.5,
          }}
          arrowOptions={{
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          ellipseOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
        />
      </Map>
      <div
        style={{
          display: "flex",
          gap: "8px",
        }}
      >
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYLINE)
          }}
        >
          선
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.ARROW)
          }}
        >
          화살표
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.CIRCLE)
          }}
        >
          원
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.MARKER)
          }}
        >
          마커
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYGON)
          }}
        >
          다각형
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.RECTANGLE)
          }}
        >
          사각형
        </button>
      </div>
    </>
  )
}

TypeScript

const Main = () => {
  // ref 객체를 통해 kakao.maps.drawng.DrawingManager 객체를 전달 받아 사용합니다.
  // 또한 TypeScript를 사용하기 떄문에 전달 받는 DrawingManager에서 사용하는 OverlayType에 대해서 정의해야 합니다.
  const managerRef =
    useRef<
      kakao.maps.drawing.DrawingManager<
        | kakao.maps.drawing.OverlayType.ARROW
        | kakao.maps.drawing.OverlayType.CIRCLE
        | kakao.maps.drawing.OverlayType.ELLIPSE
        | kakao.maps.drawing.OverlayType.MARKER
        | kakao.maps.drawing.OverlayType.POLYLINE
        | kakao.maps.drawing.OverlayType.RECTANGLE
        | kakao.maps.drawing.OverlayType.POLYGON
      >
    >(null)

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

  return (
    <>
      <Map
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
      >
        <DrawingManager
          ref={managerRef}
          drawingMode={[
            "arrow",
            "circle",
            "ellipse",
            "marker",
            "polyline",
            "rectangle",
            "polygon",
          ]}
          guideTooltip={["draw", "drag", "edit"]}
          markerOptions={{
            // 마커 옵션입니다
            draggable: true, // 마커를 그리고 나서 드래그 가능하게 합니다
            removable: true, // 마커를 삭제 할 수 있도록 x 버튼이 표시됩니다
          }}
          polylineOptions={{
            // 선 옵션입니다
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          rectangleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f", // 외곽선 색
            fillColor: "#39f", // 채우기 색
            fillOpacity: 0.5, // 채우기색 투명도
          }}
          circleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
          polygonOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
            hintStrokeStyle: "dash",
            hintStrokeOpacity: 0.5,
          }}
          arrowOptions={{
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          ellipseOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
        />
      </Map>
      <div
        style={{
          display: "flex",
          gap: "8px",
        }}
      >
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYLINE)
          }}
        >
          선
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.ARROW)
          }}
        >
          화살표
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.CIRCLE)
          }}
        >
          원
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.MARKER)
          }}
        >
          마커
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYGON)
          }}
        >
          다각형
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.RECTANGLE)
          }}
        >
          사각형
        </button>
      </div>
    </>
  )
}