안녕하세요. 코딩도치 입니다~
오늘은 OpenLayers 라이브러리를 이용해서 웹 페이지에 지도(map)를 띄우는 작업을 해보려고 합니다!
우선은 별다른 작업 없이 쉽게 사용 가능한 OpenStreetMap 지도를 이용하겠습니다.
(다음에는 외부에서 제공하는 별도의 지도서비스(VWorld)를 이용하는 방법을 알려드리겠습니다~)
(좌, 우 를 클릭해 보세요!)
위와 같이 지도를 띄우고 간단하게 컨트롤하는 것 까지 해보도록 하겠습니다.
1. OpenLayers 라이브러리 다운로드
OpenLayers는 오픈소스로 지금도 계속해서 활발하게 업그레이드되고 있습니다.
가장 최신 버전은 6.1.x 버전이지만, 저는 좀 더 안정적인 5.3.0 버전을 사용하도록 하겠습니다.
먼저 html 파일을 하나 만들어 주세요.(저는 main.html이라는 파일을 만들어 보겠습니다.)
|
1
2
3
4
|
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
</head>
|
각각의 url로 인터넷을 통해 직접 들어가게 되면 해당 라이브러리 소스가 나오게 됩니다.
그 소스들을 전부 복사, 붙여 넣기 하여 직접 파일을 만들어주면 됩니다.
저는 다음과 같이 디렉토리를 구성하고, 라이브러리 소스 파일을 만들어 주었습니다.
그리고 head부분에는 제 라이브러리 경로에 맞게 설정해 주었습니다.
|
1
2
3
4
|
2. 소스코드 작성
|
1
2
3
4
5
6
7
8
|
<body>
<div id="map" class="map"></div> <!-- 지도 표시 영역-->
<div>
지도 회전
<button type="button" onclick="Javascript:viewRotation('left')">좌</button>
<button type="button" onclick="Javascript:viewRotation('right')">우</button>
</div>
</body>
|
먼저 지도를 표시해 줄 영역을 정해줍니다.
OpenLayers에서 지도 객체를 만들 때 지도 영역의 id값을 사용하기 때문에,
class는 상관없지만 id는 꼭 설정해 주세요!
버튼 클릭을 통한 지도 회전을 보여드릴 것이므로 버튼도 추가해주었습니다.
(버튼을 클릭하면 onclick에 적혀 있는 함수가 실행되게 됩니다.)
지도 표시 영역 사이즈를 임의적으로 설정해주기 위해서 map.css 파일을 만들어 추가하도록 하겠습니다.
또한 지도 관련 javascript를 작성할 map.js 파일도 추가하였습니다.
전체 소스는 다음과 같습니다.
- main.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="./css/ol/ol.css" type="text/css">
<link rel="stylesheet" href="./css/map.css" type="text/css">
<script src="./js/ol/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div> <!-- 지도 표시 영역-->
<div>
지도 회전
<button type="button" onclick="Javascript:viewRotation('left')">좌</button>
<button type="button" onclick="Javascript:viewRotation('right')">우</button>
</div>
<script src="./js/map.js"></script>
</body>
</html>
|
새로 만든 map.css와 map.js를 html 코드에 추가해주었습니다.
- map.css
|
1
2
3
4
|
.map {
height: 400px;
width: 100%;
}
|
- map.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
/* 지도(Map) 생성 부분 */
var map = new ol.Map({
target: 'map', // 지도영역 div의 id 입력
layers: [
new ol.layer.Tile({
source: new ol.source.OSM() // Open Street Map
})
],
view: new ol.View({ // 지도의 어느 부분을 보여줄 것인지 설정
center: ol.proj.fromLonLat([127.00169, 37.56421]), // 중심좌표 지도에 맞는 좌표계로 변환
zoom: 6,
enableRotation: false
})
});
/* 지도(Map) 회전 함수 */
function viewRotation(direction){
var view = map.getView();
var rotation = view.getRotation();
if(direction == 'left'){
view.setRotation(rotation - (Math.PI/6));
// Math는 JavaScript 내장 객체로 여러가지 수학적 상수와 함수를 포함하고 있습니다.
// Math.PI - 원주율
}else{
view.setRotation(rotation + (Math.PI/6));
}
}
|
OpenLayers 라이브러리가 제공하는 Map 객체 생성자(ol.Map)를 이용하여 map을 만드는 방법입니다.
Map 객체에는 여러가지 옵션들이 있습니다.
target은 해당 지도를 표시할 영역의 id값을 입력합니다.
layers는 해당 객체가 포함하는 표시하고자 하는 내용이 담기는 부분입니다.
결국 지도는 layer의 형태로 map객체에 담겨 있는 것이죠.
배열로 한 객체에 여러 가지 layer를 담을 수 있기 때문에, 여러 개의 맵을 담는 것도 가능하겠죠?
위에서는 OpenLayers에서 객체로서 제공하는 OpenStreetMap을 layer로 담았습니다.
view는 보여주고자 하는 레이어의 어느 부분을 보여줄 것인가를 설정하는 부분입니다.
center옵션을 통해 지도의 중심 좌표를 설정하게 되면
지도가 화면에 표시될 때 설정한 중심좌표를 기준으로 영역이 표시됩니다.
OpenStreetMap은 전 세계 지도입니다. 저는 우리나라를 표시하기 위해서 서울의 좌표를 설정해 주었습니다.
지도를 회전시키는 함수에 대해서 알아보겠습니다.
결국 map이라는 것은 객체 이기 때문에, 해당 객체에 포함된 여러 속성들을 가져올 수 있습니다.
OpenLayers에서는 객체의 속성을 반환해주기 위한 함수들을 제공합니다.
그 외에도 다양한 함수들이 객체에 포함되어 있는데, 이것들은 아래 사이트에서 객체마다 확인이 가능합니다.
https://openlayers.org/en/v5.3.0/apidoc/
OpenLayers v5.3.0 API - Index
openlayers.org
지도의 회전 값의 경우 view 객체가 가지고 있습니다.
그래서 getView 함수를 통해 map객체의 view속성 값을 가져왔습니다.
가져온 view에서 getRotation 함수를 이용하여 현재 map의 회전 값을 가져왔습니다.
이렇게 얻어온 회전 값을 이용하여 경우에 따라 setRotation을 이용하여 값을 변경해 준다면,
지도를 회전시키는 컨트롤을 할 수 있는 것입니다.
이렇게 OpenLayers를 이용하여 화면에 지도(map) 띄우는 방법과 지도 컨트롤 방법에 대해서 알아보았습니다.
잘 따라오셨나요?
그냥 복사 붙여 넣기 하셔서 눈으로만 보지 마시고,
귀찮으시더라도 차근차근 따라 하시면서 직접 코드를 작성해 보시는 것을 추천합니다.
코딩은 하면 할수록 느는 것이니까요!
( map객체를 생성할 때 view의 옵션을 보시면 enableRotation: false 라는 옵션을 볼 수 있습니다.
사실 OpenLayers에서 제공하는 OSM의 경우
기본적으로 지도 위에서 (Alt + Shift + 드래그) 를 통해 지도를 회전시킬 수 있습니다.
제가 해당 예제를 보여드리기 위해 임의적으로 회전을 못하도록 설정을 추가해 준 것입니다~
enableRotation 옵션을 지우시거나 true로 바꾸고 회전이 잘 되는지도 테스트 해보시기 바랍니다! )
감사합니다.
'프로그래밍 > OpenLayers' 카테고리의 다른 글
| 1. [OpenLayers] OpenLayers란? - 코딩도치 (0) | 2019.11.13 |
|---|