데이터 구조
데이터는 지역별 데이터, 포인트 데이터,라인 데이터 로 나뉩니다.
1. 지역별 데이터
특정지역(맵)의 중앙에 레이블이나 이미지등을 표현하는 방법입니다.
지역별 데이터는 데이터를 넣을 맵 지역의 id 를 key 로 하고, 데이터를 담고있는 객체를 value 로 하는 json 구조를 갖습니다.
{
"{map.id}": {
"value": "",
"image": "",
},
...
}
지역별 데이터는 맵을 그리는 데이터가 아니라, 그려진 지역 안에 넣고자 하는 데이터(보통 차트, 이미지 등)을 의미합니다.
데이터를 넣을 맵 지역의 id를 확인하는 방법
맵을 로드하는 geojson 파일 내부에서 맵 지역의 id를 확인 가능합니다.
지역별 데이터 구성 요소
| property | description |
|---|---|
value |
해당 지역에 설정하고자 하는 값 |
image |
이미지 출력 시 사용할 이미지 경로 |
data |
차트 구성 시 사용할 데이터 구성 객체 |
data.name |
데이터 명 |
data.value |
데이터 값 |
{
"title": "map data json schema", // 지역별 데이터(map data) 에 대한 json schema 입니다.
"type": "object", // 이 데이터 구조의 유형은 JSON 객체(object)입니다.
"required": [], // 필수 값은 없습니다.
"properties": { // 데이터에 들어갈 속성에 대한 설명입니다.
"value": { // 1. 키값이 "value" 라는 속성은 숫자나 문자열을 값으로 가집니다.
"type": ["number", "string"]
},
"image": { // 2. 키값이 "image" 라는 속성은 문자열을 값으로 가집니다.
"type": "string" // 일반적으로 해당 속성에는 이미지 URL이 들어갑니다.
},
"data": { // 3. 키값이 "data" 라는 속성은 array 를 값으로 가집니다.
"type": "array", // 이 속성은 map.chart 구성 시에 사용할 데이터 구성 객체를 뜻합니다.
"description": "차트 구성 시 사용할 데이터",
"items": { // 각 배열 내의 항목에 대한 설명입니다.
"type": "object", // 배열 안에 들어갈 각 항목은 모두 JSON 객체(object) 입니다.
"required": ["name", "value"], // 필수적으로 "name"과 "value" 라는 속성이 있어야합니다.
"properties": { // 각 배열 안에 들어갈 JSON 객체의 속성을 설명합니다.
"name": { // 3-1. 키값이 "name" 이라는 속성은 문자열을 값으로 가집니다.
"type": "string"
},
"value": { // 3-2. 키값이 "value" 라는 값은 숫자를 값으로 가집니다.
"type": "number"
}
}
}
}
}
}
위 schema 를 참고해 만든 지역별 데이터 예제는 아래와 같습니다.
{
// 맵 id 가 "kr-so" 지역에 데이터 설정
"kr-so": {
"value": 5,
"image": "./images/sunny.png", // 이미지로 데이터를 보여줄 때 출력할 이미지 경로
"data": [ // 차트로 데이터를 보여줄 때 사용할 데이터
{"value": 4, "name": "Locke"},
{"value": 8,"name": "Reyes"},
{"value": 42,"name": "Kwon"},
{"value": 16,"name": "Jarrah"},
{"value": 15,"name": "Ford"},
{"value": 23,"name": "Shephard"}
]
},
// 맵 id 가 "kr-pu" 지역에 데이터 설정
"kr-pu": {
"value": 1,
"image": "./images/rain.png", // 이미지로 데이터를 보여줄 때 출력할 이미지 경로
"data": [ // 차트로 데이터를 보여줄 때 사용할 데이터
{"value": 4,"name": "Locke"},
{"value": 8,"name": "Reyes"},
{"value": 42,"name": "Kwon"},
{"value": 16,"name": "Jarrah"},
{"value": 15,"name": "Ford"},
{"value": 23,"name": "Shephard"}
]
}
}
2. 포인트 데이터
지정한 위도/경도에 레이블이나 이미지를 표시하는 방법입니다.
포인트 데이터는 id(포인트id), lat(위도), lon(경도)가 필수 속성인 json 구조를 갖습니다.
{
"id" : "{point.id}",
"lat": "",
"lon": "",
...
}
포인트 데이터는 맵을 그리는 데이터가 아니라, 그려진 지역 안에 위도와 경도를 지정해서 그 곳에 포인트를 표시하는 데이터를 의미합니다.
포인트 데이터 구성 요소
| property | description |
|---|---|
id |
포인트 id |
name |
포인트 명 |
value |
포인트에 설정하고자 하는 값 |
lat |
포인트의 위도 좌표 |
lon |
포인트의 경도 좌표 |
image |
포인트에 이미지 출력 시 사용할 이미지 경로 |
data |
차트 구성 시 사용할 데이터 구성 객체 |
data.name |
데이터 명 |
data.value |
데이터 값 |
{
"title": "point data json schema", // 포인트 데이터에 대한 json schema 입니다.
"type": "object", // 이 데이터 구조의 유형은 JSON 객체(object) 입니다.
"required": ["id", "lat", "lon"], // 필수적으로 "id", "lat", "lon" 이라는 속성이 있어야합니다.
"properties": { // 데이터에 들어갈 속성에 대한 설명입니다.
"id": { // 1. 키값이 "id" 라는 속성은 문자열을 값으로 가집니다.
"type": "string"
},
"name": { // 2. 키값이 "name" 라는 속성은 문자열을 값으로 가집니다.
"type": "string"
},
"value": { // 3. 키값이 "value" 라는 속성은 숫자나 문자열을 값으로 가집니다.
"type": ["number", "string"]
},
"lat": { // 4. 키값이 "lat" 라는 속성은 숫자를 값으로 가집니다.
"type": "number"
},
"lon": { // 5. 키값이 "lon" 라는 속성은 숫자를 값으로 가집니다.
"type": "number"
},
"image": { // 6. 키값이 "image" 라는 속성은 문자열을 값으로 가집니다.
"type": "string" // 일반적으로 해당 속성에는 이미지 URL이 들어갑니다.
},
"data": { // 7. 키값이 "data" 라는 속성은 array를 값으로 가집니다.
"type": "array", // 이 속성은 point.chart 구성 시 사용할 데이터 구성 객체를 뜻합니다.
"description": "차트 구성 시 사용할 데이터",
"items": { // 각 배열 내의 항목에 대한 설명입니다.
"type": "object", // 배열 안에 들어갈 각 항목은 모두 JSON 객체(object) 입니다.
"required": ["name", "value"], // 필수적으로 "name"과 "value" 라는 속성이 있어야합니다.
"properties": { // 각 배열 안에 들어갈 JSON 객체의 속성을 설명합니다.
"name": { // 7-1. 키값이 "name" 이라는 속성은 문자열을 값으로 가집니다.
"type": "string"
},
"value": { // 7-2. 키값이 "value" 라는 속성은 숫자를 값으로 가집니다.
"type": "number"
}
}
}
}
}
}
위 schema 를 참고해 만든 포인트 데이터 예제는 아래와 같습니다.
[
{
"id": "kr001", // id 가 "kr001" 인 포인트 생성
"name": "서울특별시청", // 포인트 이름은 "서울특별시청"
"value": 5, // 포인트의 값은 5
"lat": 37.566682, // 포인트는 위도 37.566682 에 생성
"lon": 126.978418, // 포인트는 경도 126.978418 에 생성
"image": "./images/sunny.png", // 이미지로 포인트를 보여줄 때 출력될 이미지 경로
"data": [ // 차트로 데이터를 보여줄 때 사용할 데이터
{"value": 4, "name": "Locke"},
{"value": 8,"name": "Reyes"},
{"value": 42,"name": "Kwon"},
{"value": 16,"name": "Jarrah"},
{"value": 15,"name": "Ford"},
{"value": 23,"name": "Shephard"}
]
},
{
"id": "kr-002", // id 가 "kr-002" 인 포인트 생성
"name": "제주특별자치도청", // 포인트 이름은 "제주특별자치도청"
"value": "kh99984", // 포인트의 값은 "kh99984"
"lat": 33.488985, // 포인트는 위도 33.488985 에 생성
"lon": 126.498377, // 포인트는 경도 126.498377 에 생성
"image": "./images/rain.png", // 이미지로 포인트를 보여줄 때 출력될 이미지 경로
"data": [ // 차트로 데이터를 보여줄 때 사용할 데이터
{"value": 4,"name": "Locke"},
{"value": 8,"name": "Reyes"},
{"value": 42,"name": "Kwon"},
{"value": 16,"name": "Jarrah"},
{"value": 15,"name": "Ford"},
{"value": 23,"name": "Shephard"}
]
}
]
3. 라인 데이터
from,to로 위도/경도를 지정하여 지정한 위치간에 원하는 모양의 선을 표시하는 방법입니다.
라인 데이터는 id(라인id), from(lat(위도), lon(경도)), to(lat(위도), lon(경도))가 필수 속성인 json 구조를 갖습니다.
{
"id" : "{point.id}",
"from":{"lat": "", "lon": ""},
"to":{"lat": "", "lon": ""},
...
}
라인데이터를 구성하실 때는 from, to 의 지정에 따라 레이블의 위치나 애니메이션 효과의 출발,종료 지점이 결정됩니다.
라인 데이터 구성 요소
| property | description |
|---|---|
id |
포인트 id |
from |
라인의 시작점 객체 |
from.name |
라인의 시작점 이름 |
from.lat |
라인의 시작점 위도 좌표 |
from.lon |
라인의 시작점 경도 좌표 |
to |
라인의 종료점 객체 |
to.name |
라인의 종료점 이름 |
to.lat |
라인의 종료점 위도 좌표 |
to.lon |
라인의 종료점 경도 좌표 |
style |
라인 스타일 객체 |
style.border |
라인 선 스타일 객체 |
style.border.width |
라인 선 굵기 |
style.border.color |
라인 선 색상 |
style.border.style |
라인 선 종류 |
style.border.animation |
라인 선 애니메이셔 효과 |
style.hover |
라인 선에 마우스 커서 호버시 스타일 객체 |
style.hover.border.width |
호버시 라인 선 굵기 |
style.hover.border.color |
호버시 라인 선 색상 |
style.hover.border.style |
호버시 라인 선 종류 |
style.hover.border.animation |
호버시 라인 선 애니메이셔 효과 |
label |
라인 중앙에 표시할 레이블 객체 |
label.text |
라인에 표시할 레이블 내용 |
label.x |
라인 중심점으로 부터 지정한 값만 큼 x축 이동 |
label.y |
라인 중심점으로 부터 지정한 값만 큼 y축 이동 |
label.rotate |
레이블의 회전 각도 |
label.showDistance |
레이블에 두지점간의 거리 정보 표시 |
label.textPosition |
label.text와 거리 정보를 같이 표현할때 label.text의 위치(left,right) |
{
"title": "line data json schema", // 라인 데이터에 대한 json schema 입니다.
"type": "object", // 이 데이터 구조의 유형은 JSON 객체(object) 입니다.
"required": ["id", "from", "to"], // 필수적으로 "id", "from", "to" 이라는 속성이 있어야합니다.
"properties": { // 데이터에 들어갈 속성에 대한 설명입니다.
"id": { // 1. 키값이 "id" 라는 속성은 문자열을 값으로 가집니다. (id 값은 고유해야합니다.)
"type": "string"
},
"from": {
"type": "object",
"discription": "선의 출발점 데이터",
"properties": {
"name": { // 2. 키값이 "name" 라는 속성은 문자열을 값으로 가집니다. (생략가능)
"type": "string"
},
"lat": { // 3. 키값이 "lat" 라는 속성은 숫자를 값으로 가집니다. (위도)
"type": "number"
},
"lon": { // 4. 키값이 "lon" 라는 속성은 숫자를 값으로 가집니다. (경도)
"type": "number"
},
},
},
"to": {
"type": "object",
"discription": "선의 종료점 데이터",
"properties": {
//... 중략 ... from 과 동일한 속성을 갖습니다.
},
},
"style": { // 5. 선의 디자인,색상,굵기 등을 설정합니다.
"type": "object",
"discription": "선의 스타일 정의",
"properties": {
"border": {
"type": "object",
"discription": "표시된 선의 스타일 정의",
"properties": {
"color": { // 선의 색상
"type": "string"
},
"width": { // 선의 굵기
"type": "number"
},
"style": { // 선의 모양 ()
"type": "string"
},
"animation": { // 선의 애니메이션 효과
"type": "string"
},
},
},
"hover": {
"type": "object",
"discription": "마우스 호버시 선의 스타일 정의",
"properties": {
"border": {
// ... 중략 ... style.border 과 동일한 속성을 갖습니다.
}
}
}
},
},
"label": { // 6. 선의 표시할 문자를 설정합니다.
"type": "object",
"discription": "선의 스타일 정의",
"properties": {
"text": { // 선 중앙에 표시할 문자열
"type": "string"
},
"x": { // 선 중앙으로 부터 x축방향으로 이동값
"type": "number"
},
"y": { // 선 중앙으로 부터 y축방향으로 이동값
"type": "number"
},
"rotate": { // 레이블 회전 각도
"type": "number"
},
"showDistance": { // 선이 연결하는 두 지점간의 거리 정보 표시 여부
"type": "boolean"
},
"textPosition": { // label.text와 거리정보 동시 표시시 label.text의 위치(left,right)
"type": "string"
},
}
}
}
}
위 schema 를 참고해 만든 포인트 데이터 예제는 아래와 같습니다.
[
{
"id": "l-001", // 추가하는 lind id
"from": { // 시작점
"name": "김포국제공항", //시작점 이름
"lat": 37.5576, // 시작점 위도
"lon": 126.7953 // 시작점 경도
},
"to": { // 끝점
"name": "제주국제공항", //종료점 이름
"lat": 33.5072, // 종료점 위도
"lon": 126.4924 // 종료점 경도
},
"style": {
"border": {
"width": 2, //연결선 굵기
"color": "#FF0000", //연결선 색상
"style": "dotted", //선 유형 "solid", "dashed", "dotted", "10 50"(선길이 공백길이)
"animation": "stream 20s linear infinite" //애니메이션 (stream 은 ibmap.css에 정의됨)
}
},
"label": {
"text": "서울 -> 제주 노선", //선 표시 레이블
"x": 20,//레이블 x offset 이동
"y": 5, //레이블 y offset 이동
"rotate": 45 //레이블 회전
}
},
{
"id": "l-002",
"from": {
"name": "김포국제공항", "lat": 37.5576, "lon": 126.7953
},
"to": {
"name": "김해국제공항", "lat": 35.17258, "lon": 128.94591
},
"style": {
"border": {
"width": 2, //연결선 굵기
"color": "#3434F3", //연결선 색상
"style": "dashed", //선 유형 "solid", "dashed", "dotted", "10 50"(선길이 공백길이)
}
},
"label": {
"text": "서울 -> 부산 노선", //선 표시 레이블
"showDistance": true, //레이블에 거리 정보 표시
"textPosition": "right" //showDistance 사용시 거리정보 기준 레이블 표시 위치
}
}
]
주소를 기준으로 위/경도 좌표 확인 방법
Google Maps API 를 이용하면 편리하게 주소의 위/경도 좌표를 확인할 수 있습니다.
Google Maps API 이용 방법
https://developers.google.com/maps/documentation/geocoding/intro?hl=ko 참고