도형

NAVER 지도 API v3에서는 지도 좌표를 기반으로 백터 그래픽을 올릴 수 있는 도형 오버레이를 제공합니다. NAVER 지도 API v3에서 제공하는 도형의 종류는 아래와 같습니다.

• Polyline
• Polygon
• Rectangle
• Circle
• Ellipse

폴리라인

폴리라인은 일련의 지도 좌표를 연결하여 선을 그리는 객체입니다.

지도 위에 폴리라인 그리기

path 속성에 지도 좌표 목록을 입력합니다(path는 반드시 입력해야 합니다). 그리고 map 속성에 폴리라인이 그려질 Map 객체를 입력하거나, setMap 메서드를 이용해 지도 객체를 설정할 수 있습니다.

다음은 Polyline 객체를 만들어 지도위에 폴리라인을 그리는 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3700065, 127.121359),
    zoom: 9
});

var polyline = new naver.maps.Polyline({
    map: map,
    path: [
        new naver.maps.LatLng(37.359924641705476, 127.1148204803467),
        new naver.maps.LatLng(37.36343797188166, 127.11486339569092),
        new naver.maps.LatLng(37.368520071054576, 127.11473464965819),
        new naver.maps.LatLng(37.3685882848096, 127.1088123321533),
        new naver.maps.LatLng(37.37295383612657, 127.10876941680907),
        new naver.maps.LatLng(37.38001321351567, 127.11851119995116),
        new naver.maps.LatLng(37.378546827477855, 127.11984157562254),
        new naver.maps.LatLng(37.376637072444105, 127.12052822113036),
        new naver.maps.LatLng(37.37530703574853, 127.12190151214598),
        new naver.maps.LatLng(37.371657839593894, 127.11645126342773),
        new naver.maps.LatLng(37.36855417793982, 127.1207857131958)
    ]
});

Examples: 폴리곤, 폴리라인 그리기

폴리라인 옵션 살펴보기

폴리라인의 색상, 두께, 선 스타일, 투명도를 설정할 수 있습니다. Polyline 객체 생성 시 생성자에 PolylineOptions 객체 리터럴을 설정할 수도 있고, 생성 후 setOptions 메서드를 통해 동적으로 스타일을 변경할 수도 있습니다. PolylineOptions 객체 리터럴의 속성 중 clickable 속성을 true로 설정하면 사용자 인터랙션을 처리할 수도 있습니다.

다음은 마우스 포인터를 올리거나 치우는 사용자 인터랙션 시 setOptions 메서드를 사용하여 선 스타일을 변경하는 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3646656, 127.108828),
    zoom: 10
});

var polyline = new naver.maps.Polyline({
    map: map,
    path: [
        new naver.maps.LatLng(37.365620929135716, 127.1036195755005),
        new naver.maps.LatLng(37.365620929135716, 127.11353302001953),
        new naver.maps.LatLng(37.3606921307849, 127.10452079772949),
        new naver.maps.LatLng(37.36821310838941, 127.10814714431763),
        new naver.maps.LatLng(37.360760351656545, 127.11299657821654),
        new naver.maps.LatLng(37.365620929135716, 127.1036195755005)
    ],
    clickable: true, // 사용자 인터랙션을 받기 위해 clickable을 true로 설정합니다.
    strokeColor: '#5347AA',
    strokeStyle: 'longdash',
    strokeOpacity: 0.5,
    strokeWeight: 5
});

naver.maps.Event.addListener(polyline, 'mouseover', function() {

    polyline.setOptions({
        strokeColor: '#E51D1A',
        strokeStyle: 'solid',
        strokeOpacity: 1
    });
});

naver.maps.Event.addListener(polyline, 'mouseout', function() {

    polyline.setOptions({
        strokeColor: '#5347AA',
        strokeStyle: 'longdash',
        strokeOpacity: 0.5
    });
});

Examples: 폴리라인 옵션 사용하기

동적으로 폴리라인 그리기

Polyline 객체의 path 속성은 지도 좌표 목록을 입력합니다. 지도 좌표 목록을 입력할 때 [Array]로 입력할 수 있지만 객체 내부적으로는 KVOArray로 저장하고 관리합니다. 따라서 getPath 메서드를 이용해 반환받은 path는 KVOArray입니다. KVOArray는 목록의 내부 요소가 변경될 때마다 이에 해당하는 이벤트를 발생시켜 상태 변경을 알려줍니다. Polyline 객체는 이러한 KVOArray의 기능을 활용해 path의 상태를 동적으로 반영하여 선을 그립니다.

KVOArray에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다.

다음은 지도 클릭 시 클릭한 지점의 지도 좌표를 동적으로 그리는 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3700065, 127.121359),
    zoom: 9
});

var polyline = new naver.maps.Polyline({
    map: map,
    path: [],
    strokeColor: '#5347AA',
    strokeWeight: 2
});

naver.maps.Event.addListener(map, 'click', function(e) {

    var point = e.latlng;

    var path = polyline.getPath();
    path.push(point);

    new naver.maps.Marker({
        map: map,
        position: point
    });
});

