728x90 반응형 IT 개발/OpenLayers13 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. SHP, SHX, DBF, KML 등 GIS 용어 정리 ● SHP : shapefile은 벡터 형식이며 점, 선, 도형으로 표현된다. 도한 그 속성을 지니고 있음. * shapefile을 하나의파일포맷이라고생각하지만 사실,3개의확장포맷을통틀어shapefile이라고하며 shp,shx,dbf가 해당포맷을뜻함 ● DBF : 각 도형(점, 선, 면)의 대한 속성값이 담겼음 (테이블 형식으로 생김) ※ shp, shx = data (공간데이터) dbf = information (속성정보) QGIS에서는 shapefile을 분석 혹은특정위치(공간)편집으로 활용 SHP, SHX, DBF, KML 용어정의와 활용 그럼 웹과 모바일에 데이터시각화를 하려면? Shp파일포맷은 웹에서인식하지못한다. 웹의형식에 맞는 파일포맷이필요한데 JSON과 XML이 적합하다. javaScrip.. 2021. 10. 19. 좌표계 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. 이전 1 2 다음 728x90 반응형
