OpenLayers

웹 브라우저에서 지도데이터를 표시하기위한 자바스크립트 라이브러리

오픈레이어스를 통해 타일맵, 벡터 데이터, 마커, 기타 외부 데이터 등을 지도로 표현할 수 있다.

링크
https://openlayers.org/

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://gis.stackexchange.com/questions/322681/openlayers-refresh-vector-source-with-bbox-strategy-after-map-moved

링크
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가 어떻게 움직이는 지를 알 수 잇었습니다.

리팩토링을 통해 더 나은 해결 방법을 찾게 된다면 다시 한번 블로깅을 해보겠습니다.