특정 지도 영역에 이미지를 표시하는 지상 오버레이 컴포넌트

NaverMapGroundOverlay

지도의 특정 영역(Region)에 이미지를 덮어씌우는 오버레이입니다. 특정 구역에 커스텀 배경 이미지나 지도 타일을 표시할 때 유용합니다.

임포트

import { NaverMapGroundOverlay } from '@boostbrothers/react-native-naver-map';

기본 사용법

<NaverMapView
  style={{ flex: 1 }}
  initialCamera={{ latitude: 37.52, longitude: 126.93, zoom: 13 }}
>
  <NaverMapGroundOverlay
    region={{
      latitude: 37.50,
      longitude: 126.90,
      latitudeDelta: 0.04,
      longitudeDelta: 0.06,
    }}
    image={require('./assets/overlay-map.png')}
  />
</NaverMapView>

Props

기본 오버레이 Props (BaseOverlayProps)

Prop	타입	기본값	설명
`zIndex`	`number`	`0`	보조 Z 인덱스
`globalZIndex`	`number`	`-300000`	전역 Z 인덱스
`isHidden`	`boolean`	-	숨김 여부
`minZoom`	`number`	`0`	표시 최소 줌 레벨
`maxZoom`	`number`	`21`	표시 최대 줌 레벨
`isMinZoomInclusive`	`boolean`	-	최소 줌 포함 여부
`isMaxZoomInclusive`	`boolean`	-	최대 줌 포함 여부
`onTap`	`() => void`	-	탭 이벤트

지상 오버레이 Props

Prop	타입	기본값	설명
`image`	`MapImageProp`	-	표시할 이미지 (필수)
`region`	`Region`	-	이미지를 표시할 영역 (필수)

image와 region은 필수 속성입니다. 둘 중 하나라도 지정하지 않으면 오버레이가 지도에 추가되지 않습니다.

Region 설명

지상 오버레이의 region은 이미지가 덮을 지도 영역을 나타냅니다.

interface Region {
  latitude: number;      // south-west 지점의 위도 (더 작은 위도)
  longitude: number;     // south-west 지점의 경도 (더 작은 경도)
  latitudeDelta: number; // 위도 범위 (항상 양수)
  longitudeDelta: number; // 경도 범위 (항상 양수)
}

예를 들어, 위도 37.50 ~ 37.54, 경도 126.90 ~ 126.96 영역에 이미지를 표시하려면:

region={{
  latitude: 37.50,
  longitude: 126.90,
  latitudeDelta: 0.04,   // 37.54 - 37.50
  longitudeDelta: 0.06,  // 126.96 - 126.90
}}

이미지 타입

지상 오버레이도 MapImageProp 타입을 사용합니다.

// 로컬 이미지
image={require('./assets/area-overlay.png')}

// 네트워크 이미지
image={{ httpUri: 'https://example.com/area-image.png' }}

// 네이티브 에셋
image={{ assetName: 'overlay_image' }}

사용 예제

커스텀 지도 타일 오버레이

<NaverMapView
  style={{ flex: 1 }}
  initialCamera={{ latitude: 37.52, longitude: 126.93, zoom: 14 }}
>
  <NaverMapGroundOverlay
    region={{
      latitude: 37.50,
      longitude: 126.90,
      latitudeDelta: 0.04,
      longitudeDelta: 0.06,
    }}
    image={{ httpUri: 'https://example.com/custom-map-tile.png' }}
    zIndex={10}
    minZoom={12}
    maxZoom={16}
    onTap={() => console.log('지상 오버레이 탭')}
  />
</NaverMapView>

특정 구역 강조 이미지

// 행사 구역에 안내 이미지 표시
<NaverMapGroundOverlay
  region={{
    latitude: 37.5140,
    longitude: 126.9690,
    latitudeDelta: 0.005,
    longitudeDelta: 0.008,
  }}
  image={require('./assets/event-area-guide.png')}
  globalZIndex={-100000}
/>

NaverMapGroundOverlay

지도의 특정 영역(Region)에 이미지를 덮어씌우는 오버레이입니다. 특정 구역에 커스텀 배경 이미지나 지도 타일을 표시할 때 유용합니다.

임포트

