오픈레이어스에서 View 클래스는 화면구성을 담당 합니다.
화면에 뭐가 클릭이 되거나 드래그 앤 드랍, 화면 드래그 등 여러 이벤트를 감지하고 처리하는 역할을 합니다.
해당 view 객체에 몇가지 기능을 추가하면 괜찮은 에니메이션 효과(화면 자동이동, 회전 등) 기능을 만들 수 있습니다.
역시..화면을 만드는 레이어는 기존에 사용하던 레이어를 사용 하겠습니다.
대신에 view를 생성하는 객체만 따로 전역변수로 분리하여 둡니다.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import OlTileLayer from 'ol/layer/Tile.js';
import point from 'ol/geom/Point';
var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857');
var korea = pnt.getCoordinates(); //이번에 중앙 변수명칭을 korea로 바꾸어 보았다. 많이 움직일 꺼니깐..
var layer = new OlTileLayer({
source: new OSM()
});
var myView = new View({
center: korea,
zoom: 8
}); //뷰 객체를 전역변수로 뺀다.
var map = new Map({
layers: [layer],
target: 'map',
view: myView
});
여기까지 하였다면 지도가 잘 나옴을 볼 수 있습니다.
그러면 셀렉트 태그를 만들어서 셀렉트 테그가 바뀔때마다 해당 데이터를 가지고와서 애니메이션을 보여주는 기능을 달아보도록 하겠습니다.
index.html 파일을 아래와 같이 만들어 줍니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>히트</title>
<style>
#map {
width: 600px;
height: 650px;
}
.left{
float: left;
margin: 2%;
}
</style>
</head>
<body>
<div id="map" class="left"></div>
<select class='left' id='animation'>
<option value='' selected>none</option>
<option value='rotate_a'>시계방향</option>
<option value='rotate_b'>반시계 방향</option>
<option value='rotate_all'>한바퀴 회전 후 중앙은 한국 이동</option>
<option value='move'>한국으로 이동(2초)</option>
<option value='move_fast'>한국으로 이동(0초)</option>
</select>
<script src="./index.js"></script>
</body>
</html>
옵션의 값 들은 나중에 조건문으로 이벤트를 줄 내용으로 보면 됩니다.
아래 이벤트는 대충 통상적으로 많이 쓰일 것 같은 이벤트를 추려 보았습니다.
해당 이벤트에 리스너를 달아서 동작 해 보겠습니다.
var el = document.getElementById("animation");
el.addEventListener("change", ( ()=>{
var x = document.getElementById("animation").value;
if(x == 'rotate_all'){
} else if(x == 'rotate_a'){
} else if(x == 'rotate_b'){
} else if(x == 'move'){
} else if(x == 'move_fast'){
}
}), false);
마지막으로 해당 view 객체에 에니메이션을 추가하여 보겠습니다.
아래는 에니메이션에 대한 예제코드 입니다.
var x = document.getElementById("animation").value;
if(x == '회전이면~'){
myView.animate({
rotation: myView.getRotation() + Math.PI / 2
});
}
//..생략
view 객체에 animate라는 기능을 통해서 이벤트를 주는 모습 입니다.
animation이라는 함수에 다양한 옵션을 통해서 이벤트를 줄 수 있습니다.
뭔가 Jquery나 Javascript의 에니메이션 기능을 많이 만들어 본 사람이라면 작업하기 더욱 쉬울 것 같습니다.
https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#animate
OpenLayers v5.3.0 API - Class: View
options View options. Name Type Default Description center module:ol/coordinate~Coordinate The initial center for the view. The coordinate system for the center is specified with the projection option. Layer sources will not be fetched if this is not set,
openlayers.org
최종 기능에 대한 스크립트 코드 입니다.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import OlTileLayer from 'ol/layer/Tile.js';
import point from 'ol/geom/Point';
import {easeIn, easeOut} from 'ol/easing.js';
var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857');
var korea = pnt.getCoordinates(); //이번에 중앙 변수명칭을 korea로 바꾸어 보았다. 많이 움직일 꺼니깐..
var layer = new OlTileLayer({
source: new OSM()
});
var myView = new View({
center: korea,
zoom: 8
}); //뷰 객체를 전역변수로 뺀다.
var map = new Map({
layers: [layer],
target: 'map',
view: myView
});
var el = document.getElementById("animation");
el.addEventListener("change", ( ()=>{
var x = document.getElementById("animation").value;
if(x == 'rotate_all'){ //한바퀴 돌리고 중앙은 한국
var rotation = myView.getRotation();
myView.animate({
rotation: rotation + Math.PI,
anchor: korea,
easing: easeIn
}, {
rotation: rotation + 2 * Math.PI,
anchor: korea,
easing: easeOut,
center: korea
});
} else if(x == 'rotate_a'){ //시계방향
myView.animate({
rotation: myView.getRotation() + Math.PI / 2
});
} else if(x == 'rotate_b'){ //반시계 방향
myView.animate({
rotation: myView.getRotation() - Math.PI / 2
});
} else if(x == 'move'){ //한국 중앙으로 이동, 속도 2초
myView.animate({
center: korea,
duration: 2000
});
} else if(x == 'move_fast'){ //한국 중앙으로 이동, 즉시
myView.animate({
center: korea,
duration: 0
});
}
}), false);
* 해당 내용은 npm과 parcel 환경으로 구성되어 있습니다.
* 아래 주소를 통해 환경구성을 하면 이해하기 쉽습니다.
https://lts0606.tistory.com/194?category=726697
Openlayers 사용법 (Openlayers 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용)
오픈레이어스는 브라우저에서 지도를 활용한 정보를 표출하는 라이브러리 입니다. 네이버지도, 구글지도 및 다음지도 처럼 GIS(geographic information system) 라는 명칭으로 불리우며 지형정보 서버를
lts0606.tistory.com
아래 소스코드를 첨부합니다!
댓글