* 웹 페이지에 지도를 띄우기 위해 필요한 3가지
- openlayers 포함
- <div> 지도 컨테이너
- 간단한 지도를 만드는 javascript
1. openlayers 포함
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
선택 사항)
지도가 IE나 안드로이드 v4 환경에서 보여지길 원한다면, OpenLayers script 전에 다음 파일을 넣어준다.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
2. <div>지도 컨테이너
<div id="map" class="map"></div>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
3. 간단한 지도를 만드는 javascript
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([128.5, 36.1]),
zoom: 5
})
});
- center 부분의 좌표를 우리나라로 수정
* 전체 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([128.5, 36.1]),
zoom: 5
})
});
</script>
</body>
</html>
* 공식
문서
https://openlayers.org/en/latest/doc/quickstart.html
OpenLayers - Quick Start
Quick Start This primer shows you how to put a simple map on a web page. For production, we strongly recommend bundling the application together with its dependencies, as explained in the Building an OpenLayers Application tutorial. Put a map on a page Bel
openlayers.org
'GIS' 카테고리의 다른 글
| GIS 프로그램 Maptiler (0) | 2022.04.07 |
|---|---|
| [GIS] WKT란? (0) | 2022.03.29 |
| [QGIS] Shp파일로 지도 레이어 생성하기 (0) | 2022.03.26 |
| [QGIS] QGIS 설치하기 (0) | 2022.03.25 |
| [OpenLayers] 오픈레이어스란? (0) | 2021.11.19 |
