WMS를 활용한 지도 조회(예제)
프로젝트 생성
Eclipse상단 메뉴에서‘File > New > Dynamic Web Project'를 선택한다.
프로젝트 생성창이 나타나면 프로젝트 정보를 입력한다.
Projects name :프로젝트 명(예: Stadium)
Target runtime :서버runtime환경 설정('New Runtime'버튼을 클릭하여 설정한다.)
프로젝트 생성창에서‘New Runtime'버튼을 클릭하고 현재 사용하는 서버타입을 설정 하고’Next‘버튼을 클릭한다. (예: ’Apache > Apache Tomcat v7.0')
Tomcat설치 경로와JRE버전을 선택하고‘Finish'버튼을 클릭한다.
프로젝트 정보입력이 완료되면'Next'를 클릭하여 소스 폴더와 클래스 빌드 경로를 설정하고‘Next’를 클릭한다.
Web Module설정 화면에서 정보를 입력하고Finish를 클릭한다.
Context root : Stadium
Content directory : WebContent
-옵션‘Generate web.xml deployment descriptor’ :체크(프로젝트 생성시web.xml파일 생성)
새로운 프로젝트가 생성된 것을 확인한다.
GeoServer Workspace등록
이클립스 상단 메뉴의'File > Import'를 클릭한다.
Import소스타입 선택 화면에서‘Web > WAR file'을 선택하고’Next'버튼을 클릭한다.
WAR Import화면에서'Browse...'버튼을 클릭하여 대상war파일을 선택하고'Finish'버튼을 클릭한다.
geoserver프로젝트가 추가된 것을 확인한다.
이클립스 상단 메뉴의‘Window > Show View > Servers'를 클릭하여’Servers‘창을 나타낸다.
이클립스 하단의’Servers‘창(’Servers'탭)을 선택하고 마우스 우클릭하여'New > Server'를 선택한다.
Server Type으로‘Tomcat v7.0 Servre'를 선택하고 필요한 정보를 입력한 뒤’Next'버튼을 클릭한다.
Server와 연결할 프로젝트를 추가하고'Finish'버튼을 클릭한다. (예: geoserver, Stadium추가)
GeoServer레이어 추가
Eclipse에서Tomcat서버를 실행시킨다.
‘http://localhost:8080/geoserver/web’(locahost는 설정에 따라 달라질 수 있다.)에 접속하여ID와
Password를 입력해 로그인한다. (초기 id/pw = admin/admin1234)
로그인이 완료되면 아래와 같은 환영 페이지가 나온다.
작업공간>새로운 작업공간 추가하기를 클릭하면 새로운 작업공간 페이지가 나온다. Name와 네임스페이스URI를 입력하고 제출해 새로운 작업공간을 생성한다.
PostGIS DB를 추가하려면 저장소>새로운 저장소 생성하기> PostGIS메뉴로 이동.
작업공간과 데이터원본 이름, PostgrSQL연결할host, port, database, schema, user, passwd필드를 작성한다.
입력이 끝나면 저장을 클릭하고Data Source가 정상적으로 생성되면 아래와 같이 레이어 추가 화면이 나타난다.원하는 레이어의발행하기를 클릭하면 레이어 편집화면이 나오게 된다.
레이어 편집화면에서 공간좌표체계와 레이어 최소영역을 설정해준다.레이어 최소경계 영역은데이터로부터 계산하기/원본 영역으로부터 계산하기를 클릭해 입력한다.입력이 끝나면 저장하기를 클릭한다.
저장하기를 클릭하면 레이어 목록에 새로 추가한 레이어를 확인할 수 있다.
OpenLayers사용 준비
OpenLayers다운로드
http://www.openlayers.org/에 접속해서zip파일을 다운 받는다.다운 받은zip파일의 압축을 풀면
OpenLayers의 소스,문서,예제 샘플 등이 포함되어있다.
Stadium프로젝트의WebContent하위에lib폴더와style폴더를 생성한다.
다운받은 폴더OpenLayers-2.13.1\theme\default에서style.css파일을 복사하여Stadium프로젝트style폴더에 붙여놓기를 한다.
다운받은 폴더OpenLayers-2.13.1\examples에서style.css파일을 복사하여Stadium프로젝트WebContent폴더에 붙여놓기를 한다.
다운받은 폴더OpenLayers-2.13.1에서OpenLayers.js파일을 복사하여Stadium프로젝트lib폴더하위에Openlayers폴더를 만들어 붙여놓기를 한다.
다운받은 폴더OpenLayers-2.13.1에서img폴더를 복사하여Stadium프로젝트lib폴더하위에Openlayers폴더에 붙여놓기를 한다.
