반응형
오픈레이어스에서 기본으로 확대, 축소 이벤트를 제공하지만
자체적으로 확대, 축소 이벤트 줘야할 때가 있어서 예제를 진행해보겠다.
그 전에 아래 함수에 대해 알아보고 넘어가자.
map.getView()사용자가 보고 있는 map의 view객체 모든 것
하위에는 다양한 메서드가 있다.
getXxx, setXxx
사용할 메서드는
map.getView().getZoom();
map.getView().setZoom();
//확대
document.getElementById('zoomIn').addEventListener('click', function(){
let zoom = map.getView().getZoom()+1;
map.getView().setZoom(zoom);
});
//축소
document.getElementById('zoomOut').addEventListener('click', function(){
let zoom = map.getView().getZoom()-1;
map.getView().setZoom(zoom);
})
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>오픈레이어스 클릭 이벤트</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.2.4/ol.css">
<style>
.map {
height: 800px;
width: 100%;
}
.ol-zoom{
display:none
}
</style>
</head>
<body>
<button id="zoomIn">줌 인</button>
<button id="zoomOut">줌 아웃</button>
<div id="map" class="map"></div>
<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
})
});
//확대
document.getElementById('zoomIn').addEventListener('click', function(){
let zoom = map.getView().getZoom()+1;
map.getView().setZoom(zoom);
});
//축소
document.getElementById('zoomOut').addEventListener('click', function(){
let zoom = map.getView().getZoom()-1;
map.getView().setZoom(zoom);
})
</script>
</body>
</html>*코드블럭으로 HTML코드 넣었는데, 위에처럼 간격 안맞을때 해결방법을 모르겠다..
반응형
'공부 > OpenLayers' 카테고리의 다른 글
| OpenLayers(오픈레이어스) 지도 위 마커 생성 (0) | 2024.06.14 |
|---|---|
| OpenLayes(오픈레이어스) 클릭 이벤트 (0) | 2024.06.12 |
| OpenLayers(오픈레이어스)란 / 지도 띄우기 (0) | 2024.06.11 |