logo
Tutorials Examples naver map js api v3 네이버 지도 API Data

Class: naver.maps.Data

naver.maps. Data

Data 클래스는 GeoJSON, KML, GPX 지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 표현하는 데이터 레이어를 정의합니다.

Map 객체는 기본적으로 data라는 이름의 Data 인스턴스를 속성으로 포함하고 있습니다. 따라서, 일반적인 상황에서는 명시적으로 새로운 객체를 생성하지 않습니다.

new naver.maps.Data()

Tutorials

Extends

Methods

addFeature(feature, autoStyle)

Feature 객체를 데이터 레이어에 추가합니다.

Parameters
Name Type Description
feature naver.maps.Feature

추가할 Feature 객체

autoStyle boolean

스타일 적용 유무. Geometry 객체의 Foreign Members mantle_properties 내에 지도 API에서 사용하는 스타일이 정의되어 있으면 자동으로 해당 스타일을 적용합니다.

Fires
Returns
Type Description
naver.maps.Feature

Feature 객체

addGeoJson(geojson, autoStyle)

GeoJSON 형식의 지리 공간 데이터를 추가합니다.

지정한 데이터의 모든 Feature를 추가합니다.

Parameters
Name Type Description
geojson GeoJSON

추가할 GeoJSON 객체

autoStyle boolean

스타일 적용 유무. Geometry 객체의 Foreign Members mantle_properties 내에 지도 API에서 사용하는 스타일이 정의되어 있으면 자동으로 해당 스타일을 적용합니다.

Returns
Type Description
Array.<naver.maps.Feature>

Feature 객체의 배열

addGpx(xmlDoc, autoStyle)

GPX 형식의 지리 공간 데이터를 추가합니다. 내부적으로 GeoJSON 형식의 데이터로 변환합니다.

Parameters
Name Type Description
xmlDoc GPX

추가할 GPX 객체

autoStyle boolean

스타일 적용 유무. 이 값이 true이면, GPX 내에 정의된 GPX Style SchemaLine 스타일을 자동으로 적용합니다. 그렇지 않으면 스타일을 적용하지 않습니다.

Returns
Type Description
Array.<naver.maps.Feature>

Feature 객체의 배열

addKml(xmlDoc, autoStyle)

KML 형식의 지리 공간 데이터를 추가합니다. 내부적으로 GeoJSON 형식의 데이터로 변환합니다.

Parameters
Name Type Description
xmlDoc KML

추가할 KML 객체

autoStyle boolean

스타일 적용 유무. 이 값이 true이면, KML 내에 정의된 도형 스타일을 자동으로 적용합니다. 그렇지 않으면 스타일을 적용하지 않습니다.

Returns
Type Description
Array.<naver.maps.Feature>

Feature 객체의 배열

forEach(callback)

데이터 레이어에 있는 모든 Feature 객체를 순서대로 돌며 콜백 함수를 수행합니다.

Parameters
Name Type Description
callback function

데이터 레이어에 포함된 모든 Feature 객체를 순서대로 돌며 수행할 콜백 함수

Properties
Name Type Description
feature naver.maps.Feature

Feature 객체

index number

해당 Feature 객체의 인덱스

getAllFeature()

데이터 레이어에 추가된 모든 Feature 객체의 배열을 반환합니다.

Returns
Type Description
Array.<naver.maps.Feature>

Feature 객체의 배열

getFeatureById(id)

지정된 id에 해당하는 Feature 객체를 반환합니다.

Parameters
Name Type Description
id string | number

Feature 객체의 고유한 id

Returns
Type Description
naver.maps.Feature

Feature 객체

getMap()

현재 데이터 레이어가 추가된 Map 객체를 반환합니다.

Returns
Type Description
naver.maps.Map | null

Map 객체

getStyle()

GeoJSON 지리 공간 데이터의 표현 스타일을 반환합니다.

Returns
Type Description
StyleOptions | StylingFunction

StyleOptions 객체 또는 StylingFunction

overrideStyle(feature, style)

적용된 데이터 표현 스타일을 재정의합니다. 재정의된 스타일만 반영됩니다.

Parameters
Name Type Description
feature naver.maps.Feature

Feature 객체

style StyleOptions

StyleOptions 객체

removeFeature(feature)

Feature 객체를 데이터 레이어에서 삭제합니다.

Parameters
Name Type Description
feature naver.maps.Feature

삭제할 Feature 객체

Fires
Returns
Type Description
string | number

removedFeatureId - 삭제된 Feature 객체의 id

removeGeoJson(geojson)

GeoJSON 형식의 지리 공간 데이터를 삭제합니다.

지정한 데이터의 모든 Feature를 삭제합니다.

Parameters
Name Type Description
geojson GeoJSON

삭제할 GeoJSON 객체

revertStyle(feature)

재정의된 데이터 표현 스타일을 기존에 setStyle 메서드를 이용해 지정한 스타일로 복원합니다.

인수로 Feature 객체를 전달하면, 해당 Feature 객체의 스타일만 복원합니다.

Parameters
Name Type Argument Description
feature naver.maps.Feature <optional>

복원할 Feature 객체

setMap(map)

데이터 레이어를 지도에 추가합니다. 인수로 null을 전달하면 데이터 레이어를 지도에서 제거합니다.

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

데이터 레이어를 추가할 Map 객체

setStyle(style)

GeoJSON 지리 공간 데이터의 표현 스타일을 설정합니다.

데이터를 표현하는 스타일은 StyleOptions 객체 리터럴 또는 스타일을 처리하는 StylingFunction 함수를 이용해 설정할 수 있습니다.

