Vue.js 지도 만들기 (feat.OpenLayers, vworld 공간정보)

강정우·2023년 6월 8일

vue.js

목록 보기

65/72

OpenLayers

OpenLayers는 오픈 소스 지리 정보 시각화 라이브러리이다.
참고로 OpenLayers는 JavaScript로 작성되어 있으며, HTML5의 Canvas 요소를 사용하여 지리 데이터를 렌더링하고 상호 작용할 수 있는 맵을 생성한다.
또한 OpenLayers는 다양한 지도 서비스와 데이터 소스와 통합할 수 있는데 OpenStreetMap, Bing Maps, Google Maps 등과 같은 인기 있는 지도 서비스뿐만 아니라 WMS(Web Map Service), WFS(Web Feature Service), GeoJSON, KML 등과 같은 다른 데이터 형식을 지원한다.
이를 통해 OpenLayers를 사용하여 여러 소스에서 지리 데이터를 가져와서 통합하고 시각화할 수 있다.
또 OpenLayers의 장점은 모바일 기기와 호환되도록 설계되었다는 것이다. 이는 반응형 디자인을 채택하고 터치 이벤트를 처리할 수 있는 기능을 제공하여 모바일 환경에서도 지리 정보를 시각화하고 상호 작용할 수 있는 장점이 있다.

Vue-OpenLayers

Vue-OpenLayers는 Vue.js 프레임워크에서 OpenLayers를 사용하기 위한 공식적인 라이브러리이며, OpenLayers의 기능과 컴포넌트를 Vue.js 애플리케이션에 통합하는 데 도움을 준다.
Vue-OpenLayers는 Vue.js와 OpenLayers 간의 상호 작용을 간편하게 처리하는 기능을 제공을 하는데 예를들어 Vue-OpenLayers 컴포넌트를 사용하면 Vue.js 애플리케이션에서 지도 컨테이너를 생성하고, 지리 데이터를 로드하고, 맵을 스타일링하고, 사용자 상호 작용을 처리하는 등의 작업을 수행할 수 있다.
Vue-OpenLayers는 Vue.js의 컴포넌트 기반 접근 방식을 따르므로 Vue 컴포넌트와 함께 자연스럽게 통합된다.
이를 통해 Vue.js 애플리케이션의 다른 컴포넌트와 상태 관리 도구(Vuex) 등과 함께 OpenLayers를 사용할 수 있다.
그럼 이제 사용법을 알아보도록 하자.

1. install

pnpm i vue3-openlayers

vue-openlayers를 검색하면 수많은 라이브러리들이 존재하는데 그중 가장 신빙성있고 최신화가 잘 되는 것은 vue3-onpenlyaers이다.
그리고 공식문서를 살펴보며 아래 코드를 봐보자.

2. import

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import OpenLayersMap from 'vue3-openlayers';
import 'vue3-openlayers/dist/vue3-openlayers.css';

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(OpenLayersMap);
app.mount('#app')

우선 공식문서에 나와있는 대로 2가지를 import하고 OpenLayersMap 객체를 app-widet하게 사용할 수 있도록 use 메서드를 사용하여 넣어준다.

3. 컴포넌트에서 사용

<template>
  <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height: 400px">
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
    />
    <ol-tile-layer>
      <ol-source-xyz :projection="projection" :url="selected" />
    </ol-tile-layer>
  </ol-map>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { fromLonLat } from 'ol/proj'

const projection = "EPSG:3857";
const center = ref(fromLonLat([126.9779228388393, 37.56643948208262], "EPSG:3857"));
const zoom = ref(15)
const rotation = ref(0)
const selected = ref(
  'http://api.vworld.kr/req/wmts/1.0.0/1204AD5E-CC9A-3C63-8F05-DA9763D84EC3/Base/{z}/{y}/{x}.png'
)
</script>

위 코드부분에서는 크게 3가지에 대해 설명하겠다.

1) ol의 구조

최상단 개발(개발자발)로 그려놓은 사진을 보면 어느정도 컴포넌트를 어떻게 중첩하여 작성해야하는지 알 수 있다.
<ol-map> : 기본적인 동작 옵션을 설정하고 map을 담을 container를 설정하는 부분이다.
즉, 지도 컨테이너를 생성하고 OpenLayers의 맵을 초기화하며 Vue-OpenLayers에서 제공하는 <ol-map> 컴포넌트를 사용하여 Vue 템플릿에 지도 컨테이너를 추가할 수 있도록 해준다.
<ol-view> : 사용자가 지도에서 설정하고 보는 기본적인 view에 대한 설정값을 부여하는 부분이다. 대표적으로 최초 로드시 중심이 될 값, 몇 단계 zoom에서 시작할 것인지 마지막으로 중요한 좌표계(projection)을 설정하는 부분이다. 또한 지도의 확대/축소, 이동 등의 동작을 제어하며, 현재 지도의 상태를 제공합니다.

참고로 default로 EPSG:3857 이다. 그리고 우리자 38.XXX, 127.XXX로 알고있는 흔히 사용하는 좌표계는 WGS 84라고도 알려진 EPSG:4326 좌표계이다.
<ol-tile-layer> : 이제 위 사진처럼 이 해당 layer에 tile과 여러 source들과 polygon 등을 그려넣는 곳이다.
즉, 이름 그대로 맵에 레이어를 추가하고 스타일링하는 데 사용된다. <ol-layer> 컴포넌트를 사용하여 Vue 템플릿에서 레이어를 추가할 수 있다.
<ol-source-선택> : 여기에 url을 통해 어떤 지도 tile을 가져올 것인지를 선택하는 곳이다.
참고로 source의 종류는 위와 같이 있으면 각각의 예제 코드를 보고싶으면 공식 홈페이지를 방문하면 된다.
물론 추가적으로 지도 위에 추가적인 요소(정보 창, 팝업, 마커 레이블 등)를 표시하는 데 사용되는 오버레이(Overlay) 컴포넌트와 사용자의 위치 정보를 획득하는 데 사용되는 ol-geolocation 컴포넌트도 존재한다.

2) tile 설명

기본적으로 tile(지도)를 제공하긴 하나 우리는 우리나라에서 제공하는 보다 한국 친화적인 지도를 tile로 깔고 싶다. 그래서 url로써 이를 제공할 것이다. 그리고 그 source는 공간정보 오픈 플랫폼에서 가져올 것이다.
그리고 해당 공식 문서에 맞춰 파라미터를 맞춰서 보내주면 된다. 이때 문제가 하나 생기는데 앞서 언급했듯 우리나라는 대부분 EPSG:4326를 사용하나 OpenLayers에서 제공하는 좌표계는 EPSG:3857인 것이다. 그래서 이를 자동으로 변환해주기위해 아래 메서드를 사용하면 된다.

3) 메서드 (feat.좌표계산)

아마 우리는 대부분의 기능을 vue3-openlayers library가 제공하는 "컴포넌트"만 사용하겠지만 몇몇 "메서드"들은 우리가 직접 갖다 써야할 수 있다.
즉, vue3-openlayers가 아닌 OpenLayers API 공식 홈페이지를 뒤져야한다는 것이다.
아래 사진은 공식홈페이지에서 뒤진 사용자가 주로 입력할 한국식(EPSG:4326) Longitude와 Latitude를 OpenLayers에서 사용하는 좌표계(EPSG:3857)로 바꾸어주는 함수이다.