[OpenLayers] OpenLayers 시작하기! (1) - 근데 이제 React와 Next를 곁들인..

지혜의 Devlog 📚·2021년 11월 22일
Reactnextjsopenlayers
3

[OpenLayers] OpenLayers 시작하기!

목록 보기
1/3

OpenLayers는 웹 브라우저에서 지도 데이터를 표시하기 위한 자바스크립트 라이브러리이다.
왜 때문인지.. OpenLayers에 관련한 공식 문서는 영어밖에 없을뿐더러, 블로그 포스팅도 많이 없어 처음 시작할 때 혼돈의 도가니탕이었다. 😵

그래서!!!! 나처럼 처음 시작하는 사람들이 쉽게 참고할 수 있게 기본적인 사용 방법을 포스팅 해 볼까한다. 근데 이제 React와 Next를 곁들인..

시작하기에 앞서 npm i ol / yarn add ol로 프로젝트에 추가해 주자!

🗺️ OpenLayers Map 생성

import 'ol/ol.css';
import { Map, View } from 'ol';
import { defaults } from 'ol/control';
import { fromLonLat, get } from 'ol/proj';
import { Tile } from 'ol/layer';
import { OSM, XYZ } from 'ol/source';

const map = new Map({ // ①
  controls: defaults({ zoom: false, rotate: false }).extend([]),
  layers: [ // ②
    new Tile({ // ③
      source: new OSM() // ④
    }),
    new Tile({
      name: 'Base',
      visible: true,
      source: new XYZ({ // ⑤
        url: `http://api.vworld.kr/req/wmts/1.0.0/${process.env.VWORLD_API_KEY}/Base/{z}/{y}/{x}.png` // ⑥
      })
    })
  ],
  target: 'map', // ⑦
  view: new View({ // ⑧
    projection: get('EPSG:3857'), // ⑨
    center: fromLonLat([126.30574134206182, 33.35570244202401], get('EPSG:3857')), // ⑩
    zoom: 14 // ⑪
  })
});

위 예제는 OpenLayers와 Vworld를 사용하여 가장 기본적인 Map을 렌더링 한 것이다.
중복과 옵션은 제외하고 필수 값들을 차근차근 살펴보겠다.

Vworld란?
Vworld는 2D/3D 기반의 다양한 국가공간정보 및 검색기능을 제공하는 오픈 API이다.
Vworld의 오픈 API를 사용하기 위하여 인증 key를 발급 받아야 하므로 회원가입이 필수다.
Vworld 웹 사이트로 이동 🏃‍♀️

1. new Map

  • Map 객체 생성으로 맵을 렌더링 하기 위해 뷰(view), 하나 이상의 레이어 및(layer) 대상 컨테이너(target) 필요

2. layer

  • layer를 정의하지 않으면 레이어가 없는 맵이 렌더링 됨
  • 레이어는 제공된 순서대로 렌더링

3. new Tile

  • 특정 해상도의 확대/축소 수준으로 구성된 격자로 미리 렌더링 된 타일 이미지를 제공하는 레이어 소스 용으로, source라는 필수 값 필요

4. source: new OSM()

  • OpenStreetMap 타일 서버의 레이어 소스
  • OpenStreetMap 이란?
    • 오픈 소스 방식의 참여형 무료 지도 서비스

(👉 OSM 타일이 적용된 지도 사진)

5. source: new XYZ({})

  • XYZ 타일이란?
    • 네이버나 다음 등의 지도는 이 방식으로 지도 서비스 중
    • 지도를 이루는, 자리가 정해진 작은 타일을 불러와 보도블록으로 인도를 채우듯이 지도를 완성하는 방식
    • x와 y는 지도를 구성하는 조각의 x좌표와 y좌표라는 뜻이며 z는 zoom의 약자로, 배율 의미

(👉 XYZ 타일이 적용된 지도 사진)

6. url: 'http://~'

  • XYZ 타일에 Vworld API를 사용하기 위해 Vworld에서 제공하는 WMTS Tile API 호출
    👉 Vworld WMTS API 공식문서 참고
  • ✔️ 가장 허탕을 쳤던 부분은 위 예제의 url처럼 {z}/{y}/{x}를 그대로 입력하면 되는데, z, y, x에 값을 넣어야 하는 줄 알고 구글 좌표를 엄청 찾아보았다..🤦🏻‍♀️🤦🏻‍♀️🤦🏻‍♀️ 이 부분은 후에 view에서 지정한 초기값으로 지정되고, 지도가 움직임에 따라 값이 자동으로 입력된다...🤦🏻‍♀️🤦🏻‍♀️🤦🏻‍♀️

7. target

  • ✔️ 지도 자체의 컨테이너 또는 요소의 컨테이너이며 element의 id값 지정
<div id = "map"></div>

8. view

  • 지도 보는 방식 설정
  • new View
    • 객체는 지도의 간단한 2D 뷰를 나타 냄
    • 지도의 중심, 해상도 및 회전을 변경하기 위해 수행할 객체

9. projection

  • 중심의 좌표계 결정 및 해상도 단위(픽셀 당 투영 단위) 결정
  • ✔️ 현재 우리는 OSM 지도를 베이스로 가져오며, 구글 지도의 경/위도를 사용할 것이기 때문에 EPSG:3857값으로 지정하였다.

📚 알아둘 것!

[전지구 좌표계]
전 세계를 한 번에 나타내야 할 때 많이 쓰이는 좌표계

  • 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(통칭)

10. center

  • 뷰의 초기 중심
  • 중심 좌표계는 projection 옵션으로 지정되며 기본값은 undefined
  • OpenLayers는 경도, 위도 순으로 좌표 입력
    • 위도: Latitude, 경도: Longitude
  • ✔️ fromLonLat() 메서드에 배열로 경도, 위도 순으로 좌표 값을 입력한 후 get() 메서드를 두 번째 인자로 넣으므로써 projection을 지정해 준다.

11. zoom

  • 뷰의 초기 해상도를 계산하는 데 사용되는 줌 레벨

이로써 가장 기본적인 map 생성을 알아보았다. 👏👏👏
(사실 5~6번의 XYZ 레이어는 기본적인 map은 아니므로 생략해도 된다. 근데 어차피 뒤에서 사용해야 함 ^^~어쩔티비📺 )

이처럼 OpenLayers로 생성한 Map 객체를 React + Next에 적용하는 방법은 다음 포스팅으로 돌아오겠다. 😉

profile
지혜의 Devlog 📚
다음 포스트

[OpenLayers] OpenLayers 시작하기! (2) - 근데 이제 React와 Next를 곁들인..

0개의 댓글