NaverMapPathOverlay

좌표 배열을 연결하는 경로선을 표시합니다. 지나온 경로와 지나갈 경로를 다른 색상으로 구분하는 진척률(progress) 기능과 외곽선, 패턴 이미지를 지원합니다.

임포트

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

기본 사용법

<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.5, longitude: 126.9, zoom: 12 }}>
  <NaverMapPathOverlay
    coords={[
      { latitude: 37.5, longitude: 126.9 },
      { latitude: 37.52, longitude: 126.92 },
      { latitude: 37.54, longitude: 126.94 },
    ]}
    width={5}
    color="blue"
    progress={0.5}
    passedColor="gray"
  />
</NaverMapView>

Props

기본 오버레이 Props (BaseOverlayProps)

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

경로 Props

Prop	타입	기본값	설명
`coords`	`Coord[]`	-	좌표 배열 (필수, 최소 2개)
`width`	`number`	`1`	경로선 두께 (dp/pt)
`color`	`ColorValue`	`'black'`	지나갈 경로 색상
`passedColor`	`ColorValue`	`'black'`	지나온 경로 색상
`outlineWidth`	`number`	`0`	외곽선 두께 (0 = 미표시)
`outlineColor`	`ColorValue`	`'black'`	지나갈 경로 외곽선 색상
`passedOutlineColor`	`ColorValue`	`'black'`	지나온 경로 외곽선 색상
`progress`	`number`	`0`	진척률 (-1 ~ 1)
`patternImage`	`MapImageProp`	-	패턴 이미지
`patternInterval`	`number`	`0`	패턴 이미지 간격 (0 = 미표시)

겹침 처리

Prop	타입	기본값	설명
`isHideCollidedSymbols`	`boolean`	`false`	겹치는 지도 심벌 숨김
`isHideCollidedMarkers`	`boolean`	`false`	겹치는 마커 숨김
`isHideCollidedCaptions`	`boolean`	`false`	겹치는 마커 캡션 숨김

진척률 (progress)

progress 속성은 -1 ~ 1 범위의 값으로 경로를 지나온 구간과 지나갈 구간으로 나눕니다.

양수 (0 ~ 1): 첫 좌표부터 progress 비율만큼 지점까지가 지나온 경로
음수 (-1 ~ 0): 마지막 좌표부터 -progress 비율만큼 지점까지가 지나온 경로
0: 전체가 지나갈 경로

<NaverMapPathOverlay
  coords={coords}
  progress={0.6}           // 60% 지점까지 지나온 경로
  color="#0066FF"          // 지나갈 경로 색상
  passedColor="#CCCCCC"    // 지나온 경로 색상
/>

coords 배열은 최소 2개의 좌표를 포함해야 합니다. 미만이면 컴포넌트가 렌더링되지 않습니다.

패턴 이미지

경로선 위에 반복되는 패턴 이미지를 표시할 수 있습니다.

<NaverMapPathOverlay
  coords={coords}
  width={10}
  patternImage={require('./assets/arrow-pattern.png')}
  patternInterval={30}
/>

사용 예제

네비게이션 경로

const routeCoords = [
  { latitude: 37.5666102, longitude: 126.9783881 },
  { latitude: 37.5700, longitude: 126.9820 },
  { latitude: 37.5750, longitude: 126.9870 },
  { latitude: 37.5800, longitude: 126.9900 },
];

<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.57, longitude: 126.985, zoom: 13 }}>
  <NaverMapPathOverlay
    coords={routeCoords}
    width={8}
    color="#0066FF"
    passedColor="#AAAAAA"
    outlineWidth={2}
    outlineColor="white"
    progress={0.4}
    onTap={() => console.log('경로 탭')}
  />
</NaverMapView>

NaverMapPathOverlay

임포트

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

기본 사용법

