문서 / 설정 / React / Leaflet

Leaflet 설정

Web에서 Leaflet을 MapConductor에서 쓰는 절차입니다. 키는 불필요하고, 래스터 타일을 가볍게 표시하고 싶을 때에 맞습니다.

PACKAGE

react-for-leaflet

API KEY

불필요

CSS

필요

3D CAMERA

의사

데모 보기매장 지도 · React ↗

시작하기 전에

Node.js 18 이상

React 18 또는 19

STEP 01

설치한다

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

terminalnpm

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

STEP 02

스타일시트를 읽어 들인다

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

main.tsxTypeScript

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

STEP 03

타일의 출처를 정한다

기본의 LeafletDesign.OpenStreetMap은 OpenStreetMap의 공개 타일을 쓰고, 귀속 표시도 함께 가집니다.

주의

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

동작 확인

여기까지 보이면 완료

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

LeafletMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LeafletDesign, LeafletMapView, useLeafletMapViewState } from '@mapconductor/react-for-leaflet';
import '@mapconductor/react-for-leaflet/style.css';

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

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

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

지도 디자인

LeafletDesign은 타일 URL 템플릿을 감싼 상수입니다. 자체 타일을 쓰는 경우는 같은 타입을 조립합니다.

LeafletDesign

Notes

OpenStreetMap

OSM의 표준 타일. 귀속 표시 포함, 최대 줌 19

None

베이스 타일 없음. 오버레이만 그리고 싶을 때

잘 안 될 때

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

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

지도의 위치가 무너진다

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

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

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

3D 표시가 필요하다면 MapLibre나 Cesium을, 투영법을 엄밀하게 다루고 싶다면 OpenLayers를 검토해 주세요.