포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기
logo
Tutorials Examples naver map js api v3 네이버 지도 API DrawingManager

Class: naver.maps.drawing.DrawingManager

naver.maps.drawing. DrawingManager

DrawingManager 클래스는 사용자가 지도에 사각형, 타원, 폴리라인, 화살표가 있는 폴리라인, 폴리곤, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다.

원은 타원으로 대체합니다.

new naver.maps.drawing.DrawingManager(options)

Parameters
Name Type Argument Description
options DrawingOptions <optional>

옵션
Tutorials
See
Example
var map = new naver.maps.Map('map');

var drawingManager = new naver.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Extends

Methods

addDrawing(overlay, drawingMode, id)

오버레이 객체를 DrawingManager에 추가합니다. 추가된 객체는 마우스 왼쪽 버튼을 클릭해 편집하거나 오른쪽 버튼을 클릭해 삭제할 수 있습니다.

Parameters
Name Type Argument Description
overlay naver.maps.Rectangle | naver.maps.Ellipse | naver.maps.Polyline | naver.maps.Polygon | naver.maps.Marker

오버레이 객체, {naver.maps.Circle}은 지원하지 않습니다.
drawingMode naver.maps.drawing.DrawingMode

추가할 오버레이 객체의 그리기 모드.
id string <optional>

추가할 오버레이 객체에 지정할 id. 정의하지 않는 경우 임의로 정의됩니다.

addListener(eventName, listener)

현재 객체의 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다.

Parameters
Name Type Description
eventName naver.maps.drawing.DrawingEvents

이벤트 이름
listener function

이벤트 리스너

Properties
Name Type Description
overlay DrawingOverlay

대상 오버레이 객체
Overrides
Returns
Type Description
MapEventListener

지도 이벤트 리스너 객체
Example
var dm = new naver.maps.drawing.DrawingManager({
    map: map
});

dm.addListener(naver.maps.drawing.DrawingEvents.SELECT, function(overlay) {
    console.log(overlay.id, overlay.name);
});

destroy()

DrawingManager의 모든 이벤트 및 그려진 도형, 기타 DOM 요소를 모두 제거합니다.

getDrawing(id)

그려진 도형 중 해당 id에 해당하는 오버레이 객체를 반환합니다.

Parameters
Name Type Description
id string

오버레이 객체의 id
Returns
Type Description
DrawingOverlay

오버레이 객체

getDrawings()

그려진 도형/마커들을 id: 오버레이 객체의 쌍으로 반환합니다.

Returns
Type Description
Object.<String, DrawingOverlay>

그려진 오버레이의 객체 쌍

getMap()

현재 DrawingManager가 추가된 Map 객체를 반환합니다.

Returns
Type Description
naver.maps.Map | null

Map 객체

removeDrawing(overlayOrId)

오버레이 객체를 DrawingManager에서 삭제합니다.

Parameters
Name Type Description
overlayOrId DrawingOverlay | string

오버레이 혹은 오버레이의 id

removeListener()

리스너를 제거합니다.

Overrides
Example
var dm = new naver.maps.drawing.DrawingManager({
    map: map,
    drawingControls: [naver.maps.drawing.DrawingMode.RECTANGLE]
});

var listener = dm.addListener('rectangle_added', function(overlay) {
    console.log(overlay.id, overlay.name);
});

naver.maps.Event.removeListener(listener);

setMap(map)

DrawingManager를 지도에 추가합니다. 인수로 null을 전달하면 그리기 도구 컨트롤을 지도에서 제거하고 인터랙션을 정지합니다.

Parameters
Name Type Description
map naver.maps.Map | null

오버레이를 추가할 Map 객체

toGeoJson()

그려진 도형들을 geojson 형식 객체로 반환합니다.

See
Returns
Type Description
Object

geojson 객체

Type Definitions

controlPointOptions

도형 편집 시 꼭지점이나 선분의 중간점에 표시되는 제어점의 스타일입니다.

Type:
Properties
Name Type Description
anchorPointOptions CircleOptions

도형의 꼭지점에 표시될 제어점의 옵션입니다. 위치 또는 지도의 값을 전달하면 무시됩니다.
midPointOptions CircleOptions

Polyline|Arrowline|Polygon 도형의 중간점에 표시될 제어점의 옵션입니다. 위치 또는 지도의 값을 전달하면 무시됩니다.

drawingControlOptions

그리기 도구 컨트롤의 위치와 정렬 방식을 정의합니다.

