728x90 반응형 Openlayers10 OpenLayers (특정 위치로 이동 : view.fit()) ● 지도의 특정 영역으로 이동하는 방법은 찾아보면 되게 많은데 view 에서 fit()이라는 함수가 그 중 하나이다. fit은 center와 zoom을 동시에 이동시켜주기에 간단하지만 굉장히 유용하다 ● POSTGIS box2d ST_Extent(geometry set geomfield); SELECT ST_Extent(the_geom) as bextent FROM sometable; st_bextent ------------------------------------ BOX(739651.875 2908247.25,794875.8125 2970042.75) BOX --> 좌표 배열 --> EXTENT --> JS에서 replace(치환)하여 view.fit()에 넣을 수도 있음 2021. 10. 25. 좌표계 UTM 좌표계 (Universal Transverse Mercator Coordinate System) - 지구상의 점들의 위치를 통일된 체계로 나타내기 위한 격자 좌표체계이다. - 지리 좌표계가 극지방으로 갈수록 직사각형이 크게 감소하는 반면 UTM좌표계는 직사각형 모양을 유지하므로 거리, 면적, 방향 등을 나타내는데 매우 편리하다는 장점이 있다. ex) WGS84, GPS용 좌표계로 많이 사용된다. 타원체 - 지구는 구나 타원체가 아니다. 다만 타원체에 가까운 형태이다. 지도를 만들기 위해서 인공위성 궤도를 결정하기 위해서는 수학적으로 표현할 수 있는 지구의 형상이 필요하다. 이런 필요에 의해 지구를 표현한 것이 회전 타원체이다. 이 타원체는 지구의 모양에 가깝기는 하지만 지구의 정확한 형상이 아니기.. 2021. 6. 21. OpenLayers (GeoServer SQL View - parameteric SQL View) * geoserver Tiled WMS 표출 참고 https://openlayers.org/en/v4.6.5/examples/wms-tiled.html?q=wms * map.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 10.. 2020. 2. 12. OpenLayers (GeoServer Layer 지도 등록) * OpenLayers (GeoServer Layer 지도 등록) - 필자는 GeoServer를 Tomcat에 얹어서 깔아 Tomcat과 Geoserver가 같은 PORT를 사용중 - 같이 실행시키기 위해 프로젝트의 Tomcat port를 변경 - Tomcat admin port : 8005 => 8006 - HTTP/1.1 : 8080 => 8081 - AJP/1.3 : 8009 => 8010 * map.js - geoserver 접속하여 표출하고자 하는 레이어를 레이어 미리보기를 하고 URL에 작성되어 있는 파라미터를 확인하여 params 변수에 담아서 보낸다. * 참고자료 : https://openlayers.org/en/v4.6.5/examples/wms-tiled.html?q=wms * 결과화면.. 2020. 2. 4. OpenLayers (Vworld API 활용 - 지도 Layer 변환하기) - 2. Layer 변환 * map.jsp (일부분만 추출) * map.js var wktFormat = new ol.format.WKT(); // WKT 텍스트 소스에서 단일 지오메트리를 읽습니다. var map = null; var view = null; var mapProjection = "EPSG:3857"; var dataProjection = "EPSG:4326"; var sggLayerName = "sggLayer"; var emdLayerName = "emdLayer"; var array = null; var sggLayer = null; var emdLayer = null; var baseLayer = null; var satelliteLayer = null; var hybridLayer = null; var g.. 2020. 1. 29. 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 반응형
