티스토리 뷰

GIS

OpenLayers Map 띄우기

wldnjd2 2022. 4. 14. 14:58

 

Hosted builds for development

OpenLayers를 사용하기 위해 아래 코드를 추가해준다.

다운로드 필요없이 html 헤더에 추가해주면 된다.

 

- Version 6.14.1

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css">

 

- Version 3.20.1

 <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">

 

- 잘 모르겠다면 openlayers 사이트 예제를 참고하자.

https://openlayers.org/en/v3.20.1/examples/accessible.html

 

Accessible Map

Example of an accessible map. This page's map element has its tabindex attribute set to "0", that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the map element is focused the + and

openlayers.org

 

 

Map

OpenLayers의 핵심구성요소이다.

Map안에 target, layer, view, overlay등의 컨테이너 정보를 담을 수 있다.

- target: html의 div지도를 포함하는 웹페이지의 요소로 지도가 렌더링 된다.

- layer: 지도를 불러올 api 설정, source로 데이터를 가져온다.

- view: 지도가 렌더링 될때 중심 좌표값을 설정하고, 확대/축소와 같은 속성의 정의한다.

 

 

Source

ol.source.Source의 서브클래스를 이용해서 OSM이나 Bing Map등 무료 혹은 상업용 지도를 올릴 수 있다.

OGC표준인 WMS나 WMTS 및 GeoJSON, KML 같은 vector 데이터에도 사용된다.

(ol은 패키지..)

 

 

Layer

Layer는 데이터를 시각적으로 표현한 것을 말한다.

  • ol/layer/Tile- 특정 해상도에 대한 확대/축소 수준으로 구성된 그리드의 타일 이미지를 제공하는 소스를 렌더링합니다.
  • ol/layer/Image- 임의의 범위와 해상도에서 지도 이미지를 제공하는 소스를 렌더링합니다.
  • ol/layer/Vector- 벡터 데이터를 클라이언트 측에서 렌더링합니다.
  • ol/layer/VectorTile- 벡터 타일로 제공되는 데이터를 렌더링합니다.

 

 

Projection

projection은 좌표계이다.

좌표는 지도 어디에서나 존재한다. 

좌표계의 종류는 수없이 많다. OpenLayers는 EPSG:3857을 기본 좌표계로 사용한다. 

(EPSG란 다양한 좌표계의 코드.)

EPSG:3857은 EPSG:900913과 동일한것. 3857이 공식이고 900913은 통칭으로 사용된다.

공식명인 EPSG:3857을 사용하도록 하자.

google / 900913  -> 숫자가 철자로 이용되어짐

 

 

- [longitude, latitude]

  OpenLayers에서는 좌표의 순서가 [경도, 위도]로 구성되어있다. (동쪽보다 북쪽이 우선으로 정하였음)

- ol(패키지).proj(클래스).fromLonLat(메서드)를 이용해서 지도 위치를 지정할 수 있다.

- ol.geom.Point도 위와 같이 위경도를 지정해 지도 위치를 지정할 수 있다.

- transform 메서드로 좌표계를 변환할 수 있다.

  .transform('EPSG:4326', 'EPSG:3857') 

 

 

 Overlay

지도위에 표시되고 특정 위치에 첨부되는 요소이다. (팝업창)

오버레이는 보이는 위젯으로 컨트롤과 달리 화면의 고정된 위치에 있지 않지만 지리적으로 좌표에 연결되어 있으므로 지도를 이동하면 오버레이가 이동하지만 컨트롤은 이동하지 않는다.

import Overlay from 'ol/Overlay';

var popup = new Overlay({
  element: document.getElementById('popup')
});
popup.setPosition(coordinate);
map.addOverlay(popup);

 

 

OpenLayers를 이용한 간단한 지도 띄우기
<!doctype html>
<html lang="en">
  <head>
	<!--오픈레이어즈 버전 v6.14.1-->   
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <!--지도 크기-->
    <style>
      .map {
        height: 800px;
        width: 50%;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>OSM을 이용해서 지도 띄우기</h2>
    <div id="map" class="map"></div>  //id값 map
    <script type="text/javascript">
    var view = new ol.View({
        projection: 'EPSG:900913',  //좌표계 설정
        center: ol.proj.fromLonLat([127, 37]), //우리나라
        zoom: 10
      });
    //지도
    var map = new ol.Map({
        target: 'map',   //지도를 생성할 객체의 id 값
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view:view
    });
    </script>
  </body>
</html>

 

 

Full Screen 버튼

지도를 전체화면으로 볼 수 있다.

오른쪽 상단에 버튼이 만들어짐

var myFullScreenControl = new ol.control.FullScreen();
map.addControl(myFullScreenControl);

 

 

 

 

Ref.

https://openlayers.org/en/latest/doc/tutorials/concepts.html

 

OpenLayers - Basic Concepts

Basic Concepts Map The core component of OpenLayers is the map (ol/Map). It is rendered to a target container (e.g. a div element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter m

openlayers.org

 

저작자표시 비영리

'GIS' 카테고리의 다른 글

Geoserver에서 Layer style 적용해보기 (SLD파일)  (0) 2022.04.15
OGC API 문서 공부하기 (WFS, WMS)  (0) 2022.04.15
VWorld API (Feat. OSM)  (0) 2022.04.13
CentOS에서 Geoserver 설치하기  (0) 2022.04.08
OpenLayers에서 지도위에 레이어 추가하기  (0) 2022.04.08
댓글