Openlayers

이번 포스트에서는 내가 원하는 아이콘을 지도 위에 출력 하는 방법에 대해 정리 해 보고자 한다. 최종 결과물은 아래와 같을 것이다. png파일을 이용한 marker와 단순한 동그라미 marker를 지도에 출력 해볼 것이다. 만약 그 이전 단계에 대해 모른다면, 지난 포스트들을 참고하자. 지난 포스트에서는 1) OSM 지도를 출력하는 방법, 2) 클릭 이벤트를 등록하는 방법에 대해 정리했었다. 목차는 아래와 같다. StepbyStep 1. Feature 생성.(Point, LineString, CustomFeature) 2. VectorSource를 생성하여 Feature를 주입. 3. VectorLayer를 만들고, VectorSource를 주입해준다. 4. VectorLayer를 Map 객체에 주입해 ..

지난 포스트에서 어떻게 OSM지도를 출력하는 지 정리 해 봤다. 이번에는 지도를 클릭 했을 때 해당 위치의 좌표를 출력하는 방법에 대해 정리 해 보곘다. 만약 Openlayers를 이용해 OSM지도를 그리는 방법에 대해 모른다면, 지도 출력 포스트를 참고하자. 바로 지도 위에 이미지를 그리는 방법에 대해 알고 싶다면, marker 출력 포스트를 참고하자! Openlayers에서는 DOM 요소의 x, y좌표를 우리가 원하는 좌표계 좌표로 반환해주는 함수들이 존재한다. 바로 코드를 통해 알아보자. 시작은 지난 포스트 코드에서 시작한다. // 3. 현재 좌표 출력 CURRENT POSITION: {{mousePosition}} 1. 클릭 이벤트 등록 지난 시간 생성한 OlMap 객체에 click 이벤트 리스너..

Openlayers를 사용하는 방법에 대해 정리 해 보고자 한다. 아직 미완성이긴 하지만 gif 처럼, 지도를 그리고 그 위에 이미지를 올려 길을 따라 움직이게 하는 것이 최종 목표이다. openlayers 움직이는 아이콘 이미지 이번 포스팅에서는 가장 기초가 되는 지도를 출력하는 방법에 대해 정리해보고자 한다. 지도 위에 이미지를 바로 그리고 싶거나, 이벤트 등록을 하고 싶다면, 아래 링크를 참고하자. https://marklee1117.tistory.com/128 [Openlayers] 3 - 지도 위에 아이콘(custom marker) 출력 이번 포스트에서는 내가 원하는 아이콘을 지도 위에 출력 하는 방법에 대해 정리 해 보고자 한다. 최종 결과물은 아래와 같을 것이다. png파일을 이용한 mark..

오픈 레이어스를 사용하게 되면 필연적으로 만나게 되는 좌표계 ESPG:4326 와 ESPG:3857 각각 무엇인지, 결론적으로 뭘 써야 할 지 알아보도록 하자. 만약 Openlayers를 이용하여 지도를 그리는 방법이 궁금하다면 지도그리기 포스트를 참고하자! ESPG(European Petroleum Survey Group)? 먼저, 들어가기 전에 ESPG가 무엇을 의미하는지 간단히 알아보자. ESPG코드는 전 세계 좌표계 정의에 대한 고유한 명칭으로 상세 정의는 PROJ.4와 wkt라는 문자열로 이루어 진다. ESPG 공식 페이지에서 볼 수 있는 ESPG:3857와 ESPG:4326는 아래와 같다. +proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0..