[ Openlayers ] 1 - OSM 지도 그리기

Openlayers를 사용하는 방법에 대해 정리 해 보고자 한다.
아직 미완성이긴 하지만 gif 처럼, 지도를 그리고 그 위에 이미지를 올려 길을 따라 움직이게 하는 것이 최종 목표이다.

openlayers 움직이는 아이콘 이미지

 

 

이번 포스팅에서는 가장 기초가 되는 지도를 출력하는 방법에 대해 정리해보고자 한다.

지도 위에 이미지를 바로 그리고 싶거나, 이벤트 등록을 하고 싶다면, 아래 링크를 참고하자.

https://marklee1117.tistory.com/128

[Openlayers] 3 - 지도 위에 아이콘(custom marker) 출력

https://marklee1117.tistory.com/125

[Openlayers] 2 - 지도 클릭 이벤트로 좌표 출력

준비물

• openlayers - v 7.3.0
• vue3 - ^3.2.13

그냥 단순한 HTML, JS로도 작업이 가능하지만, 나는 사내에서 vue3를 사용하고 있기에, vue3를 사용하기로 결정했다.
vue3가 아닌 다른 프레임워크를 사용해도 아래 내용은 동일하니, 천천히 살펴보자.

 

지도 생성

1. vue project 생성

우선, vue3 project를 만들어 줬다.

다른 프레임워크를 쓴다면 해당 프레임워크, 혹은 HTML로 만들어 주면 된다.

vue create ol-map-example

 

2. openlayers 설치

당연히, 가장 중요한 openlayer를 설치 해 준다. 나는 npm을 이용했다.(npm 링크)

npm i ol

 

3.  Map 생성

이제 진짜 준비는 끝났다. 

바로 코드를 통해 이해 해보자. 

 

 

먼저 vue 컴포넌트를 만들어주자. 나의 경우 그냥 TestPage.vue 로 만들었다.

그리고 아래처럼 코드를 작성 해 준다. (자세한 설명은 아래를 참고하자.)

<template>
    <div class="map__wrapper">
        <p>OSM MAP PAGE</p>
        // 1. 지도 렌더 타겟 div 선언
        <div class="map" ref="map"></div>
    </div>
</template>

<script>
import OlLayerTile from 'ol/layer/Tile.js'
import OlView from 'ol/View.js'
import OlMap from 'ol/Map.js'
import OSM from 'ol/source/OSM'
import { fromLonLat } from 'ol/proj.js'

import { ref, onMounted } from 'vue'

export default {
	name: 'TestPage',

	setup() {
        // 2. target element 변수에 담기
        const map = ref(null);
        // 3. Map 객체 담을 변수 선언
        let olMap;
        // 4. 지도 중심좌표
        const center = fromLonLat([126.9251405697578, 37.53033241217628])
        // 5. OlMap 객체 생성 및 타겟 엘리먼트에 부착
        onMounted(() => {
            olMap = new OlMap({
                target: map.value,
                layers: [new OlLayerTile({ source: new OSM() })],
                view: new OlView({
                    center: center, // 여의도 좌표
                    zoom: 17,
                }),
            })
        })
        // 6. onMounted에서 접근하기 위해 return
        return { map }
	},
}
</script>

<style scoped>
// 7. map 클래스에 넓이 height 상속하기 위함.
.map__wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
// 8. 지도 넓이와 높이 설정(필수!)
.map {
	width: 100%;
	height: 100%;
}
</style>

 

3-1. 지도 렌더 타겟 element 선언

나의 경우 vue3를 이용하기에, ref="map"을 이용하여 선언하여 주었다.
또한 지도 스타일 적용을 위한 클래스 또한 class="map"으로 선언 하였다.

만약, react라면 똑같이 ref를 쓸 수 있을 것이고, 순수 HTML을 사용한다면 그냥 div를 선언 한 뒤, Document.queryselector()로 잡아도 될 것이다.

 

3-2. target element 변수에 담기

map을 렌더 할 타겟 DOM 요소를 선언 및 할당 해 준다.

Vue3에서 DOM에 접근하기 위해 사용하는  ref를 이용하는 문법이다. (vue3문법 참고 링크)

HTML이라면 여기서 Document.queryselector('.map') 형식으로 하면 될 것이다.

 

3-3. Map 객체를 담을 변수 선언

이 부분은 나중에 애니메이션 효과를 넣기 위함인데, 우선은 따라하고 추후 애니메이션 부분에서 설명하겠다.

 

3-4. 지도 중심좌표

내가 보고 싶은 지도의 중심좌표를 설정한다. 나의 경우, 여의도를 중심으로 보고 싶었기에 위 좌표를 사용했다.

지도에서 원하는 좌표를 알고 싶다면 ESPG 페이지 에서 알아보자.

주의할 점은 openlayers는 항상 [경도, 위도] 순서로 입력받고 입력한다는 것 이다. 꼭 주의하자!

 

그럼 fromLonLat() 함수는 무엇일까?

우리가 지금 그리려고 하는 OSM은 기본적으로 ESPG:3857 좌표계를 사용한다. (Openlayers 좌표계 정리 포스트)

하지만, 우리가 익히 알고 있는 위도 경도 좌표의 경우 ESPG:4326 좌표계에서의 표기 방식이다.

즉 위도 경도로 표기한 좌표를 ESPG:4326의 좌표계로 변환해주는 과정이 필요 하다는 것이고, 그 역할을 fromLonLat이 해준다.

 

 

3-5. OlMap 객체 생성 및 타겟 엘리멘트에 부착

OlMap 객체를 생성 하고, 타겟으로 ref="map"으로 가져온 DOM Element을 설정한다.

Layers 옵션에는 Map객체 위에 올릴 각종 layers 객체들을 넣어 줄 수 있는데, 현재에는 OSM 타일 레이어만 올려준다.

OlView 옵션에는 2D맵을 보여주는 View객체를 넣어준다. 여기에서 center, zoom-level, 좌표계 등을 설정하게 된다.

 

3-6. map 리턴

vue의 onMounted 메소드에서 map 변수에 접근하기 위해, setup 함수에서 map을 리턴 해 준다. 

 

3-7. 지도 스타일 설정

어떻게 보면 가장 중요하다. 지도를 표시할 DOM요소가 높이가 0이라면 당연히 아무것도 출력이 안된다. 

width: 100%, height:100%로 해주자. 
너무 기본적이긴 하지만, html, body에서 height: 100vh로 설정해줘야 100%가 먹힐 것이다.

 

 

자, 이제 우리가 만든 컴포넌트를 Vue에서 렌더하면 아래와 같은 지도를 볼 수 있을 것이다.

 

하지만 우측 상단에 보면 못생긴 버튼들과 저작권 표시를 볼 수 있을 것이다. 이는 아래처럼 controls를 추가함으로써 제거 할 수 있다.

...
import { defaults } from 'ol/control.js'
...


onMounted(() => {
    olMap = new OlMap({
        target: map.value,
        // controls 부분을 추가 해 주자.
        controls: defaults({
            attribution: false,
            zoom: false,
            rotate: false,
        }),
        layers: [new OlLayerTile({ source: new OSM() })],
        view: new OlView({
            center: center, // 여의도 좌표
            zoom: 17,
        }),
    })
})

 

그럼 이제 못생긴 버튼들이 사라지고 아래처럼 지도만 출력되게 될 것이다.

openlayers 지도 화면

 

여기까지 지도를 출력하는 방법에 대해 간단히 알아봤고, 
다음 포스트에서는 지도를 클릭 했을 때, 해당 지점의 좌표를 출력하는 방법에 대해 정리 해 볼 예정이다.