Type:
Properties
Name Type Argument Default Description
position naver.maps.Position <optional>
 TOP_CENTER

그리기 도구를 배치할 위치입니다.
style naver.maps.drawing.DrawingStyle <optional>
 HORIZONTAL

그리기 도구의 정렬 방식입니다.

DrawingOptions

DrawingOptions 객체는 그리기 모듈의 세부 설정을 정의합니다.

  • 표시할 그리기 도구 컨트롤 집합, 위치 및 최초 그리기 상태
  • 도형의 옵션
  • 편집 제어점 옵션
Type:
Properties
Name Type Argument Description
map naver.maps.Map <optional>

도형이 그려질 지도 객체입니다.
drawingControl Array.<naver.maps.drawing.DrawingMode> <optional>

지도에 표시할 그리기 도구 목록입니다. 그리기 도구의 순서는 배열에서 선언된 순서와 일치합니다. null로 정의할 경우 그리기 도구가 표시되지 않습니다.
이 옵션을 정의하지 않은 경우 기본적으로 다음과 같이 표시됩니다. drawingControl-default
drawingControlOptions drawingControlOptions <optional>

그리기 도구를 표시할 옵션입니다.
drawingMode naver.maps.drawing.DrawingMode <optional>

초기 그리기 상태를 정의합니다. 정의되지 않은 경우 HAND 모드로 선택됩니다.
controlPointOptions controlPointOptions <optional>

그려진 도형을 선택/편집 시 나타나는 제어점의 옵션입니다.
rectangleOptions RectangleOptions <optional>

그리기 도구를 이용해 생성될 Rectangle을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다.
ellipseOptions EllipseOptions <optional>

그리기 도구를 이용해 생성될 Ellipse을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다.
polylineOptions PolylineOptions <optional>

그리기 도구를 이용해 생성될 Polyline을 정의하는 옵션을 나타냅니다. startIcon, endIcon, 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다.
arrowlineOptions PolylineOptions <optional>

그리기 도구를 이용해 생성될 화살표가 있는 Polyline을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. startIcon이나 endIcon을 정의하지 않은 경우, 기본적으로 endIcon이 표시됩니다.
polygonOptions PolygonOptions <optional>

그리기 도구를 이용해 생성될 Polygon을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다.
markerOptions MarkerOptions <optional>

그리기 도구를 이용해 생성될 Marker을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다.
See
Example
var map = new naver.maps.Map('map');
var drawingManager = new naver.maps.drawing.DrawingManager({
    map: map,

    // 표시할 컨트롤 집합.
    drawingControl: [
        naver.maps.drawing.DrawingMode.RECTANGLE,
        naver.maps.drawing.DrawingMode.ELLIPSE,
        naver.maps.drawing.DrawingMode.POLYLINE,
        naver.maps.drawing.DrawingMode.ARROWLINE,
        naver.maps.drawing.DrawingMode.POLYGON
    ],
    // 표시할 컨트롤의 위치 및 정렬
    drawingControlOptions: {
        position: naver.maps.Position.LEFT_CENTER,
        style: naver.maps.drawing.DrawingStyle.HORIZONTAL_2
    },
    // 편집 제어점 옵션
    controlPointOptions: {
        anchorPointOptions: {
            radius: 10,
            fillColor: '#ff0000',
            strokeColor: '#0000ff',
            strokeWeight: 2
        },
        midPointOptions: {
            radius: 10,
            fillColor: '#ff0000',
            strokeColor: '#0000ff',
            strokeWeight: 2,
            fillOpacity: 0.5
        }
    },
    // 오버레이의 스타일, 정의가 없는 경우 각 오버레이의 기본값을 사용
    rectangleOptions: {
        fillColor: '#ff0000',
        fillOpacity: 0.5,
        strokeWeight: 3,
        strokeColor: '#ff0000'
    },
    ellipseOptions: {},
    polylineOptions: { // 화살표 아이콘 계열 옵션(startIcon, endIcon)은 무시됨
        strokeColor: '#222',
        strokeWeight: 3
    },
    arrowlineOptions: { // startIcon || endIcon 옵션이 없으면 endIcon 을 BLOCK_OPEN 으로 설정합니다.
        strokeWeight: 3
    },
    polygonOptions: {
        strokeColor: '#ffd100',
        fillColor: '#ffff00',
        fillOpacity: 0.5,
        strokeWeight: 3
    }
});
NAVER Developers | Copyright 2016 NAVER Corp. All rights reserved. | Terms of Service Documentation generated by JSDoc 3.6.11 using the DocStrap template.