merci 프로젝트의 목적에서도 한번 언급했지만 merci 프로젝트의 핵심 기능 중 하나는 공간정보 기술이다. 여기서는 공간정보 기술의 기초라고도 할 수 있는 지도 띄우기에 대해서 다루어보려고 한다.
kakao map, vworld 등 지도 편의 기능을 제공해주는 많은 서비스들이 있지만 이 프로젝트에서는 특별히 openlayers만을 사용하기로 결정했다. openlayers를 선정한 배경에는 회사에서 이미 openlayers를 이용한 프로젝트를 개발해본 경험이 있어 익숙하다는 요인이 가장 크게 작용했다. 물론 회사에서 진행한 프로젝트는 vworld + openlayers 기반의 프로젝트로 vworld와 openlayers 모두를 사용했지만 현 merci project의 취지상 openlayers만으로도 충분히 개발 가능하다고 판단하여 openlayers만을 선택했다. 또한 구글링에 의해 카카오나 구글 지도는 일정량 이상의 트래픽 사용시 유료가 되는 단점이 존재한다는 사실을 알게 되었는데 이 점도 지도 서비스를 선택하는데 영향을 주었다.
지도를 띄우기 위해서는 먼저 openlayers 패키지를 다운로드 받아야한다.
openlayers 사이트(https://openlayers.org/download/)에 들어가 패키지를 다운로드 받아준다.
(현재 기준 v7.5.1-package.zip 다운로드)
다운로드가 끝나면 해당 패키지를 프로젝트 내부 경로에 넣어준다. (merci에서는 resources > static > js폴더 내에 ol 패키지를 넣어주었습니다.)
패키지 내에 파일들이 많으나 이들 중에서 ol.css, ol.js 파일을 찾아 추가해준다.
[*layout.html]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8">
<title>merci</title>
...
<link rel="stylesheet" th:href="@{/js/ol/ol.css}">
<script th:src="@{/js/ol/dist/ol.js}"></script>
...
</head>
<th:block layout:fragment="script"></th:block>
</html>이제 openlayers 관련 임포트가 끝났으니 자바스크립트를 이용해 지도를 생성해준다.
자바스크립트 작업에 들어가기 전에 우선 지도가 표출될 수 있도록 div 엘리먼트 하나를 만들어줘야 된다.
[* gis.html]
<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<head>
<link rel="stylesheet" th:href="@{/css/gis.css}">
<link rel="stylesheet" href="../../static/css/style.css">
</head>
<body>
<th:block th:include="common/header"></th:block>
<th:block th:include="common/sidebar"></th:block>
<section class="content">
<div id="vMap"></div> <!--엘리먼트 생성-->
<script th:src="@{/js/gis/gis.js}"></script>
</section>
</body>
</html>본 프로젝트에서는 'vMap'이라는 id로 div 엘리먼트를 만들어 주었다.
다음은 자바스크립트 작업이다.
[* gis.js]
$(() => {
var map = new ol.Map({
target: 'vMap', // div id가 vMap인 엘리먼트에 표출
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([127, 36]), // 맵 초기 렌더링시 기본 센터 위치
zoom: 7 // 확대 레벨
})
});
});다음과 같이 자바스크립트를 작성하였다.
이렇게 코드를 작성하면 처음 지도 렌더링시 대한민국을 기준으로 하여 지도가 렌더링된다.
마지막으로 css 작업을 해주어야한다. css 작업을 해주지 않으면 div의 크기가 지정되어 있지 않아 맵이 제대로 렌더링되지 않는다.
[* gis.css]
#vMap {
width: 100%;
height: calc(100vh - 6.1rem);
}이 프로젝트에서는 header가 존재하기 때문에 이를 고려해서 vMap div 엘리먼트의 크기를 지정해주었다.
이제 프로젝트를 실행시켜보면 화면에 지도가 표출되는걸 확인할 수 있다.
