티스토리 뷰



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


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


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


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



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


OpenLayers3 튜토리얼 - Basic Concepts




Map


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

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

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


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



View 


1
2
3
4
  map.setView(new ol.View({
    center: [00],
    zoom: 2
  }));

cs


- 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 데이터에도 사용된다.


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


Layer


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

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

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

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

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


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



Putting it all together


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


1
2
3
4
5
6
7
8
9
10
11
12
13
<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: [00],
      zoom: 2
    }),
    target: 'map'
  });
</script>
cs







This documentation CC BY 3.0

'컴퓨터 > JavaScript' 카테고리의 다른 글

OpenLayers3 튜토리얼 : Basic Concepts  (0) 2016.07.20
댓글
댓글쓰기 폼
공지사항
Total
135,130
Today
14
Yesterday
201
«   2019/09   »
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          
글 보관함