삽질기록 — Vue.js에서 openLayers 사용하기 (VueLayers)
최근 openLayers를 이용할 일이 있어 삽질을 하였습니다. 지도 작업을 할 수 있는 라이브러리인데, 무료라는 것이 가장 큰 장점인 것 같습니다.
openLayers 도큐먼트는 아래에서 확인할 수 있습니다.
혹시 vue에서 사용할 수 있도록 만든 오픈소스가 없을까 찾아 보니, 역시 있었습니다. 아래에서 VueLayers 라이브러리를 확인할 수 있습니다.
- 설치
$ npm install vuelayers2. main.js에 추가
3. vue 파일에 map 추가
사용자의 브라우저에서 위치 공유를 수락할 경우 geolocPosition이 해당 사용자의 위치가 되고, 해당 코드를 통해 사용자의 위치에 마커를 찍을 수 있습니다. marker.png 이미지는 구글 검색을 통해서 구했습니다. 코드를 실행하면, 아래처럼 마커가 생기는 것을 확인할 수 있을 것입니다.
그리고, 해당 부분 주변에 동그란 원을 그려 주겠습니다. 해당 부분은 vl-geom-circle을 이용하면 되는데요, 아래 페이지에서 확인해 주세요.
position-circle 부분이 코드를 추가한 부분입니다. 코드를 실행하면 아래처럼 동그란 원이 생긴 것을 확인할 수 있습니다.
이게 다입니다… 너무 쉽죠? 추가로, 지도를 움직였을 때 현위치로 다시 돌아가는 작업을 하고 싶습니다. 찾아 보니 해당 부분은 제 마음대로 디자인을 바꾸기 힘들 것 같다는 생각이 들어 원래의 컨트롤들을 없애고, 버튼을 새로 추가하여 값들을 직접 바꿔주는 플로우로 진행하였습니다.
먼저 default controls를 없애 주겠습니다.
그럼 control이 사라졌을 것입니다. 이제 vuetify를 이용하여 button을 추가해 주겠습니다.
위 페이지에서 버튼 관련 라이브러리를 확인해 주세요.
vl-map과 버튼 div를 하나의 div로 묶은 다음, button에 absolute를 할당하여 버튼이 같은 범위 안에 보이게끔 만들었습니다. +, -를 클릭할 때마다 zoom이 바뀌고, marker 버튼을 누르면 center가 geolocPosition으로 바뀌게끔 하였습니다.
완성되었습니다!
박수와 팬은 저에게 많은 도움이 됩니다.
+
대용량 데이터(약 1000개)를 feature로 등록해 주니 프로그램이 느려지는 성능 이슈가 있었습니다. 해당 부분 github에 issue로 남겨 놓았으나, 개발자 분이 확인을 잘 안 하는 것 같았습니다… 결국 제 프로젝트는 openlayers 공식 라이브러리를 사용했습니다. 공식 라이브러리에서는 해당 이슈가 없는 것으로 보아, vueLayers에서 feature 등록을 할 때 뭔가 다른 동작을 더 추가한 것으로 보입니다. 쉽게 접근할 수 있는 건 vuelayers지만, 다양하게 커스텀 하기에는 openlayers가 더 적절한 것 같습니다. 추후에 openlayers 사용기도 포스팅 하겠습니다!
