문서 / 설정 / React / OpenLayers

OpenLayers 설정

Web에서 OpenLayers를 MapConductor에서 쓰는 절차입니다. 키는 불필요하고, 투영법이나 타일 소스를 세밀하게 제어하고 싶을 때에 맞습니다.

PACKAGE

react-for-openlayers

API KEY

불필요

CSS

필요

3D CAMERA

의사

데모 보기매장 지도 · React ↗

시작하기 전에

Node.js 18 이상

React 18 또는 19

STEP 01

설치한다

ol은 패키지에 동봉되어 있습니다.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-openlayers

STEP 02

스타일시트를 읽어 들인다

앱의 엔트리 포인트에서 한 번만 읽어 들입니다. 잊으면 지도의 위치나 컨트롤의 겉모습이 무너집니다.

main.tsxTypeScript

import '@mapconductor/react-for-openlayers/style.css';

STEP 03

타일 소스를 정한다

OpenLayersDesign은 OpenLayers의 TileSource를 감싼 상수입니다. 기본의 OpenStreetMap은 ol의 OSM 소스를 쓰고, 귀속 표시도 가집니다.

주의

OpenStreetMap의 공개 타일 서버에는 이용 정책이 있습니다. 본번 트래픽을 흘려보내는 경우는, 자체 타일 배포나 상용 서비스를 써 주세요.

동작 확인

여기까지 보이면 완료

지도가 나오면 완료입니다.

OpenLayersMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { OpenLayersDesign, OpenLayersMapView, useOpenLayersMapViewState } from '@mapconductor/react-for-openlayers';
import '@mapconductor/react-for-openlayers/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function OpenLayersMap() {
  const state = useOpenLayersMapViewState({
    mapDesignType: OpenLayersDesign.OpenStreetMap,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <OpenLayersMapView state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </OpenLayersMapView>
  );
}

지도 디자인

OpenLayersDesign은 ol의 TileSource를 감싼 상수입니다.

OpenLayersDesign

Notes

OpenStreetMap

ol의 OSM 소스. 귀속 표시 포함

None

베이스 타일 없음

잘 안 될 때

기울기나 회전이 듣지 않는다

OpenLayers에는 네이티브의 3D 카메라가 없습니다. MapConductor는 tilt와 bearing을 CSS의 3D 변환으로 근사하고 있습니다. 겉모습만의 효과입니다.

지도의 위치가 무너진다

style.css를 읽어 들이고 있는지 확인합니다.

개발 시에만 지도가 이중으로 초기화된다

React StrictMode는 effect를 2번 실행합니다. 각 프로바이더는 이것을 감지해 한쪽을 파기하도록 되어 있으므로, StrictMode를 뺄 필요는 없습니다.

OpenLayers의 네이티브 기능이 필요해지면, MapViewHolder에서 ol의 Map 인스턴스를 꺼내 직접 조작할 수 있습니다.