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

- 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]