OpenLayers (지도 띄우기)

* OpenLayers

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

- 지도를 표현하고 조작 가능. 

 

* OSM

- 오픈 스트리트 맵 

- 오픈 소스방식의 참여형 무료 지도 서비스 

---

<기본 지도 띄우기>

---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

<지도 띄우는 순서>

1) OpenLayers를 사용하기 위한 js, css 파일 라이브러리 파일을 JSP, 또는 라이브러리에 포함시킨다.

   - JSP 파일에 라이브러리 추가 

     <link rel="stylesheet" href="./GIMap/Theme/default/style.css" type = "text/css"/> 등등 

1) 지도가 띄워질 영역을 div로 생성하여 target으로 잡는다. (<div id= 'map'>)

3) 위와 같은 소스를 작성한다. 

---

<소스 코드 설명>

* ol.Map : 지도는 OpenLayers의 핵심 구성 요소입니다.

              맵을 렌더링하려면 뷰(view), 하나 이상의 레이어 및(layer) 대상 컨테이너(target)가 필요

 1) target : 지도 자체의 컨테이너 또는 요소의 컨테이너입니다 id.

               ex) <div id = "map"></div>

               생성시 지정되지 않은 경우 ol.Map#setTarget 맵을 렌더링하려면 호출.

  2) layer : layer를 정의하지 않으면 레이어가없는 맵이 렌더링된다.

              레이어는 제공된 순서대로 렌더링되므로 벡터 레이어를 타일 레이어 위에 표시하려면 타일 레이어

              뒤에 와야합니다. 벡터레이어 > 타일 레이어

  3) view : 지도보기. 생성시 또는 setView를 통해 지정하지 않으면 레이어 소스를 가져 오지 않는다.

 

* ol.layer.Tile : 특정 해상도의 확대 / 축소 수준으로 구성된 격자로 미리 렌더링 된 타일 이미지를 제공하는

                    레이어 소스 용

  1) source : 이 레이어의 소스. 필수!!

 

* ol.source.OSM() : OpenStreetMap 타일 서버의 레이어 소스

 

* ol.View : ol.View 객체는지도의 간단한 2D 뷰를 나타냄.

              지도의 중심, 해상도 및 회전을 변경하기 위해 수행 할 객체

  1) ol.View : 세 가지 상태에 의해 결정된다 : center, resolution, rotation

  2) projection :  projecttion은 중심의 좌표계를결정하고 그 단위는 해상도의 단위 (픽셀 당 투영 단위)를 결정

 

   [전지구 좌표계]

  전세계를 한번에 나타내야 할 때 많이 쓰이는 좌표계들입니다.

  *WGS84 경위도: GPS가 사용하는 좌표계 

   - EPSG:4326, EPSG:4166 (Korean 1995)

 

  *Bessel 1841 경위도: 한국과 일본에 잘 맞는 지역타원체를 사용한 좌표계

   - EPSG:4004, EPSG:4162 (Korean 1985)

 

  *GRS80 경위도: WGS84와 거의 유사

   - EPSG:4019, EPSG:4737 (Korean 2000)

 

  *Google Mercator: 구글지도/빙지도/야후지도/OSM 등 에서 사용중인 좌표계

   - EPSG:3857(공식), EPSG:900913(통칭)          

 

3) center : 뷰의 초기 중심. 중심 좌표계는 projection옵션으로 지정되며 기본값은 undefined.

              레이어 소스를 설정하지 않으면 지도를 노출시키지 않음.

위도 : Latitude, 경도 : Longitude
openlayers는 경도, 위도 순으로 좌표를 입력한다.
center : [data.wgs84_lon, data.wgs84_lat] : 경도, 위도 

4) zoom : 뷰의 초기 해상도를 계산하는 데 사용되는 줌 레벨.

---

* 지도위에 Element를 띄울 시 주의사항 

1) 지도를 띄운 Map element(객체) 안에  div, talbe 등 무엇인가를 작성하면 안된다. 

  - <div id="map"></div>는 오로지 지도를 띄우는 용도.

2) Map 위에 element를 만들고 CSS를 아래와 같이 설정해주면 nav와 같은 화면을 구현할 수 있다. 

   Position : absolute; 

   z-index : 999;

   border : 1px solid;

   padding : 10px;

   margin :10px;

 

* 지도 웹 화면 전체 띄우기

1) 지도를 띄울 <div id= "map"></div>를 만들고 아래와 같이 CSS를 설정

   margin = 0px;

   padding = 0px;

   width = 100%;

   height = 100%;