OpenLayers - start

오픈소스로 (BSD license) layer 개념을 사용하여 map 위에 여러 동적인 layer를 추가하여 다양한 웹맵을 개발 수 있도록 제공한다. (현재 v6.4.3)

https://openlayers.org/

OpenLayers - Welcome

 

 

 

OpenLayers quick start

(https://openlayers.org/en/latest/doc/quickstart.html)

 

아래와 같이 구축하므로 간단히 map을 추가할 수 있다.

Header

css 추가

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<!-- map의 크기 지정-->
<style>
.map { height: 400px; width: 100%; }
</style>

 

 

js 추가

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

 

Body

map이 위치할 영역에 <div>추가

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

 

map 실행할 script 추가

<script type="text/javascript">
var map = new ol.Map({
	target: 'map', // map의 div id를 적는다.
	layers: [  // 사용할 layer들을 배열로 여러 개 추가할 수 있다.
		new ol.layer.Tile({
			source: new ol.source.OSM()
		})
	],
	view: new ol.View({  //지도의 중심, 해상도, 로테이션을 지정할 수 있다.
		center: ol.proj.fromLonLat([37.41, 8.82]),
        // openlayer는 좌표계를 EPSG 3857을 사용한다. 경우에 따라 변경해 줘야 할 수도 있다.
		zoom: 4
	})
});
</script>