🙆🏻‍♀️ 함수형 컴포넌트 맵 표출 🙆🏻‍♀️

Openlayers?

구글이나 카카오 지도 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>
  );
}

• control: 줌 버튼 등의 기본 설정을 끈다.
• layers: 지도에 사용될 레이어 설정. 우리에게 친숙한 지도를 사용하기 위해 Vworld의 API를 사용했다. initVectorLayer는 객체가 그려질 레이어다.
• view: 지도의 보기 방식을 설정할 수 있다. (zoom의 정도, 기준점, 좌표계 등)
• target: 지도가 그려질 공간

! 맵이 그려질 div의 크기(width, height)가 꼭! 정해져야 한다.

다음은...🤔

그려진 지도에 객체를 그려보자...!

Openlayers 공식 사이트