Openlayers
오픈 소스 자바스크립트 라이브러리로, 다양한 종류의 인터랙티브 지도를 웹 페이지에 구현할 수 있는 도구
다양한 지리 정보를 시각적으로 표현하고, 지도 위에 다양한 요소를 추가하여 사용자가 지리 정보를 탐색하고 분석이 가능하다
설치 방법
npm install ol
yarn add ol맵 객체에는 다양한 객체가 있다. 이 객체들이 서로 모여서 하나의 상호작용 가능한 맵이 구현된다. 이 객체들을 잘 알아여 원하는 정보에 따라 어떤 객체에 접근해야하는지 알 수 있다.
- Feature : 점, 선, 면과 같은 요소 (백터 레이어 한정)
- source : 레이어 데이터의 원천. Feature의 모음
- Layer : 데이터의 원천을 토대로 정의한 데이터 셋
- View : 사용자가 현재 맵을 바라보는 방식의 정보
import { useEffect, useRef } from 'react'
import { Map as OlMap, View } from 'ol';
import { fromLonLat } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import { OSM } from 'ol/source';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { defaults } from 'ol/control/defaults';
export default function App() {
const mapRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const tilelayer = new TileLayer({
source: new OSM({ attributions: '' })
});
const view = new View({
center: fromLonLat([126.9783785, 37.5666612]), // 서울시청 경도와 위도
zoom: 14
})
const map = new OlMap({
controls: defaults({ zoom: false, rotate: false, attribution: false }),
layers: [
tilelayer
],
view: view,
})
map.setTarget(mapRef.current || '')
return () => {
map.setTarget('');
};
}, []);
return <div ref={mapRef} />
}해당 코드는 서울시청을 중심으로 렌더링되는 Map이다.
Map 객체
Map 객체는 자바스크립트 Map 객체와 혼란을 방지하기 위해 OlMap으로 호출하였다. 생성된 Map 객체는 useRef를 사용하여 DOM 요소를 참조하고, 참조된 DOM 요소에 Map 객체가 렌더링 되게된다.
Layer
source를 담을 객체이다. layer가 없으면 레이어가 없는 맵이 렌더링되며, 제공된 순서대로 렌더링이 된다.
OSM (OpenStreetMap)
오픈소스 기반의 무료 지도 서비스. 사용자들이 지도 데이터를 생성하고 수정할 수 있는 협업 지도 프로젝트. 이는 전 세계적으로 도로, 경로, 관광 명소, 건물 등의 지리적 정보를 수집하고 저장하는 데 사용.
view
지도 보는 방식을 설정. new View 객체는 간단한 2D뷰를 나타낸다.
해당코드에서는 지도의 중심과 줌레벨을 설정하였다.
참고
no risk no fun