리액트로 오픈레이어(OpenLayers) 지도 띄우기

오픈레이어스(Openlayers)는 지도관련 라이브러리고 네이버지도와 구글지도 같은 기능을 구현할 수 있습니다.

개발하는 프로젝트의 소스가 리엑트(React)를 사용해서 리엑트(React)에 오픈레이어스(OpenLayers)를 다음과 같이 적용하였습니다.

1. NPM 명령어로 ol을 Install한다.
   npm install ol

2. map 파일을 생성

import React, { Fragment, useEffect } from 'react';
import { OSM } from 'ol/source';
import { Map as OlMap, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer'; //지도타일
import { fromLonLat, get as getProjection } from 'ol/proj'; //위경도
import 'ol/ol.css'; //스타일

const Map = (props) => {

    useEffect(() => {
        //지도 선언
        const map = new OlMap({
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                projection: getProjection('EPSG:3857'),
                center: fromLonLat([126.752, 37.4713], getProjection('EPSG:3857')),
                zoom: 15
            }),
            target: 'map',
        })
    }, [])

    return (
        <Fragment>
            <div id="map" style={{height:'100%', width:'100%'}}>
            </div>
        </Fragment>
    );
};

export default Map

3. 다른 화면에서 사용할 때 예시

import Map from '@/map/map.jsx';

const test = () => {
    
    return (
        <div>
            <Map></Map>
        </div>
    );
}

Reference
https://openlayers.org/