new naver.maps.drawing.DrawingManager(options)
Parameters
Name | Type | Argument | Description |
---|---|---|---|
options |
DrawingOptions |
<optional> |
옵션 |
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
DrawingOverlay 오버레이 객체, {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 형식 객체로 반환합니다.
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:
- See
Properties
Name Type Argument Description map
naver.maps.Map <optional>
도형이 그려질 지도 객체입니다.
drawingControl
Array.<naver.maps.drawing.DrawingMode> <optional>
지도에 표시할 그리기 도구 목록입니다. 그리기 도구의 순서는 배열에서 선언된 순서와 일치합니다. null로 정의할 경우 그리기 도구가 표시되지 않습니다.
이 옵션을 정의하지 않은 경우 기본적으로 다음과 같이 표시됩니다.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을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다.
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 } });