지도 공부하기

플랫폼에는 지도가 존재하는데 이 지도 소스가 아주 기깔나다. 그 때 그 때 필요할때마다 쓰다가 어쩔 때는 범용적으로 쓰겠다며 뭔가 엄청 복잡하게 분리해놓았지만 그에 대한 문서는 하나도 없어서 그 누구도 원리를 알 수 없고 또 그 소스 위에다가 당장 기능은 구현해야하니 또 덕지덕지 붙이는 등... 너덜너덜한 지도 컴포넌트가 바로 우리의 것이다. 

지도가 내게 있어서 어려운 파트다보니 항상 있는 기능만 어찌어찌 쓰고만 있었는데 이제 더이상 외면 할 수는 없을 것 같아 공부를 시작해보려 한다.

 

우리는 오픈레이어즈를 기반으로 사용하고 있으며, 오픈레이어즈의 기본 지도인 OSM과 카카오지도를 사용하고 있다. 타일만 외부 지도를 사용하며 기능 구현은 전부 오픈레이어즈를 활용하고 있는 상태이다.

본 글은 학습한 것을 정리했다기보단 무엇을 어떻게 공부해야하고 어떤 것을 더 알아야하는지에 대한 방향 잡기에 더 가깝다. 따라서 아래 내용은 GPT와 함께 진행할 것이고 그에 따라 정확도가 다소 낮을 수 있으니 혹시 이 글을 읽으시는 분들은 해당 글의 신뢰성이 낮다는 점을 알아두었음 좋겠다.

 

 

오픈 레이어즈란?

오픈 레이어즈(OpenLayers)는 지도를 띄울 수 있는 라이브러리로, 오픈소스 기반이며 레이어를 기반으로 하여 다양한 데이터 형식을 유연하게 표출 할 수 있다. 

지도 라이브러리라 함은 보통 카카오 MAP, 구글 MAP 같은 것이 먼저 떠오르는데, 엄연히 따지면 기능이 좀 다르다. 오픈 레이어즈의 경우 다양한 지도 데이터를 불러오고 처리해주는 라이브러리다. 띄워진 지도 타일 위에 레이어를 씌워 지도 위에 다양한 기능을 구현해주는 것이고, 카카오나 구글 같은경우는 지도 데이터 자체를 제공해주고 이 제공된 지도에서 기본적인 상호작용을 할 수 있게끔 해주는 라이브러리이다. 

따라서 오픈레이어즈 같은 라이브러리는 좀 더 유연하게 다양한 기능을 구현할 수 있으며, 카카오MAP같은 라이브러리는 자체 지도이기에 좀 더 쉽게 상호작용을 다룰 수 있다. 

오픈레이어즈와 비슷한 서비스로는 Leaflet이 있다는데 오픈레이어즈보다 훨씬 가볍고 학습 곡선도 낮은 편이라고 하는데 실제로 사용해보진 않아서 모르겠다. 언젠간 사용해볼 날이 오겠지.

 

 

오픈레이어즈와 함께 사용할 수 있는 라이브러리

직접 사용해본 적은 없는데 미리 써놓고 나중에 활용할 수 있도록 적어놔본다! 별도 검색 없이 거의 GPT에 의존했음을 알린다!

 

1. GeoServer or MapServer

서버 측에서 지리 데이터를 관리해주는 도구이다. 지리에 대한 공간 데이터를 시각화하여 타일로 제공해줌으로써 클라이언트에서 지리 데이터를 관리하는 것이 아닌 서버가 관리 주체가 됨으로 더 높은 성능으로 지도 타일을 빠르게 제공해준다. 또한 복잡한 공간 데이터를 처리해줄 수도 있어 더 다양한 정보를 빠르게 띄울 수 있게 된다.

GeoServer 같은 경우는 확장성, 사용편의성, 다양한 데이터 형식 지원에 중점을 두었다하며 관리 UI가 직관적이고, MapServer의 경우 설정과 관리에 있어서 복잡하고 다소 불친절하지만 성능 최적화화 고성능 처리에 강점을 가지고 있다 한다.

내가 알기로 현재 우리 서비스는 타일 맵을 서버 하나에다가 넣어놓고 클라이언트가 이를 가져오는 방식으로 하고 있는데 이러한 기능을 넣으면 좀 더 빠르고 화면에 띄울 수 있을 것 같다보니 좀 더 연구해봐야할 필요성을 느꼈다. 

그런 의미로 이를 구현한 글로 추정되는 글을 미리 달아놓고 나중에 정독하고 따라해봐야겠다!!

 

2. PostGIS

지오서버, 맵서버가 공간 데이터를 시각화하여 타일 맵을 클라이언트에 제공하는데 초점이 맞춰져있다면, PostGIS는 공간 데이터를 저장하고 분석하여 더 많은 기능을 빠르게 연산하고 사용할 수 있도록 도와주는 라이브러리다. 

