[Openlayers] 오픈레이어스 간단한 지도띄우기

---

일단, 간단한 지도를 띄우는 예제를

 

사용해 보았다.

 

---

 

오픈레이어스 공식 홈페이지이다.

https://openlayers.org/

OpenLayers - Welcome

 

 

 

 

결과값

 

 

구현 결과이다.

 

 

 

 

<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">

 

이 두개의 코드는 오픈레이어스에서 API를 가져오겠다는 의미인것 같다.

 

그래서 선언해서 사용하는거 같다.

 

 

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

 

이건 내가 지도를 띄울때 필요한

 

사이즈를 설정해준 것이고

 

 

<!-- html안에 Map이 보여질 div 요소를 생성해주고 id 설정 -->
	<div id="map" class="map"></div>

 

 

 

HTML 부분에는 다음과 같이 한줄 적어주고 

 

 

 

 

	
		<script>
		
		  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>

 

 

이렇게 자바스크립트로 지도를 사용 가능하도록 

 

자바스크립트를 추가해주면 되겠다.

 

---

 

 

To be continue..