안녕하세요. 씨엔스 입니다.
오늘은 GIS 개발에서 오픈소스로 사용되고 있는 Openlayers 에 대하여 간략하게 소개하고 설명해보려 합니다.
지도서비스를 개발하기 위해서 Kakao나 Naver의 지도 API를 사용하는 경우도 있지만 오픈소스로 이용할 수 있는 라이브러리가 바로 Openlayers 인데요.
PostgreSQL 과 Geoserver 를 이용하여 매우 다양하게 사용할 수 있는 장점이 있습니다.
OpenLayers - Welcome
A high-performance, feature-packed library for all your mapping needs.
openlayers.org
GIS 에 대해 자세히 설명하기 전에 기본 지식이 있다는 가정하에 글을 작성합니다.
우선 Openlayers 의 구조를 간단하게 설명해보도록 하겠습니다.
설명이 잘못되었거나 부족하다면 언제든 댓글 남겨주세요! 더 열심히 공부하겠습니다.
Openlayers에서 지도서비스가 나타나기 위해서는 Map이 핵심요소로 필요합니다.
Map은 지도화면에 배경지도(BingMaps, GoogleMap, Kakao, Naver, OSM, 브이월드) 또는 배경지도 위에 WMS/WFS 레이어를 표출하기 위해 필요한 필수 객체 입니다.
Map을 사용하여 지도를 화면에 표출하기 위해서는 Layer와 View, Interaction, Controls 와 같은 요소가 필요한데 각각을 설명하자면,
Layer는 배경지도 또는 레이어를 표출하기 위해 사용하는 객체입니다. 하나 이상의 레이어가 필요하여 Map에서 배열로 사용됩니다.
View는 해상도, 화면 레벨, 좌표 등 지도의 시각적 효과에 대한 변수들을 정의합니다.
Controls는 화면에 고정된 위치에 사용되는 버튼등에 이벤트를 적용하여 회전, 위치이동 등의 이벤트를 제공합니다.
Interaction은 마우스, 키보드 등의 이벤트로 효과를 제공합니다. (true, false)
설명만으로는 이해가 잘 안될 수 있어 Openlayer를 이용하여 지도 화면을 띄워보도록 하겠습니다.
|
1
2
3
|
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
|
cs |
먼저 Openlayers를 사용하기 위해 js 와 css를 추가해줍니다.
|
1
|
<div id="map" class="map" style="width: 600px; height: 50%;"></div>
|
cs |
그리고 body 안에 div 태그에서 지도 화면을 띄울 곳을 정합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [14206608.022807065, 4345508.083662013],
zoom: 6
})
});
</script>
|
cs |
Map 객체에 필요한 Layer와 View 객체를 추가하여 OSM기반의 배경지도를 화면에 표출하는 소스 입니다.
이렇게 하여 전체 소스를 정리하자면
|
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
28
29
30
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Openlayers-baseMap</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map" style="width: 600px; height: 50%;"></div>
<script>
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [14206608.022807065, 4345508.083662013],
zoom: 6
})
});
</script>
</body>
</html>
|
cs |
이런 식으로 HTML 소스를 작성하게 됩니다.
HTML파일을 저장하고 브라우저로 열면 화면이 나타나게 됩니다.
Map, Layer, View 객체를 이용하여 가장 간단하고 따라하기 쉬운 지도화면을 만들어 보았습니다.
Openlayers의 장점은 이처럼 간단하고 누구나 따라하여 사용할 수 있다는거같아요!
여기에 추가로 WMS나 WFS, Vector, Tile 등 다양한 Layer 객체를 배경지도 위에 올려 표현할 수 있고,
PostgreSQL등의 공간정보 사용이 가능한 데이터베이스와 Geoserver를 이용하여 많은 퍼포먼스를 낼 수 있는
Openlayers의 기능을 적어보려 합니다.
감사합니다!
'GIS > Openlayers' 카테고리의 다른 글
| [Openlayers] Vector Layer 와 Image Layer - 2 (0) | 2022.01.12 |
|---|---|
| [Openlayers] Vector Layer 와 Image Layer - 1 (0) | 2022.01.07 |