Setup

Installation page를 참고해 라이브러리를 설치해주세요.
아래 코드와 같이 배치해 사용하세요.

App.tsx
import "react-openlayers7/dist/index.css";

스타일을 import 해야합니다.

Live Editor

<MapContainer center={[126.840884, 35.190816]} width="100%" height="500px">
  <TileLayer url="https://tgxe79f6wl.execute-api.ap-northeast-2.amazonaws.com/dev/dev-drone-square-bucket/public/1/manifold/orthomosaic_tiles/{z}/{x}/{y}.png" />
  <LayerGroup zIndex={1}>
    <CustomPolygon
      positions={[
        [
          [126.840884, 35.190816],
          [126.840676, 35.190419],
          [126.840804, 35.190333],
          [126.841068, 35.190581],
          [126.840884, 35.190816],
        ],
      ]}
    >
      <InnerText>Marker</InnerText>
    </CustomPolygon>
  </LayerGroup>
</MapContainer>

Result