Parameters
Name Type Description
style StyleOptions | StylingFunction

데이터 표현 스타일

Example
map.data.setStyle(function(feature) {
  var color = 'red';
  if (feature.getProperty('isColorful')) {
      color = feature.getProperty('color');
  }

  return {
      fillColor: color,
      strokeColor: color,
      strokeWeight: 2,
      icon: null
  };
});

toGeoJson()

데이터 레이어에 있는 모든 Feature 객체를 컬렉션으로 포함하는, 완전한 GeoJSON 지리 공간 데이터 객체를 반환합니다.

이때, 반환된 GeoJSON의 모든 Feature는 추가될 당시에 id가 존재하지 않았다면 임의의 고유한 id가 부여됩니다.

Returns
Type Description
GeoJSON

GeoJSON 객체

Type Definitions


FeatureEvent

데이터 레이어에 있는 Feature 객체가 변경되었을 때 전달되는 이벤트 객체입니다.

Type:
  • event
Properties
Name Type Description
feature naver.maps.Feature

이벤트가 발생한 Feature 객체입니다.


PointerEvent

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 마우스 또는 터치 이벤트가 발생하면 전달되는 포인터 이벤트 객체입니다.

Type:
  • event
Properties
Name Type Description
coord Coord

이벤트가 발생한 위치의 지도 좌표입니다.

point naver.maps.Point

이벤트가 발생한 위치의 세계 좌표입니다.

offset naver.maps.Point

이벤트가 발생한 위치의 픽셀 좌표입니다.

pointerEvent DOMEvent

이벤트가 발생한 시점의 DOM 이벤트 객체입니다.

feature naver.maps.Feature

이벤트가 발생한 위치의 Feature 객체입니다.


PropertyEvent

데이터 레이어에 있는 Feature 객체의 부가 정보(properties)가 변경되었을 때 전달되는 이벤트 객체입니다.

Type:
  • event
Properties
Name Type Description
feature naver.maps.Feature

이벤트가 발생한 Feature 객체입니다.

name string

변경된 부가 정보의 이름(키)입니다.

oldValue any

해당 부가 정보의 변경 전 값입니다.

newValue any

해당 부가 정보의 변경 후 값입니다.


StyleOptions

StyleOptions 객체는 데이터 레이어에서 기하 구조의 스타일을 정의하는 옵션을 나타냅니다.

Type:
Properties
Name Type Argument Default Description
strokeColor string <optional>
#000

기하 구조의 선 색상입니다. CSS 색상 표현법으로 설정합니다.

strokeOpacity number <optional>
0.8

기하 구조의 선 불투명도입니다. 값의 범위는 0~1입니다.

strokeWeight number <optional>
3

기하 구조의 선 두께입니다.

fillColor string <optional>
#000

기하 구조 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다.

fillOpacity number <optional>
0.3

기하 구조 영역의 불투명도입니다. 값의 범위는 0~1입니다.

clickable boolean <optional>
true

기하 구조의 클릭 허용 여부입니다.

icon string | ImageIcon | SymbolIcon | HtmlIcon <optional>

마커의 모양입니다.

shape MarkerShape <optional>

마커의 인터랙션 영역입니다.

title string <optional>
null

마커에 마우스 포인터를 올리면 나타나는 툴팁 문자열입니다. 이 속성을 설정하지 않거나 빈 문자열로 설정하면 툴팁을 노출하지 않습니다.

visible boolean <optional>
true

기하 구조의 노출 허용 여부입니다.

zIndex number <optional>

기하 구조의 쌓임 순서입니다.

StylingFunction(feature)

데이터 레이어에 있는 Feature 객체의 스타일을 처리할 수 있도록 Feature 객체를 순서대로 돌며 수행되는 함수입니다.

이때 반환값은 반드시 StyleOptions 객체 리터럴이어야 합니다.

Parameters
Name Type Description
feature naver.maps.Feature

Feature 객체

Returns
Type Description
StyleOptions

StyleOptions 객체

Events

addfeature

Feature 객체가 추가되었을 때 이벤트가 발생합니다.

Parameters
Name Type Description
event naver.maps.Data.FeatureEvent

이벤트 객체입니다.

click

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다.

Parameters
Name Type Description
pointerEvent naver.maps.Data.PointerEvent

이벤트 객체입니다.

dblclick

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다.

Parameters
Name Type Description
pointerEvent naver.maps.Data.PointerEvent

이벤트 객체입니다.

mousedown

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다.

Parameters
Name Type Description
pointerEvent naver.maps.Data.PointerEvent

이벤트 객체입니다.

mouseout

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다.

Parameters
Name Type Description
pointerEvent naver.maps.Data.PointerEvent

이벤트 객체입니다.

mouseover

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다.

Parameters
Name Type Description
pointerEvent naver.maps.Data.PointerEvent

이벤트 객체입니다.

mouseup

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다.

Parameters
Name Type Description
pointerEvent naver.maps.Data.PointerEvent

이벤트 객체입니다.

property_changed

Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다.

Parameters
Name Type Description
event naver.maps.Data.PropertyEvent

이벤트 객체입니다.

removefeature

Feature 객체가 삭제되었을 때 이벤트가 발생합니다.

Parameters
Name Type Description
event naver.maps.Data.FeatureEvent

이벤트 객체입니다.

rightclick

GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다.

Parameters
Name Type Description
pointerEvent naver.maps.Data.PointerEvent

이벤트 객체입니다.