위의 지오서버같은 것과는 상호보완관계라 할 수 있다. 

비슷한 것으로 Turf.js가 있는데 PostGIS는 서버에서 공간 데이터를 저장하고 처리한다면 Turf.js는 클라이언트 측에서 행한다. 클라이언트에서 공간 데이터를 분석하고 처리하면 소규모의 데이터 처리만 가능하지만 그만큼 실시간으로 빠르게 화면에 적용할 수 있을 것이다. 경우에 따라 어떤 것을 어떻게 사용할지는 고민해봐야할 것이다. 

 

3. D3.js

지리 데이터를 시각화하여 차트나 통계를 지도 위에서 띄울 수 있도록 도와준다. 언젠간 분명 지도 위에 차트 띄울 날이 올 것 같은데 미리 키워드로 알아놔야겠다.

 

4. Proj4js

좌표 변환을 지원하는 라이브러리다. 오픈레이어즈가 다양한 지도 타일을 받을 수 있다보니 서로 다른 좌표계를 품은 지도들을 받을 수 있고, 이 때 좌표계가 다름으로써 기능이 망가질 수도 있는데 이를 방지하기 위해 해당 라이브러리를 활용하여 쉽게 좌표계를 동일하게 맞춰 일관성 있는 데이터의 표출을 도와준다. 

 

 

오픈 레이어즈의 특징

1. 다양한 지도 소스 지원

오픈 레이어즈는 말했듯이 다양한 지도를 백그라운드로 띄울 수 있다. OSM, 구글맵, 카카오맵 등 지도 타일 자체를 넣을 수도 있고 혹은 지도 API로 띄울 수도 있다. 따라서 하나의 지도지만 사용자의 요구사항에 맞게 지도 배경을 바꿀 수 있기도 한 것이다. 

또한 좌표계 변환도 지원해주어 여러 지도를 동시에 사용하기에 더 편할 수 있게 된다.

 

2. 다양한 데이터 처리

점, 선, 다각형 같은 벡터 데이터와 이미지 형식의 레스터 데이터 등 다양한 데이터를 모두 지원한다. 따라서 지도 위에 다양한 모양을 띄울 수도 있다. 

 

3. 상호작용과 사용자 인터페이스

줌, 클릭 이벤트 등 지도와의 기본 상호작용이 지원되며 또 이벤트를 직접 만들어서 상호작용을 늘릴 수도 있다. 

 

4. 다중 레이어 지원

레이어의 개념이 도입되어있으며 백터 레이어, 래스터 레이어 등 다양한 레이어를 한 번에 지도위에 띄울 수 있다. 이를 통해 다양한 데이터들을 하나의 지도위에서 모두 띄울 수 있게 된다. 

 

 

오픈 레이어즈의 구성

1. Map

화면에 지도를 생성하고 관리하는 컨테이너이다. 레이어와 뷰, 인터랙션 등을 조합하여 지도를 완성하고 HTML에 연결하여 화면에 표출해낸다. 

 

2. View

지도의 보이는 영역을 정의한다. 줌 레벨, 중심좌표, 좌표계 등을 설정하여 지도의 현재 상태를 지정하고 제어할 수 있다. 

 

3. Source

지도와 관련된 모든 데이터을 나타낸다. 점, 선 같은 벡터 데이터나 이미지나 지도타일같은 래스터 데이터를 불러오는 방법을 지원하고  WMS를 통해서 외부에서 받아온 데이터 소스를 불러오는 방법도 지원한다. 

WMS는 지오서버같은 곳에서 지도를 받아오는 것 같다. WMS로 지도 타일을 받아왔다면 타일 레이어를 생성하는 것이 아닌 WMS 레이어를 생성하여 받아온 지도를 띄우는 식으로 하는 듯? WMS외에도 WMTS, TMS, WFS 등이 있으니 나중에 더 살펴보도록 하자. 

 

4. Layer

source들을 화면에 그리기 위해 사용된다. 데이터들을 렌더링 하는 역할을 하며, 각 레이어는 겹쳐 사용함으로 표시할 수 있다.

 

5. Controls

줌 버튼, 스크롤 휠 등 사용자 인터페이스 요소를 제공한다

 

6. Interaction

사용자가 지도와 상호작용할 수 있도록 도와준다. 기본적으로 클릭, 줌, 드래그와 같은 상호작용이 지원되고 필요에 따라 커스텀하여 사용할 수 있다. 

 

 

 

오늘은 오픈레이어즈의 전반적인 부분에 대해서 알아보았다. 개인적으로 공부하는 것은 이렇게 큰 범위내에서 다가가며 이것저것 정보 아는 느낌으로 할 거고 프로젝트 진행할 때는 당장 대면한 문제부터 해결해야할 것이다. 좌표계를 변환하는 과정이 너무 어렵다ㅠ