티스토리 뷰

Skill/OpenLayers

[OpenLayers] 사용법 기초1

진열사랑 2020. 9. 20. 21:01

출처 : jeaha.dev/4

 

OpenLayers를 사용해서 HTML상에 지도를 띄우는 방법.

1. OpenLayers JS 파일과 CSS파일을 Include 한다.

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">

선택 사항으로, 만약 지도가 IE나 안드로이드 v4 환경에서 보여지길 원한다면, OpenLayers script를 Include 하기전에 다음 파일을 Include해 준다.

<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

2. 지도가 들어갈 div를 만들어 준다. 

<div id="map" class="map"></div>

3. 화면에 보여질 지도의 크기를 CSS로 지정해 준다.

  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>

4. javascript로 지도를 띄워준다.

  let map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })
  });

이 부분은 <body> 안에 넣어야 한다. <head> 안에 넣으면 지도가 안보인다.

 

6. JS 코드 분석.

 - OpenLayers Map 객체를 불러 온다.

let map = new ol.Map({ ... });

 - 지도 객체를 <div>에 연결 하기 위한 설정이다. target의 인자로 <div>의 id값을 지정해 준다.

    target: 'map'

 - layers : [ ... ] 배열은 지도에 사용하는 레이어의 목록을 정의하는 리스트다. 
기본적으로 Tile 레이어를 사용한다.

    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ]

OpenLayers에서 레이어는 소스를 포함하는 유형(벡터, 이미지, 타일)으로 정의된다.

 - View는 지도가 보여줄 중심좌표, 축척, 회전을 지정할 수 있다. 
(기본적인 지도는 축척과 중심좌표만 설정한다)

    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })

---------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
  <style>
    .map {
      height: 800px;
      width: 100%;
      border: 1px solid #ccc;
    }
  </style>

  <title>MAP</title>
  

</head>
<body>
  <div id="map" class="map"></div>
  
  <script type="text/javascript">
    let map = new ol.Map({
	  target: 'map',
	  layers: [
	    new ol.layer.Tile({
	      source: new ol.source.OSM({
	        url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
	      })
	    })
	  ],
	  view: new ol.View({
	    center: ol.proj.fromLonLat([128.4, 35.7]),
	    zoom: 7
	  })
	});  
  </script>
</body>
</html>
저작자표시 비영리

'Skill > OpenLayers' 카테고리의 다른 글

[OpenLayers] ol.control  (0) 2020.09.22
[OpenLayers] 마우스로 도형 그리기  (0) 2020.09.20
[OpenLayers] 마우스 오버시 특정 구역 하이라이팅하기(with ol.interaction.select)  (0) 2020.09.20
[OpenLayers] OpenLayers3 와 VWORLD  (0) 2020.09.20
[OpenLayers] 개론  (0) 2020.09.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
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
글 보관함