728x90 반응형 Vworld5 OpenLayers (Vworld API 활용 - 지도 변환하기) - 1. API 발급 받기 * Vworld API 활용하기 1. http://www.vworld.kr/dev/v4api.do 접속 2. 로그인 3. 인증키 > 인증키 발급 클릭 4. API를 사용하고자 하는 URL과 사용목적, 사용기관 작성 후 지도 인증키 받기 클릭 5. 회원가입시 작성했던 이메일로 승인 요청메일이 발송되며, 아래 화면에서 "인증키 사용" 버튼 클릭 6. 인증키 > 인증키 관리에서 '승인' 확인. => 인증키 발급 완료 - 해당 인증키값을 사용하고자 하는 URL에 등록하여 사용하면 된다. 2020. 1. 29. OpenLayers (Mask Layer) Mask - 반투명의 검은 막의 바탕 ex) 팝업 마스크 : 팝업을 사용할때 배경을 흐리게 만들어 팝업에 집중할 수 있게 효과를 주는 방법 Mask 작업 방법 1. JSTS라는 라이브러리를 사용 2. DB에서 쿼리를 사용하여 위 모양의 형태의 GEOMETRY를 가져오는 방법 * 필자는 두번째 방법을 통해 작업 1) DB에서 쿼리를 사용하여 mask 형태의 GEOMETRY를 가져온다. (ST_DIFFERENCE 사용) - 아래 쿼리로 만들어진 GEOMETRY를 js에 Map형식으로 미리 만들어 둠 ex) SELECT ST_DIFFERENCE ( ⓐ -- ST_GEOFORMTEXT('POLYGON((좌표들))', '4326'), -- ST_GEOMFROMTEXT : 4326 좌표계로 변환 ⓑ -- ST_GE.. 2020. 1. 17. OpenLayers 기본 1. Layer - 레이어란 현실세계의 형상(Feature) 들의 집합이다. - 형상(Feature) 이란 현실세계의 대상물을 표현, 건물 하나하나를 형상(Feature)이라 하고 이들의 집합을 건물 레이어라 한다. - 레이어는 다양한 형상에 따라 많은 레이어가 존재할 수 있다. - Map 객체가 선언되었다면 해당 Map 객체에 레이어를 등록함으로써 지도화면에서 지도를 볼 수 있다. 2. Overlay Layer - OpenLayers는 지도 서버로부터 지도 레이어를 전송받아 상호간에 중첩하여 활용할 수 있다. (레이어 중첩) 3. Vector Layer - WFS Layer - Vector 지도는 WMS 레이어와 달리 지도가 이미지 형태가 아닌 XML 또는 String등의 형태로 지도 형상의 좌표와 각.. 2020. 1. 16. OpenLayers (다중 마커 띄우기) 다중 마커 띄우기 //map을 보여주는 곳 function viewMap(data){ jQuery("#totViewMap").html(""); var vectorSource = new ol.source.Vector(); var markerVectorLayer = new ol.layer.Vector({ source : vectorSource, }); var map = new ol.Map({ layers : [ new ol.layer.Tile({source : new ol.source.OSM()}), markerVectorLayer], target : document.getElementById('totViewMap'), view : new ol.View({ projection: 'EPSG:4326', cen.. 2020. 1. 13. openLayers Vworld / EPSG : 3857 관련 Vworld - Vworld는 EPSG:3857 좌표계를 사용 - 다른 좌표계를 사용한다면 지도가 눌리는 현상이 발생할 수 있음. EPSG : 4326이 아닌 다른 좌표계를 사용한다면 두가지 방법을 사용할 수 있다. 1) 클라이언트에서 (ol.geom.POINT([127.0150, 37.5300 ]).transform("EPSG:4326", "EPSG:3857");) transform을 사용하여 EPSG : 4326 좌표계를 EPSG : 3857 좌표계로 변경한다. var mapProjection = "EPSG:3857"; var dataProjection = "EPSG:4326"; $(window).load(function() { //모든 include 되는 프레임들과 object들, 이미지까지 로드된.. 2019. 12. 23. 이전 1 다음 728x90 반응형
