OpenLayers3 튜토리얼 : Basic Concepts

웹에 대한 지식을 쌓을 겸 구글링할 때, 영여 원문을 번역해놓은 글을 보고 도움을 많이 받았었다.

비록 쉬운 내용이지만, 그냥 읽는 것 보다 글로 쓰면 기억에 잘 남고,

그리고, 미래의 내가(?) 읽고나서 짧은 시간 안에 파악할 수 있도록 내용을 정리할 겸 아래에 내용을 작성하였다.

이해를 위해 조금 해석해서 다시 적기도 하고, 이해가 안되는 부분은 본문을 첨부하였다.

원본 출처는 아래 링크 입니다.

OpenLayers3 튜토리얼 - Basic Concepts

Map

- Map은 OpenLayers3의 핵심 컴포넌트 (ol.Map)

- target에 요소의 id를 입력하면, 해당 요소 위에 지도를 렌더링함 (예를 들면, 웹 페이지 div 요소에 올릴 수 있음)

- Map의 모든 속성은 생성할 때나 setter 메소드를 이용하여 설정 할 수 있음 (예를 들면, setTarget())

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  var map = new ol.Map({target: 'map'});
</script>

View 

  map.setView(new ol.View({
    center: [0, 0],
    zoom: 2
  }));

- View는 Map의 center, 줌 레벨 및 projection(투영)에 대한 속성을 가지고 있음

- projection(투영)은 center에 대한 좌표계와 좌표계산을 위한 해상도(resolution)를 결정

- center의 기본 값(혹은 값이 [0, 0] 일 때)은 Spherical Mercator (EPSG:3857) (단위: m)

- zoom 옵션은 지도의 해상도를 결정함.

- zoom 옵션은 maxZoom(default:28), zoomFactor(default:2). maxResolution으로 결정됨

- 기본값은 투영의 유효 범위는 256 * 256 픽셀 타일에 맞는 방식으로 계산됨

(default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile)

- 줌 레벨은 maxResolution(단위: px) 해상도에 대하여 0부터 시작함.

- 그 다음의 줌 레벨은 maxZoom레벨에 도달 할 때까지 zoomFactor와 이전의 줌 레벨의 해상도를 나누어 계산된다.

(더보기 - 공식 API 문서 원문)

Source

- ol.source.Source 클래스는 자료에 사용된다.

- OpenStreetMap이나 Bing Map 등 무료 혹은 상업용 지도를 올릴 수 있다.

- OGC 표준인 WMS나 WMTS 및 GeoJSON, KML 같은 vector 데이터에도 사용된다.

  var osmSource = new ol.source.OSM();

Layer

- 레이어는 source의 자료를 도시한다. 

- OpenLayers3 에서는 다음 3가지 레이어를 사용한다. : ol.layer.Tile, ol.layer.Image, ol.layer.Vector

- ol.layer.Tile은 이미 렌더링된(pre-rendered) 레이어 자료를 제공하기 위한 것이다. 타일화된 이미지는 특정 해상도에 대한 줌 레벨이 설정된 그리드에 들어있다.

- ol.layer.Image은 서버에서 렌더링된 임의의 크기나 해상도의 이미지를 위한 것이다.

- ol.layer.Vector는 클라이언트에서 렌더링하는 벡터 데이터를 위한 것이다. 

  var osmLayer = new ol.layer.Tile({source: osmSource});
  map.addLayer(osmLayer);

Putting it all together

위의 코드 조각들을 합쳐 레이어와 뷰가 설정된 독립적인 지도를 만들 수 있다.

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  new ol.Map({
    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map'
  });
</script>

This documentation CC BY 3.0