import { NaverMapGroundOverlay } from '@boostbrothers/react-native-naver-map';

기본 사용법

<NaverMapView
  style={{ flex: 1 }}
  initialCamera={{ latitude: 37.52, longitude: 126.93, zoom: 13 }}
>
  <NaverMapGroundOverlay
    region={{
      latitude: 37.50,
      longitude: 126.90,
      latitudeDelta: 0.04,
      longitudeDelta: 0.06,
    }}
    image={require('./assets/overlay-map.png')}
  />
</NaverMapView>

Props

기본 오버레이 Props (BaseOverlayProps)

Prop	타입	기본값	설명
`zIndex`	`number`	`0`	보조 Z 인덱스
`globalZIndex`	`number`	`-300000`	전역 Z 인덱스
`isHidden`	`boolean`	-	숨김 여부
`minZoom`	`number`	`0`	표시 최소 줌 레벨
`maxZoom`	`number`	`21`	표시 최대 줌 레벨
`isMinZoomInclusive`	`boolean`	-	최소 줌 포함 여부
`isMaxZoomInclusive`	`boolean`	-	최대 줌 포함 여부
`onTap`	`() => void`	-	탭 이벤트

지상 오버레이 Props

Prop	타입	기본값	설명
`image`	`MapImageProp`	-	표시할 이미지 (필수)
`region`	`Region`	-	이미지를 표시할 영역 (필수)

image와 region은 필수 속성입니다. 둘 중 하나라도 지정하지 않으면 오버레이가 지도에 추가되지 않습니다.

Region 설명

지상 오버레이의 region은 이미지가 덮을 지도 영역을 나타냅니다.

interface Region {
  latitude: number;      // south-west 지점의 위도 (더 작은 위도)
  longitude: number;     // south-west 지점의 경도 (더 작은 경도)
  latitudeDelta: number; // 위도 범위 (항상 양수)
  longitudeDelta: number; // 경도 범위 (항상 양수)
}

예를 들어, 위도 37.50 ~ 37.54, 경도 126.90 ~ 126.96 영역에 이미지를 표시하려면:

region={{
  latitude: 37.50,
  longitude: 126.90,
  latitudeDelta: 0.04,   // 37.54 - 37.50
  longitudeDelta: 0.06,  // 126.96 - 126.90
}}

이미지 타입

지상 오버레이도 MapImageProp 타입을 사용합니다.

// 로컬 이미지
image={require('./assets/area-overlay.png')}

// 네트워크 이미지
image={{ httpUri: 'https://example.com/area-image.png' }}

// 네이티브 에셋
image={{ assetName: 'overlay_image' }}

사용 예제

커스텀 지도 타일 오버레이

<NaverMapView
  style={{ flex: 1 }}
  initialCamera={{ latitude: 37.52, longitude: 126.93, zoom: 14 }}
>
  <NaverMapGroundOverlay
    region={{
      latitude: 37.50,
      longitude: 126.90,
      latitudeDelta: 0.04,
      longitudeDelta: 0.06,
    }}
    image={{ httpUri: 'https://example.com/custom-map-tile.png' }}
    zIndex={10}
    minZoom={12}
    maxZoom={16}
    onTap={() => console.log('지상 오버레이 탭')}
  />
</NaverMapView>

특정 구역 강조 이미지

// 행사 구역에 안내 이미지 표시
<NaverMapGroundOverlay
  region={{
    latitude: 37.5140,
    longitude: 126.9690,
    latitudeDelta: 0.005,
    longitudeDelta: 0.008,
  }}
  image={require('./assets/event-area-guide.png')}
  globalZIndex={-100000}
/>

NaverMapGroundOverlay

NaverMapGroundOverlay

임포트

기본 사용법

Props

기본 오버레이 Props (BaseOverlayProps)

지상 오버레이 Props

Region 설명

이미지 타입

사용 예제

커스텀 지도 타일 오버레이

특정 구역 강조 이미지

On this page

NaverMapGroundOverlay

NaverMapGroundOverlay

임포트

기본 사용법

Props

기본 오버레이 Props (BaseOverlayProps)

지상 오버레이 Props

Region 설명

이미지 타입

사용 예제

커스텀 지도 타일 오버레이

특정 구역 강조 이미지

On this page