태그: ol3

웹 Geolocation 사용방법 -OL3

웹에서 현재위치 GSP 기능을 구현할 일이 있어, navigator.geolocation 객체를 사용해 보았다. MDN – 지오로케이션 사용하기 특별히 어려운 점은 없는데 단, 2016년4월부터 바뀐 사항이 있어 유의해야 한다. 브라우저의 Geolocation을 이용하기 위해서는 HTTP가 아닌 HTTPS로 설정되어야 합니다. 이렇게 바뀐게 2016년4월부터라네요. This change is effective as of Chrome 50 (12PM PST April 20 2016). 출처: Geolocation API Removed from ...

구글어스 KML 에디터 사용법

KML 제작과 수정을 위해 웹검색을 해봤는데, 구글어스(Google Earth) 만한게 없더군요. 일단 구글어스를 다운로드 받습니다. 링크: 구글 어스 다운로드 구글어스 사용법 1) 구글 어스를 실행하고 2) 메뉴의 ‘파일>열기’를 선택해 불러올 KML을 선택한다 3) 왼쪽 사이드바의 ‘장소’탭에서 임시장소 아래에 나타난 포인트, 라인, 다각형 등을 수정 (* 새로 생성하는 경우에는 지도상에서 직접 feature 들을 생성/편집하면 된다) 4) 임시장소 아래의 ...

Baidu Map과 OL, Google Map 오버레이는 불가능

중국은 국가안보에 대한 우려로 지도 데이터를 반출 하지도 않고, 지도 서비스를 제작하려며 정부의 허가를 받아야 합니다. GPS 데이터를 바이두 지도에 올바르게 맵핑하기 위해서는 GPS 데이터 자체가 중국 위성으로부터 얻어진 것이거나, 바이두에서 제공하는 (바이두 지도의 좌표값을) 좌표 변환기를 이용해 값을 변환해야 합니다. 이렇게 된 이유는 ‘GCJ-02’라는 중국의 독특한 좌표체계 탓입니다. (* 좌우/상하 어느 쪽으로든 땅덩어리가 크기 ...

Modal Dialog에서의 ol3-map 처리

입력필드에 좌표값을 지도를 이용해 받고 싶을 경우 Modal Dialog를 사용할 수 있다. * Modal Dialog는 페이지를 이동하지 않고 특정 동작을 수행한후 닫을 수 있다 이 경우 OL3 지도는 size가 [0,0]인 display:none 상태가 된다. 그러므로 Modal Dialog가 show 상태가 될 때 OL3 지도를 updateSize()  해주어야 한다. 예제에 필요한 Modal Dialog를 핸들링 하는 방법은 Modals in Bootstrap 3 문서를 ...

Mobile 체크하여 OL3 선택도구 변경하기

OL3(OpenLayers 3)에서 ol.interaction.Select는 강력한 도구다. 별다른 코드를 넣지 않고도 선택시 스타일 변화와 함께 select 이벤트를 제공한다. OL3 선택도구에는 아래의 종류가 있다. Mouse – Pointer Hover Mouse – Click Mouse – Drag Box Mouse – Draw Circle or Polygon 사용상의 편의로 PC/Desktop 환경에서는 ‘Pointer Hover’를, Mobile 환경에서는 ‘Click’을 선택도구로 주로 사용한다. 우선 Javascript에서 Mobile 환경 체크 ...

OpenLayers 3에서 Daum Map 사용하기

지도 개발시 Google 지도도 만들고 Daum 지도도 만드는 등 다양한 요구가 있을 경우, OL3 하나만 개발하면 Overlay 시켜 개발공수를 절약할 수 있다는 장점이 있다. 유지보수도 편해진다. Daum Map을 개발하는 것도 동일하다. 앞에 ‘OpenLayers 3에서 Google Map 사용하기’ 글에서 소개한 바와 같은 방법으로 작업하면 된다. 작업 요령 HTML 상에 지도가 올라갈 div 객체 두개를 겹쳐 쌓는다 ...