구글이나 카카오 지도 API등을 이용하지 않고 GIS를 개발해야 했다. (아마 비용 문제...)
이런 이유로 만나게 된 openlayers!
지도 기반 서비스를 개발할 수 있도록 도와주는 오픈 소스 라이브러리다.
공식 문서의 예제들은 바닐라 자바스크립트라서 리액트에 맞게 변형하여 적용해야 했다.
지리 그 자체에 나약한 나라서 걱정이 좀 된다...☆ ㉨1乙I㈓보。☆
우선 하나 하나 기록해보고자 한다.
우선 간단하게 CRA로 리액트 프로젝트를 생성한다.
그 뒤, yarn add ol 또는 npm install ol로 라이브러리를 설치한다.
타입스크립트라면 @types/ol도 설치해야 한다.
이제 지도를 표출할 컴포넌트에 필요한 모듈을 임포트 해주자.
// MapTest.jsx
import React, { useEffect, useRef } from "react";
import { Map as OlMap, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import { fromLonLat, get as getProjection } from "ol/proj";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { XYZ, Vector as VectorSource } from "ol/source";
import "ol/ol.css";
Map은 자료구조 Map과 겹칠 거 같아서 이름을 수정했다.
export default function MapTest() {
// OlMap 타겟 지정을 위해 사용 (id를 지정 대신)
const mapContent = useRef(null);
// 추후 객체를 추가하기 위한 레이어(점, 선, 도형)
const initVectorLayer = new VectorLayer({
source: new VectorSource(),
});
useEffect(() => {
if (!mapContent.current) {
return;
}
const map = new OlMap({
controls: defaultControls({ zoom: false, rotate: false }).extend([]),
layers: [
new TileLayer({
source: new XYZ({ url: "http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png" }),
}),
initVectorLayer,
],
view: new View({
projection: getProjection("EPSG:3857"),
center: fromLonLat([127.296364, 37.503429]),
zoom: 15,
minZoom: 7,
maxZoom: 20,
}),
target: mapContent.current,
});
return () => map.setTarget(undefined);
}, []);
return (
<div className="gis-map-wrap">
<div ref={mapContent}></div>
</div>
);
}
! 맵이 그려질 div의 크기(width, height)가 꼭! 정해져야 한다.
그려진 지도에 객체를 그려보자...!