openlayers

[Openlayers5] 1.시작하기

Be direct 2023. 3. 27. 00:45
반응형

#1 Openlayers란?

OpenLayers 5는 JavaScript로 작성된 오픈 소스 지도 라이브러리로, 사용자 정의 가능한 지도를 만들고

상호 작용할 수 있습니다.

 

#2 배경지도란?

지도 위에 표시되는 지형지물, 도로망, 수치지도 등의 기본 레이어를 말합니다.

배경지도는 일반적으로 지도를 처음 접하는 사용자에게 지도의 위치와 규모를 파악하기 쉽도록 제공되며,

보조적으로 다양한 정보를 제공하기도 합니다.

예를 들어 다음지도, 네이버지도, 구글지도, OSM지도 등을 예로 들 수 있습니다.

 

#3 준비하기

가장 처음 시작을 하려면 Openlayers를 다운로드하여야 합니다.

Openlayers 5.3.3

https://github.com/openlayers/openlayers/releases/download/v5.3.3/v5.3.3-dist.zip

 

위 링크를 통해 Openlayers를 다운로드 받습니다.

 

#4 시작하기

<!DOCTYPE html>
<html>
  <head>
    <!-- OpenLayers 5 라이브러리 추가 -->
    <script src="../js/openlayers/v5.3.3-dist/ol.js"></script>
    <link rel="stylesheet" href="../js/openlayers/v5.3.3-dist/ol.css" type="text/css">
    <style>
      /* 지도를 표시할 div 요소의 스타일 설정 */
      #map {
        width: 100%;
        height: 400px;
      }
    </style>
	<script>
    	var mainMap = null;
		window.onload = function() {
			// EPSG:3857 좌표계 정의
			var proj3857 = new ol.proj.Projection({
				code: 'EPSG:3857',
				extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
				units: 'm'
			});

			// 맵 객체 생성
			mainMap = new ol.Map({
				// 지도가 표시될 div 요소의 id 설정
				target: 'map',
				// 레이어 추가
				layers: [
					// 타일 레이어 추가 (OpenStreetMap 사용)
					new ol.layer.Tile({
					source: new ol.source.OSM()
					})
				],
				// 뷰 설정
				view: new ol.View({
					// 중심 좌표 설정 (위도, 경도)
					center: ol.proj.transform([126, 37], 'EPSG:4326', 'EPSG:3857'),
					// 줌 레벨 설정 (1~20 사이의 정수)
					zoom: 8,
					// 좌표계 설정
					projection: proj3857
				})
			});
		}
    </script>
  </head>
  <body>
    <!-- 지도를 표시할 div 요소 추가 -->
    <div id="map" class="map"></div>
  </body>
</html>

#5 소스 설명

<!-- OpenLayers 5 라이브러리 추가 -->
<script src="../js/openlayers/v5.3.3-dist/ol.js"></script>
<link rel="stylesheet" href="../js/openlayers/v5.3.3-dist/ol.css" type="text/css">

Openlayers 라이브러리를 HTML 파일에 추가합니다.

 

/* 지도를 표시할 div 요소의 스타일 설정 */
#map {
    width: 100%;
    height: 400px;
}

지도를 표시할 div 요소의 스타일을 설정합니다.

 

// EPSG:3857 좌표계 정의
var proj3857 = new ol.proj.Projection({
    code: 'EPSG:3857',
    extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
    units: 'm'
});

extent는 좌표계의 범위를 나타내는 속성입니다.

이 값은 해당 좌표계가 다루는 지역의 경계를 정의하며, 좌표값이 이 범위를 벗어나면 지도상에 표시되지 않습니다.

 

EPSG:3857 좌표계는 메르카토르 도법(Mercator projection)을 기반으로 하며,

전 세계를 대상으로 하기 때문에 extent 값으로 전 세계의 범위를 나타내는

[-20037508.34, -20037508.34, 20037508.34, 20037508.34]을 설정합니다.

 

이 범위는 단위가 미터(m)로 되어 있으므로, 지도를 표시할 때 좌표값도 이에 맞게 변환됩니다.

따라서 위 코드에서 EPSG:3857 좌표계를 사용할 때는 이 범위를 설정해주어야 합니다.

 

// 맵 객체 생성
mainMap = new ol.Map({
    // 지도가 표시될 div 요소의 id 설정
    target: 'map',
    // 레이어 추가
    layers: [
        // 타일 레이어 추가 (OpenStreetMap 사용)
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    // 뷰 설정
    view: new ol.View({
        // 중심 좌표 설정 (위도, 경도)
        center: ol.proj.transform([126, 37], 'EPSG:4326', 'EPSG:3857'),
        // 줌 레벨 설정 (1~20 사이의 정수)
        zoom: 8,
        // 좌표계 설정
        projection: proj3857
    })
});

맵 객체 생성

  • 맵 객체를 생성하고, 이 맵 객체에 레이어를 추가하고, 뷰를 설정합니다.

 

타일 레이어 추가 (OpenStreetMap 사용)

  • 타일 레이어를 추가합니다. 이때, OpenStreetMap의 타일을 사용합니다.

 

뷰 설정

  • 뷰 설정을 위해 새로운 ol.View 객체를 생성합니다.
  • 지도를 보는 관점(시점)을 설정하는 데 사용되는 객체입니다. ol.View 클래스를 사용하여 생성됩니다.
  • 지도 중심은 center 속성에 배열 형태의 좌표값을 설정합니다.
  • 줌 레벨은 zoom 속성에 정수값으로 설정합니다.
  • projection 속성은 보이는 좌표계를 설정합니다.
  • 위 코드에서는 지도의 중심 좌표를 [126, 37]로 설정하였고, 이 좌표값은 EPSG:4326 좌표계에서
    EPSG:3857 좌표계로 변환되어 지도에 표시됩니다.
    또한, 줌 레벨은 8로 설정되어 있습니다.
    따라서 지도의 초기 화면은 대략 서울과 경기도의 지역을 보여줄 것입니다.

 

2023.09.05 - [openlayers] - [Openlayers5] 2.배경지도 변경 버튼 추가하기

반응형