OpenLayers
웹 브라우저에서 지도데이터를 표시하기위한 자바스크립트 라이브러리
오픈레이어스를 통해 타일맵, 벡터 데이터, 마커, 기타 외부 데이터 등을 지도로 표현할 수 있다.
fit()
특정 영역으로 맵을 이동시켜주는 기능
단, 좌표값을 알고 있을 경우 가능
let bbox = [123, 23 , 164, 21]
map.getView().fit(bbox,{option})option
fit의 사용을 더 멋지게 만들어주는 옵션
size
범위를 맞출 박스의 픽셀 크기를 설정한다.
padding
패딩 값을 설정
minResolution & maxZoom
최소 해상도와 최대 줌 설정
duration
fit 중 , 이동 중 바로가는 것이 애니메이션처럼 이동
callback
도착 후 실행할 함수
fit과 setCenter의 차이
fit은 boundaryBox를 화면상에 맞추는 기능
멀리 떨어진 boundary box를 화면의 중앙으로 이동
이 기능을 실행하는 와 중에 여러 옵션을 줄 수 있다.
setCenter는 경위로 좌표를 사용하여 이동
오직 이동만 가능
겪은 오류
첫번째 이동 버튼을 누르고 이동 두번째 버튼을 누른 뒤 다시 첫번째 이동 버튼을 누르면 map에 있던 vectorLayer가 draw되지 않는 현상
첫번째 시도 . fit to setCenter
버튼을 fit으로 작동하게 만들었기에 setCenter로 바꾸었으나 역시나 같은 문제가 발생함
두번째 시도 . setZoom 및 setRevolution
vectoy layer가 draw되지 않더라도 패닝, 줌인앤아웃을 하면 다시 그려진다는 것을 알고 setZoom or setRevolution을 통해 값을 변경시켰으나 역시나 같은 오류가 발생
세번째 시도 . setExtent
마우스 줌,패닝을 할 때 vector layer의 extent값이 변경된다는 것을 확인하여
setExtent로 vector layer에 extent값을 새롭게 설정줘봤으나 이동한 곳의 정확한 좌표값을 알기가 어려움 (getExtent, calculateExtent 사용했으나 오차가 조금 존재) 실패.
네번째 시도 . loader 및 strategy
맵이 움직일 때 값이 변한다는 것에 초점을 두고 검색을 해봤더니
vector layer에 loader 및 strategy를 커스텀할 수 있었다.
링크
https://openlayers.org/en/v4.6.5/apidoc/ol.source.Vector.html
링크
https://openlayers.org/en/latest/apidoc/module-ol_loadingstrategy.html#.bbox
이를 바탕으로 strategy의 extent값이 load의 extent와 다를 때 vectoy layer를 새롭게 extent시켜줌.
하지만 동일한 vector layer가 여러번 렌더되는 문제가 발생함.
마지막
네번째 시도에서 리렌더링 문제점이 발견됨
콘솔을 찍어본 결과
strategy는 loader가 실행되고 실행
loader가 끝나면 다시 실행된다는 것을 알게됨
그래서 strategy에게 loader가 끝났을 때 extent값을 비교하여 vector layer가 리렌더링 되는 현상을 해결
느낀점
물론 완벽한 해결이 아닐 수 있습니다.
하지만 이러한 해결 과정을 통해 openlayers가 어떻게 움직이는 지를 알 수 잇었습니다.
리팩토링을 통해 더 나은 해결 방법을 찾게 된다면 다시 한번 블로깅을 해보겠습니다.