Examples: 클릭한 지점 폴리라인 연결하기

폴리곤

폴리곤은 일련의 지도 좌표 목록을 잇는 닫힌 다각형을 그립니다. 따라서 폴리라인과 다르게 내부 색상에 대한 옵션이 추가됩니다. 그리고 닫힌 다각형 영역 내에 구멍(hole or interior ring)을 표현할 수 있기 때문에 폴리라인의 좌표 목록에는 여러 개의 path로 구성되는 paths 속성이 있습니다.

지도 위에 폴리곤 그리기

Polygon 객체를 만들 때 paths 속성에 폴리곤을 구성하는 하나의 path를 입력합니다(paths는 반드시 입력해야 합니다). paths는 여러 개의 path를 입력할 수 있는 이중 배열이어야 합니다. map 속성에 폴리곤이 그려질 Map 객체를 입력하거나, setMap 메서드를 이용해 지도 객체를 설정할 수 있습니다.

다음은 Polygon 객체를 만들어 지도 위에 폴리곤을 그리는 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [
        [
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238),
            new naver.maps.LatLng(37.37230584065902, 127.10791110992432),
            new naver.maps.LatLng(37.35975408751081, 127.10795402526855),
            new naver.maps.LatLng(37.359924641705476, 127.11576461791992),
            new naver.maps.LatLng(37.35931064479073, 127.12211608886719),
            new naver.maps.LatLng(37.36043630196386, 127.12293148040771),
            new naver.maps.LatLng(37.36354029942161, 127.12310314178465),
            new naver.maps.LatLng(37.365211629488016, 127.12456226348876),
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238)
        ]
    ],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3
});

Examples: 폴리곤, 폴리라인 그리기

폴리곤 옵션 살펴보기

폴리곤 또한 폴리라인과 마찬가지로 색상, 두께, 선 스타일, 투명도를 설정할 수 있습니다. 그리고 폴리곤 내부 채우기 색상과 투명도를 설정할 수 있습니다. 폴리곤의 스타일은 Polygon 객체 생성 시 생성자에 PolygonOptions 객체 리터럴을 설정할 수도 있고 생성 후 setOptions 메서드를 이용해 동적으로 스타일을 변경할 수도 있습니다. PolygonOptions 객체 리터럴의 속성 중 clickable 속성을 true로 설정하면 사용자 인터랙션을 처리할 수도 있습니다.

다음은 마우스 포인터를 올리거나 치우는 사용자 인터랙션 시 setOptions 메서드를 사용하여 선 스타일을 변경하는 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [
        [
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238),
            new naver.maps.LatLng(37.37230584065902, 127.10791110992432),
            new naver.maps.LatLng(37.35975408751081, 127.10795402526855),
            new naver.maps.LatLng(37.359924641705476, 127.11576461791992),
            new naver.maps.LatLng(37.35931064479073, 127.12211608886719),
            new naver.maps.LatLng(37.36043630196386, 127.12293148040771),
            new naver.maps.LatLng(37.36354029942161, 127.12310314178465),
            new naver.maps.LatLng(37.365211629488016, 127.12456226348876),
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238)
        ]
    ],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3,
    clickable: true
});

naver.maps.Event.addListener(polygon, 'mouseover', function() {

    polygon.setOptions({
        strokeColor: '#E51D1A',
        strokeOpacity: 1
    });
});

naver.maps.Event.addListener(polygon, 'mouseout', function() {

    polygon.setOptions({
        strokeColor: '#ff0000',
        strokeOpacity: 0.6
    });
});

Examples: 폴리곤 옵션 사용하기

구멍 뚫린 폴리곤 그리기

Polygon 객체의 paths 속성은 여러 개의 path로 구성된 배열입니다. 폴리라인과 다르게 폴리곤에 여러 개의 path로 구성된 paths 속성이 있는 이유는 하나 이상의 닫힌 도형을 표현하거나 구멍이 뚫린 폴리곤을 표현하기 위해서입니다. 폴리곤 내부에 구멍을 표현하려면, 첫 번째 path는 시계 방향으로 지도 좌표 목록을 구성해 폴리곤 외부 좌표를 설정하고, 두 번째 path는 시계 반대 방향으로 구멍의 좌표 목록을 구성합니다. 다음은 위 기본 예제의 폴리곤에 구멍을 뚧은 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [
        [
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238),
            new naver.maps.LatLng(37.37230584065902, 127.10791110992432),
            new naver.maps.LatLng(37.35975408751081, 127.10795402526855),
            new naver.maps.LatLng(37.359924641705476, 127.11576461791992),
            new naver.maps.LatLng(37.35931064479073, 127.12211608886719),
            new naver.maps.LatLng(37.36043630196386, 127.12293148040771),
            new naver.maps.LatLng(37.36354029942161, 127.12310314178465),
            new naver.maps.LatLng(37.365211629488016, 127.12456226348876),
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238)
        ],
        [
            new naver.maps.LatLng(37.368485964153784, 127.10971355438232),
            new naver.maps.LatLng(37.368520071054576, 127.11464881896971),
            new naver.maps.LatLng(37.36350619025713, 127.11473464965819),
            new naver.maps.LatLng(37.363403862670665, 127.1097993850708),
            new naver.maps.LatLng(37.368485964153784, 127.10971355438232)
        ]
    ],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3
});

