Map Chart 와 GeoJSON, Map 만들기
맵 차트(Map Chart)는 지리적 데이터를 시각화하는 데 유용한 차트로, 특정 위치에 따라 데이터를 표시할 수 있습니다. 일반적으로 국가, 도시, 행정구역 등 지리적 위치에 따라 데이터를 시각화할 때 많이 사용되며, 다양한 시각적 효과와 정보를 통해 이해도를 높일 수 있습니다.
1. 맵 차트의 기본 개념
맵 차트는 세계 지도 또는 특정 지역 지도를 배경으로 데이터를 표현하는 형태입니다. 이때 각 위치는 고유의 Geo 데이터(지리 정보 데이터)로 표현되며, 데이터는 위치를 기준으로 지도 위에 표시됩니다.
2. Geo 데이터의 주요 구성 요소
Geo 데이터는 주로 다음과 같은 구성 요소로 이루어집니다:
- 위도(latitude)와 경도(longitude): 특정 위치의 좌표를 나타냅니다.
- 지역 이름: 국가, 도시, 행정구역 등의 이름을 담고 있어, 데이터를 시각적으로 표시하는 데 도움이 됩니다.
- 형상 정보: 폴리곤, 라인, 포인트 등 지형과 영역을 나타내는 벡터 형식 데이터로 제공되어 지도 위에 도형을 그릴 수 있습니다.
3. Geo 데이터 형식
Geo 데이터는 여러 형식으로 제공됩니다:
- GeoJSON: 지도 데이터 표현에 널리 사용되는 JSON 형식으로, 점, 선, 면 등을 표현할 수 있습니다.
- KML (Keyhole Markup Language): 구글 어스에서 사용하는 형식으로 XML 기반입니다.
- Shapefile: ESRI에서 개발한 지리 정보 형식으로, GIS 프로그램에서 많이 사용됩니다.
4. 맵 차트 제작 과정
맵 차트를 만들 때는 일반적으로 다음 과정을 거칩니다:
- Geo 데이터 수집: 필요한 지도 데이터 또는 위치 데이터를 준비합니다.
- 데이터 전처리: Geo 데이터와 매핑할 실제 데이터를 준비하고, 이를 시각화할 수 있도록 가공합니다.
- 맵 차트 라이브러리 선택: 다양한 시각화 라이브러리를 사용해 차트를 그립니다. 예를 들어, D3.js, Leaflet, Google Maps API, Mapbox, Chart.js 등이 있습니다.
- 차트 생성 및 커스터마이징: 위치에 따라 데이터를 표시하고, 색상, 크기 등으로 데이터의 차이를 시각적으로 나타냅니다.
5. 맵 차트 구현 시 고려 사항
- 좌표 체계: Geo 데이터의 좌표 체계가 맞지 않으면 올바르게 시각화되지 않습니다. 일반적으로 WGS84 좌표 체계를 많이 사용합니다.
- 프로젝션: 지구를 평면으로 투영하는 방법으로, 대표적으로 Mercator, Albers, Equirectangular가 있습니다.
- 성능 최적화: 데이터가 많을 경우 클러스터링, 간소화 등을 통해 지도 성능을 최적화해야 합니다.
- Geo Json
GeoJSON은 지리적 데이터를 표현하는 데 사용되는 JSON (JavaScript Object Notation) 기반 형식입니다. 위치 정보를 포함한 점(Point), 선(LineString), 다각형(Polygon) 같은 지형 데이터를 담을 수 있고, 지도와 관련된 시각화를 구현할 때 널리 사용됩니다. 특히 웹 애플리케이션에서 지도 데이터 시각화나 지리적 분석을 위해 많이 사용됩니다.
1. GeoJSON의 주요 요소
GeoJSON은 주로 다음과 같은 지리적 객체 타입으로 구성됩니다.
- Point (점): 하나의 위치를 나타내며 위도와 경도로 표현됩니다.
{
"type": "Point",
"coordinates": [125.6, 10.1]
}
- LineString (선): 두 개 이상의 점을 연결한 선입니다. 길이나 경로 같은 데이터를 나타내는 데 사용됩니다.
{
"type": "LineString",
"coordinates": [
[100.0, 0.0],
[101.0, 1.0]
]
}
- Polygon (다각형): 여러 점을 연결하여 닫힌 영역을 나타냅니다. 나라나 도시의 경계선을 표현할 때 사용됩니다.
{
"type": "Polygon",
"coordinates": [
[
[100.0, 0.0],
[101.0, 0.0],
[101.0, 1.0],
[100.0, 1.0],
[100.0, 0.0]
]
]
}
- MultiPoint, MultiLineString, MultiPolygon: 여러 개의 Point, LineString, Polygon을 하나로 묶어 나타냅니다. 예를 들어, 여러 개의 도시 위치나 다양한 경로를 표현할 수 있습니다.
- GeometryCollection: 다양한 지리적 객체(Point, LineString 등)를 하나의 컬렉션으로 묶어 표현합니다.
2. GeoJSON의 구조
GeoJSON은 type과 coordinates라는 속성을 기본적으로 가집니다. type은 데이터 타입(Point, LineString 등)을 정의하고, coordinates는 해당 지리적 객체의 좌표 정보를 담습니다.
GeoJSON의 상위 구조는 일반적으로 다음과 같이 Feature 또는 FeatureCollection 형태로 되어 있습니다:
- Feature: 속성과 지리 정보를 결합해 하나의 객체로 나타냅니다. 예를 들어, 도시의 위치(geometry)와 인구 정보(properties)를 함께 포함할 수 있습니다.
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
- FeatureCollection: 여러 개의 Feature를 담은 컬렉션으로, GeoJSON에서 가장 일반적인 형식입니다. 한 국가의 모든 도시 위치 같은 데이터를 모아서 표현할 수 있습니다.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "City A"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [120.9, 14.1]
},
"properties": {
"name": "City B"
}
}
]
}
3. GeoJSON의 활용 사례
- 지도 시각화: GeoJSON을 사용해 지도를 구성하고, 웹 애플리케이션에서 지역 정보를 시각화할 수 있습니다.
- 공간 분석: 특정 위치에서의 거리 계산, 다각형 안에 점이 포함되는지 여부 등을 분석할 수 있습니다.
- 데이터 필터링: 특정 조건에 맞는 지리적 데이터만 표시하거나 강조할 수 있습니다.
GeoJSON은 간단하고 구조적이기 때문에 다양한 라이브러리나 도구에서 쉽게 활용할 수 있습니다. Leaflet, Mapbox, D3.js 등 지도 시각화 라이브러리와 호환되어 웹 기반 지도 애플리케이션을 쉽게 구현할 수 있습니다.
차트 생성 방법은
1. <div> 에 컨테이너를 두고 id값에 차트를 맵핑한다.
2. 차트의 Option을 설정한다.(제목, 스타일, 툴팁, 레이블 표시 등)
3. create 해서 생성한다.
4. 데이터를 불러온다.(데이터 Type 또는 구조에 따라 그려지는 것이 달라짐)
레이블 표시 예제와 다양한 모양의 Map 차트
https://demo.riamore.net/HTML5demo/map/Samples/LabelOpacity.html
라벨의 투명도를 설정할 수 있음.
글씨를 크게 해서 꽉차게 한 뒤 투명도를 주는거임
https://demo.riamore.net/HTML5demo/map/Samples/_World_USA_Callout.html
라벨 콜아웃
선으로 빼서 이름을 한쪽에 위치시킴
https://demo.riamore.net/HTML5demo/map/Samples/DataProperties.html
라벨 글씨가 한글로 꽉차게 그려지는 모양