[GIS] OpenLayers Simple Map 만들기

[OpenLayers Simple Map 만들기]

 

 

 

 

1. OpenLayers 란?

 

- 웹 지도 서비스를 위한 라이브러리

 

- 웹 플랫폼에서 지도 데이터의 시각화와 조작을 편리하도록 하는 오픈소스 기반의

 

  자바스크립트 라이브러리

 

- 클라이언트 사이드 javascript

 

- AJAX, Web 2.0 활용

 

- BSD 라이선스 (자유롭게 수정 / 배포 가능)

 

 

 

2. OpenLayers의 이해

 

- Javascript 기반

 

- Javascript 기반이기 때문에 구축 환경과 관계가 없음

 

- OpenLayers에서 지도 서비스를 제공해주지는 않음 (구글맵, 네이버 맵 등과 같은 지도 서비스

  를 제공하는 서버가 필요)

 

- Google Maps, Bing Maps 등의 상용 지도와 OpenStreetMap 과 같은 오픈 데이터 지도 사용이  

  가능하도록 라이브러리 제공

 

- Openlayers는 지도 서비스를 편리하게 사용할 수 있게 해주는 도구

 

- 지도 서버로의 접근을 OGC 효준에 의해 요청하고 지도 서버와는 독립적으로 동작

 

 

 

3. OpenLayer를 이용한 Sample Map 만들기 (Openlayers.org API Example참조)

 

1. STS를 이용하여 스프링 MVC Project 생성

 

2. Map.jsp 만들기

 

 

 

3. MapController 만들기

 

4. Web Browser 창을 열고 'http://localhost:8080/gis/' URL을 호출

 

 

 

 

4. Map 

 

- 웹 지도 서비스를 제공하기 위해 기본이 되는 클래스

 

- 지도를 생성하고 조작하기 위한 프로퍼티 및 함수로 구성

 

- Layer, 컨트롤, 팝업 등을 등록하기 위한 기본 컨테이너

 

- 생성자 : OpenLayers.Map(div, option)

 

- div: 지도가 띄워질 영역 생성을 위한 엘리먼트(DIV) 지정

- option : Map 객체 생성을 위한 옵션들로 영역, 좌표계, 단위 등을 명시하는 부분 (지정하지 않으면 Default 속성 사용) 

 

 

 

5. Layer

 

 - Layer를 생성하고 조작하는 프로퍼티 및 함수로 구성된 클래스

 

 - Map 컨테이너 위에 여러 개의 Layer를 등록하여 보여줄 수 있음

 

 - 포토샵의 Layer와 비슷함 (쉽게 비유하자면, 셀로판 종이와 비슷함. 여러 개의 셀로판 종이를 

   겹쳐서 보여줌)

 

 - WMS, WFS, GML, Vector Layer 등을 지원

 

 - 생성자 : OpenLayers.Layer(name, options)

       - name : Layer 이름

       - options : Layer 생성을 위한 옵션

 

 

 

 

출처 : http://rahm.tistory.com/24, 공간정보 거점대학-OpenLayers의 고급 기능 이해 및 실습 Slide, https://openlayers.org/en/latest/examples 참조