Examples: 구멍 난 폴리곤 그리기

동적으로 폴리곤 그리기

Polygon의 paths는 KVOArray 객체이고 paths의 요소인 path 또한 지도 좌표 목록으로 구성된 KVOArray입니다. 따라서 폴리라인과 마찬가지로 KVOArray를 활용하여 폴리곤의 좌표 구성을 동적으로 변경할 수 있습니다. 생성 시 PolygonOptions의 paths를 입력할 때 또는 setPaths 메서드를 이용해 입력할 때에는 [Array]로 입력할 수 있지만 객체 내부적으로는 KVOArray로 저장하고 관리합니다. 따라서 getPaths 메서드를 이용해 반환받은 paths는 KVOArray이고 내부 path 또한 KVOArray입니다.

KVOArray에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다.

다음은 지도 클릭 시 클릭한 지점의 지도 좌표를 동적으로 반영하여 폴리곤을 그리는 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [[]],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3,
    clickable: true
});

naver.maps.Event.addListener(map, 'click', function(e) {

    var point = e.latlng;

    var path = polygon.getPaths().getAt(0);
    path.push(point);

    new naver.maps.Marker({
        map: map,
        position: point
    });
});

Examples: 클릭한 지점 폴리곤 연결하기

사각형 그리기

Rectangle은 지도의 영역을 정의하여 간단하게 직사각형을 그릴 수 있는 객체입니다. 생성자에 RectangleOptions 객체 리터럴을 넘겨 사각형을 그립니다. bounds 속성에 LatLngBounds 또는 PointBounds 객체로 지도 영역을 설정할 수 있습니다. 폴리곤 객체와 마찬가지로 선, 채우기 스타일을 정의하는 옵션이 있습니다.

다음은 Rectangle 객체를 생성하여 지도에 직사각형을 그리는 예제입니다.

var map = new naver.maps.Map('map');

var rectangle = new naver.maps.Rectangle({
    map: map,
    bounds: new naver.maps.LatLngBounds(
        new naver.maps.LatLng(37.565, 126.9761217732253),  // sw
        new naver.maps.LatLng(37.568, 126.980655026774)   // ne
    ),
    strokeColor: '#5347AA',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#E51D1A',
    fillOpacity: 0.6
});

Examples: 사각형, 원, 타원 그리기

다음은 지도의 bounds가 변경될 때마다 Rectangle의 bounds도 함께 변경하는 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var rectangle = new naver.maps.Rectangle({
    map: map,
    bounds: map.getBounds(),
    strokeColor: 'none',
    fillColor: '#E51D1A',
    fillOpacity: 0.3
});

naver.maps.Event.addListener(map, 'bounds_changed', function() {
    rectangle.setBounds(map.getBounds());
});

Examples: 지도 좌표 경계 확인하기

원 그리기

Circle 객체는 원의 중심점과 m 단위의 반지름을 입력하여 지도 위에 원을 그리는 객체입니다. CircleOptions 객체 리터럴을 통해 center 속성에 원의 중심 지도 좌표, radius 속성에 m 단위의 반지름을 설정할 수 있고, 다른 도형 오버레이와 마찬가지로 선, 채우기 스타일을 설정할 수 있습니다.

다음은 그린팩토리에서 반경 500m를 원으로 그린 예제입니다.

var GREEN_FACTORY = new naver.maps.LatLng(37.3595953, 127.1053971);

var map = new naver.maps.Map('map', {
    center: GREEN_FACTORY,
    zoom: 10
});

var circle = new naver.maps.Circle({

    map: map,
    center: GREEN_FACTORY,
    radius: 500,

    strokeColor: '#5347AA',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#E51D1A',
    fillOpacity: 0.3
});

Examples: 사각형, 원, 타원 그리기

타원 그리기

Ellipse는 지도의 영역을 정의하여 간단하게 타원을 그릴 수 있는 객체입니다. 생성자에 EllipseOptions 객체 리터럴을 넘겨 타원을 그립니다. bounds 속성에 LatLngBounds 또는 PointBounds 객체로 지도 영역을 설정할 수 있습니다. 다른 도형 오버레이와 마찬가지로 선, 채우기 스타일을 설정할 수 있습니다.

다음 예제는 Ellipse 객체를 생성하여 지도에 타원을 그리는 예제입니다.

var map = new naver.maps.Map('map');

var ellipse = new naver.maps.Ellipse({
    map: map,
    bounds: new naver.maps.LatLngBounds(
        new naver.maps.LatLng(37.565, 126.9761217732253),  // sw
        new naver.maps.LatLng(37.568, 126.980655026774)   // ne
    ),
    strokeColor: '#5347AA',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#E51D1A',
    fillOpacity: 0.6
});

Examples: 사각형, 원, 타원 그리기