- Openlayers5부터 node.js로 npm으로 받아서 하는 es6방식으로 바뀌어서
필자는 Openlayer4를 사용하여 지도를 표출하는 방식으로 개발해보겠습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- 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://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
a.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}
#map:focus {
outline: #4A74A8 solid 0.15em;
}
</style>
</head>
<body>
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
view: new ol.View({
center: [126.977885, 37.5662378]
,zoom: 17
,projection : 'EPSG:4326'
})
});
//줌아웃
document.getElementById('zoom-out').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
//줌인
document.getElementById('zoom-in').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
</script>
</body>
</html>
view: new ol.View({
center: [126.977885, 37.5662378]
,zoom: 15
,projection : 'EPSG:4326'
})구글맵은 EPSG:3857
openlayers에서는 EPSG:4326을 사용하고 있으므로 EPSG:4326으로 변환
위에 경도, 위도 값은 구글맵에서 시청의 위도, 경도 값입니다.
- 결과화면
서울특별 시청이 보이는것을 확인할수 있습니다.
Zoom out과 Zoom in을 클릭해보면 동작을 확인할수 있습니다.
'Openlayers' 카테고리의 다른 글
| [Openlayers] 마우스로 도형 그리기 (0) | 2022.02.17 |
|---|---|
| [Openlayers] wms 적용하기 (0) | 2022.02.17 |
| [Openlayers] vworld wmts, map, pin, polygon, circle 객체 올리기 (0) | 2022.02.17 |