본문 바로가기
GIS/OpenLayers

[OpenLayers] 특정 영역으로 지도 화면 이동하기 (ft. fit() / duration)

by 썸머워즈 2020. 12. 7.
반응형


- view.fit() 사용하여 특정 영역으로 부드럽게 이동하기 -


지도의 특정 영역으로 이동하는 방법은 찾아보면 되게 많은데


여러 방법중에 부드럽게 애니메이션을 사용하여 움직이는 방법에 대해 알아보자.


*다른 게시글에 지도 띄운 소스를 기반으로 작성함으로 그부분은 생략한다.


view 에서 fit()이라는 함수를 제공해주는데 이 함수에 애니메이션을 추가할 수 있다.


fit은 center와 zoom을 동시에 이동시켜주기에


간단하지만 굉장히 유용하다

물론 지금까지 많이 사용 안해본 내 입장에서만이다.


일단 extent를 알고 있다고 가정하에 예제를 통해 진행해보자.


▷일반적인 사용방법 (이동)


map.getView().fit(extent1);
// extent1 : [12962380.601052666, 4004207.209473483, 15290958.230732275, 4982601.171523739]
// extent2 : [14087955.176897664, 4463567.034718425, 14386612.803451654, 4589053.432430186]



이런식으로 그저 이동하는데 사용 가능하며 여기서 추가적으로


애니메이션을 삽입하여 부드럽게 이동할 수 있다.


▷애니메이션 추가한 이동


map.getView().fit(extent2,{
  duration : 500
});
// extent1 : [12962380.601052666, 4004207.209473483, 15290958.230732275, 4982601.171523739]
// extent2 : [14087955.176897664, 4463567.034718425, 14386612.803451654, 4589053.432430186]



이런식으로 두번재 매개변수에 duration을 추가해주면


아주 부드럽게 이동한다.


반응형


댓글

TOP