Open Street Map 🔗

OSM이란, 전세계 지도 종사자들이 자율적으로 관리하는 세계지도다. 즉, 지도 분야의 오픈 소스라고 생각하면 이해하기 쉽다. 각 국의 기여자들이 지도를 관리하고 있으며, 각 국가의 영역은 해당하는 국가의 언어로 표시된다. 전세계를 대상으로 하는 서비스에도 무리없이 적용 가능하다는 장점이 있다. 단, 한국 기준으로 지도의 퀄리티가 그리 뛰어나진 않다.

OpenLayers는 라이브러리 단계에서 OSM을 기본 제공한다. 즉, 별다른 API 호출이나 설정 없이 간단한 코드 몇 줄 만으로도 웹 상에 세계지도를 띄울 수 있다.

이 장에서는 OpenLayers6를 활용하여 웹 상에 OSM을 띄우는 매우 기초적인 방법에 대해 다룬다.

웹 사이트에 OSM 띄우기 🔗

1. OpenLayers 구조 상기하기 🔗

일전에 언급했었지만, 혹시 모르니 다시 한 번 OpenLayers의 구조에 대해 짚고 넘어가자.

• Feature: 점, 선, 면과 같은 요소 (벡터 레이어 한정)
• Source: 레이이의 데이터 원천. Feature의 모음과 같다. (SHP, GeoJSON 등)
• Layer: 데이터 원천을 토대로 정의한 데이터셋 (벡터, 이미지)
• View: 사용자가 현재 맵을 바라보는 방식의 정보
• Interaction: 맵의 상호작용 요소 (Zoom in, out 버튼 등)
• Overlay: 맵에 표시할 요소

이 장에서는 OSM 하나만 있으면 되므로, 필요한 요소는 아래와 같다.

• Source: OSM의 소스
• Layer: OSM의 소스로 정의된 OSM 레이어
• View: 뷰 정보

나머지 요소는 사용하지 않거나, 기본값을 사용한다.

2. OSM Source 만들기 🔗

OSM 데이터를 관리하는 OSM Source 객체를 생성하자.

0
import OSM from 'ol/source/OSM';
1

2
// 기본
3
const source = new OSM();
4

5
// 옵션 적용
6
const source = new OSM({ attributions: '<p>Developed by <a href="https://itcode.dev" target="_blank">RWB</a></p>', cacheSize: 0 });

OSM Source는 OSM을 통해 생성할 수 있다. 파라미터로 객체 형태의 옵션을 받는다.

그 외 사용할 수 있는 옵션과 메서드의 종류는 ol/source/OSM에서 확인하자.

3. Layer 만들기 🔗

OSM Source를 담을 Layer 객체를 생성한다. 이 Layer는 할당된 OSM Source를 통해 OSM 지도를 표출해줄 것이다.

0
import TileLayer from 'ol/layer/Tile';
1
import OSM from 'ol/source/OSM';
2

3
const source = new OSM({ attributions: '<p>Developed by <a href="https://itcode.dev" target="_blank">RWB</a></p>', cacheSize: 0 });
4

5
const layer = new TileLayer({
6
    source: source,
7
    properties: { name: 'base-osm' },
8
    zIndex: 1,
9
    preload: Infinity
10
});

TileLayer 객체를 통해 타일 레이어를 생성할 수 있다.

옵션의 source는 필수 옵션으로, 이 옵션을 비우면 레이어에 아무 것도 뜨지 않아 레이어의 의미가 없다.

properties는 레이어의 임의의 속성을 지정할 수 있다. 위 처럼 레이어의 고유 식별자를 할당해주면, 레이어를 관리하는 데 도움이 된다. Map 객체에서 레이어를 뽑아낼 때, 고유 식별자가 없으면 곤란하기 때문.

그 외 사용할 수 있는 옵션과 메서드의 종류는 ol/layer/Tile에서 확인하자.

왜 하필 타일맵이야?
배경지도의 경우, 빠른 서비스를 위해 지도를 줌 레벨별로 미리 잘라서 정적 이미지 형태로 관리한다. 때문에 통짜 이미지로 관리하는 것보다, 일정 규격으로 지도를 잘라서 관리하는 것이 관리나 효율성 측면에서도 훨씬 이득이다. 그 큰 지도를 자르지 않고 통짜로 보관하게 되면, 그 이미지 용량은 브라우저가 감당할만한 수준이 아니다.

실제로 필자가 전 직장에서 맵 타일링을 한 적이 있는데, 1 ~ 14레벨까지의 용량은 테라 단위를 가진다. 때문에 잘게 쪼개서 현재 사용자가 보고 있는 범위만 호출하는 게 이득이다.

4. View 만들기 🔗

지도의 뷰잉 정보를 선언할 View 객체를 생성한다.

0
import View from 'ol/View';
1

2
const view = new View({
3
    projection: 'EPSG:3857',
4
    center: [ 14135490.777017945, 4518386.883679577 ],
5
    zoom: 17
6
});

[ 14135490.777017945, 4518386.883679577 ]은 EPSG:3857으로 표기한 서울시청 좌표다.

View 객체를 통해, 지도의 뷰잉 정보를 선언할 수 있다.

smoothResolutionConstraint 옵션은, 예를 들어 지도의 크기가 width: 120px, height: 80px이라고 가정하자. 기본값 false라면, 지도는 최대 80px까지 확대가 가능하다.

그러나 true라면, 지도는 최대 120px까지 확대가 가능해진다. 즉, 지도의 확대 기준을 가장 짧은 길이로 할지, 긴 길이로 할지 지정하는 것.

5. Map 만들기 🔗

모든 정보를 종합하여 지도를 만드는 Map 객체를 생성한다.

0
import Map from 'ol/Map';
1
import View from 'ol/View';
2
import TileLayer from 'ol/layer/Tile';
3
import OSM from 'ol/source/OSM';
4

5
const source = new OSM({ attributions: '<p>Developed by <a href="https://itcode.dev" target="_blank">RWB</a></p>', cacheSize: 0 });
6

7
const layer = new TileLayer({
8
    source: source,
9
    properties: { name: 'base-osm' },
10
    zIndex: 1,
11
    preload: Infinity
12
});
13

14
const view = new View({
15
    projection: 'EPSG:3857',
16
    center: [ 14135490.777017945, 4518386.883679577 ],
17
    zoom: 17
18
});
19

20
const map = new Map({
21
    layers: [ layer ],
22
    target: 'map',
23
    view: view
24
});

Map 객체에 지금까지 선언한 객체들을 할당한다. target에 지정된 DOM에 선언된 지도가 표시된다.

target: map은 아이디가 map인 DOM에 지도를 표시한다는 뜻이다. 꼭 아이디가 아니더라도 HTMLElement를 할당할 수도 있다.

예제 확인하기 🔗

OpenLayers6 Sandbox - OSM에서 이를 구현한 예제를 확인할 수 있다.

단순 OSM 지도를 띄워놓은 페이지므로, 지도 뷰잉 외엔 딱히 상호작용할 요소는 없다.

OSM의 생김새와 국내에 서비스되는 지도의 차이를 비교하는 것도 좋을 것이다.

국내 한정으로 건물 정보가 누락된 곳이 많으며, 대중교통의 표시 또한 굉장히 부실하다. 국내 한정 서비스로는 메리트가 없는 이유.