기본 콘텐츠로 건너뛰기

OpenLayers | 1. 오픈레이어스(OpenLayers) 소개 및 기초

OpenLayers | 1. 오픈레이어스(OpenLayers) 소개 및 기초

웹, 모바일웹 자바스크립트(Javascript) 지도(Map) 오픈소스 라이브러리



웹(Web), 모바일 웹(Mobile Web)에서 지도를 사용하는 방법은 두가지 방법이 있다.

1. 구글, 네이버, 카카오(다음)에서 제공하는 지도 API를 사용하는 방법

2. 오픈레이어스(OpenLayrs), 리플릿(Leaflet) 등 과 같은 JavaSciprt 라이브러리를 사용하는 방법


마커(위치표시) 등과 같은 간단한 기능을 사용하는 것이면

1번 방법을 추천한다.


하지만, 고급 지도 기능이 필요할 경우

2번 방법을 택해야 한다.


리플릿(Leaflet) : 가벼운 라이브러리, 기능 적음

오픈레이어스(OpenLayrs) : 비교적 무거운 라이브러리, 기능 많음, 참고할 예제 많음


필자는 지도 개발시 오픈레이어스(OpenLayers)를 사용중이다.

현재 6버전까지 나와 있으며,

5버전부터는 EA6문법으로 개발을 해야한다.

(4버전으로 설명하겠다.)


https://openlayers.org/


1. 예제 소스(Example Source)

1. 맵(Map) 생성

지도의 기본이 되는 ol.Map 객체 생성
기본적으로 layers, target, view 옵션이 있고,
나머지 옵션은 아래 url을 참고한다.
- layers : 지도에 표시할 각종 레이어 리스트를 설정
- target : 지도를 생성할 html document id
- view : 지도의 위치, 줌레벨 등 설정
https://openlayers.org/en/v4.6.5/apidoc/ol.Map.html


2. 레이어(Layer) 추가

배경지도 레이어, WMS 레이어 ,WFS 레이어 , 타일레이어 등 각종 레이어를
ol.Map 객체에 추가할 수 있다.
ol.Map 객체 생성시 옵션으로 추가할 수 도 있지만,
ol.Map 객체 생성 이후, map.addLayer(layer) 함수를 이용하여 추가할 수 있다.
지도 개발시 여러 레이어를 추가하고, visible을 설정하여 시각화 여부를 세팅한다.
https://openlayers.org/en/v4.6.5/apidoc/ol.layer.html


3. 뷰(View) 설정

뷰를 지도의 위치를 설정한다.
ol.Map 객체 생성시 옵션으로 설정할 수도 있고,
map.getView()로 ol.View 객체를 가져와 위치를 설정할 수 있다.
좌표계 등과 같은 자세한 내용은 다음에 다루겠다.
https://openlayers.org/en/v4.6.5/apidoc/ol.View.html


<html>
<head>
 
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
    <!-- openlayers -->
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
 
    <style>
        .map {
            width: 100%;
            height:400px;
        }
    </style>
 
    <script>
    
        // dom ready
        $(document).ready(function() {
            init();
        });
    
        function init() {
        
            // map 생성
            var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()     // OpenStreetMap 레이어
                    })
                ],
                target: 'map',                          // Map 생성할 div id
                view: new ol.View({
                    center: [54200000, 4300000],        // 초기 지도 위치 좌표
                    zoom: 6                             // 초기 지도 위치 줌레벨
                })
            });
            
            // 레이어 추가
            /*
            var osmLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });
            map.addLayer(osmLayer);
            */
 
        }
    
    </script>
 
</head>
<body>
    <div id="map" class="map"></div>
</body>
</html>



2. 결과(Result)

데스크탑 웹 브라우저, 모바일 웹 브라우저, 모바일 앱 웹뷰(Webview)에서
아래와 같이 지도가 생성 됨.




Tags :

댓글

댓글 쓰기