OpenLayers
: 오픈 소스에서 제공하는 웹 브라우저에서 지도 데이터를 표시하기 위한 자바스크립트 라이브러리
OpenLayers 구글링이 힘들어 직접 작성하는 글 ^^,,,, 누군가한테 도움이 되기를 바라며 🙏
✨ 오늘의 목표 !
✔ 화면에 지도 띄우기 (지도 - vworld API 사용)
npx create-react-app openlayers (openlayers = 프로젝트명) // 프로젝트명은 소문자로만!
cd openlayers
npm start
yarn add ol
// src>Map>MapContext.js (Map 폴더를 추가하여 그 안에 .js 파일로 추가해주었다.)
import React from "react";
const MapContext = new React.createContext({});
export default MapContext;
// src>Map>Map.jsx
import React, { useState, useEffect } from 'react'
import MapContext from './MapContext'
import 'ol/ol.css'
import { Map as OlMap, View } from 'ol'
import { defaults as defaultControls, FullScreen } from 'ol/control'
import { fromLonLat, get as getProjection } from 'ol/proj'
import { Tile as TileLayer } from 'ol/layer'
import { XYZ } from 'ol/source'
import {
DragRotateAndZoom,
defaults as defaultInteractions,
} from 'ol/interaction'
const Map = ({ children }) => {
const [mapObj, setMapObj] = useState({})
useEffect(() => {
//Map 객체 생성 및 vworld 지도 설정
const map = new OlMap({
controls: defaultControls({ zoom: false, rotate: false }).extend([
new FullScreen(),
]),
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
layers: [
new TileLayer({
source: new XYZ({ //인증키는 vworld에서 발급 가능
url: 'http://api.vworld.kr/req/wmts/1.0.0/인증키/Base/{z}/{y}/{x}.png',
}),
}),
],
target: 'map',
view: new View({
projection: getProjection('EPSG:3857'),
center: fromLonLat(
[126.9779228388393, 37.56643948208262], //[경도, 위도] 값 설정! 필자는 시청으로 설정
getProjection('EPSG:3857')
),
zoom: 15,
}),
})
setMapObj({ map })
return () => map.setTarget(undefined)
}, [])
return <MapContext.Provider value={mapObj}>{children}</MapContext.Provider>
}
export default Map
// src>Map>index.js
export {default} from "./Map"
// src>index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Map from './Map'; //context.Provider를 가져옴
ReactDOM.render(
<React.StrictMode>
<Map> //provider에 저장된 객체를 사용하기 위해 APP을 감쌌다.
<App />
</Map>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
// src>App.js
import logo from './logo.svg'
import './App.css'
import { useContext, useState } from 'react'
import MapContext from './Map/MapContext'
function App() {
const { map } = useContext(MapContext)
return (
<>
<div id="map" style={{ position: 'relative', width: '100%', height: '100vh' }}>
</div>
</>
)
}
export default App
🔽 완성화면 (왼쪽 상단에 버튼들 구현은 다음시간에 ^____^)
감사합니다.^^ 큰도움 되었습니다.