<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.5, longitude: 126.9, zoom: 12 }}>
  <NaverMapPathOverlay
    coords={[
      { latitude: 37.5, longitude: 126.9 },
      { latitude: 37.52, longitude: 126.92 },
      { latitude: 37.54, longitude: 126.94 },
    ]}
    width={5}
    color="blue"
    progress={0.5}
    passedColor="gray"
  />
</NaverMapView>

Props

기본 오버레이 Props (BaseOverlayProps)

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

경로 Props

Prop	타입	기본값	설명
`coords`	`Coord[]`	-	좌표 배열 (필수, 최소 2개)
`width`	`number`	`1`	경로선 두께 (dp/pt)
`color`	`ColorValue`	`'black'`	지나갈 경로 색상
`passedColor`	`ColorValue`	`'black'`	지나온 경로 색상
`outlineWidth`	`number`	`0`	외곽선 두께 (0 = 미표시)
`outlineColor`	`ColorValue`	`'black'`	지나갈 경로 외곽선 색상
`passedOutlineColor`	`ColorValue`	`'black'`	지나온 경로 외곽선 색상
`progress`	`number`	`0`	진척률 (-1 ~ 1)
`patternImage`	`MapImageProp`	-	패턴 이미지
`patternInterval`	`number`	`0`	패턴 이미지 간격 (0 = 미표시)

겹침 처리

Prop	타입	기본값	설명
`isHideCollidedSymbols`	`boolean`	`false`	겹치는 지도 심벌 숨김
`isHideCollidedMarkers`	`boolean`	`false`	겹치는 마커 숨김
`isHideCollidedCaptions`	`boolean`	`false`	겹치는 마커 캡션 숨김

진척률 (progress)

progress 속성은 -1 ~ 1 범위의 값으로 경로를 지나온 구간과 지나갈 구간으로 나눕니다.

양수 (0 ~ 1): 첫 좌표부터 progress 비율만큼 지점까지가 지나온 경로
음수 (-1 ~ 0): 마지막 좌표부터 -progress 비율만큼 지점까지가 지나온 경로
0: 전체가 지나갈 경로

<NaverMapPathOverlay
  coords={coords}
  progress={0.6}           // 60% 지점까지 지나온 경로
  color="#0066FF"          // 지나갈 경로 색상
  passedColor="#CCCCCC"    // 지나온 경로 색상
/>

coords 배열은 최소 2개의 좌표를 포함해야 합니다. 미만이면 컴포넌트가 렌더링되지 않습니다.

패턴 이미지

경로선 위에 반복되는 패턴 이미지를 표시할 수 있습니다.

<NaverMapPathOverlay
  coords={coords}
  width={10}
  patternImage={require('./assets/arrow-pattern.png')}
  patternInterval={30}
/>

사용 예제

네비게이션 경로

const routeCoords = [
  { latitude: 37.5666102, longitude: 126.9783881 },
  { latitude: 37.5700, longitude: 126.9820 },
  { latitude: 37.5750, longitude: 126.9870 },
  { latitude: 37.5800, longitude: 126.9900 },
];

<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.57, longitude: 126.985, zoom: 13 }}>
  <NaverMapPathOverlay
    coords={routeCoords}
    width={8}
    color="#0066FF"
    passedColor="#AAAAAA"
    outlineWidth={2}
    outlineColor="white"
    progress={0.4}
    onTap={() => console.log('경로 탭')}
  />
</NaverMapView>

NaverMapPathOverlay

NaverMapPathOverlay

임포트

기본 사용법

Props

기본 오버레이 Props (BaseOverlayProps)

경로 Props

겹침 처리

진척률 (progress)

패턴 이미지

사용 예제

네비게이션 경로

On this page

NaverMapPathOverlay

NaverMapPathOverlay

임포트

기본 사용법

Props

기본 오버레이 Props (BaseOverlayProps)

경로 Props

겹침 처리

진척률 (progress)

패턴 이미지

사용 예제

네비게이션 경로

On this page