NaverMapMultiPathOverlay

여러 구간으로 나뉜 경로선을 표시하며, 각 구간마다 다른 색상을 지정할 수 있습니다. 교통 상황별 경로 색상 표시나 구간별 특성을 시각화할 때 유용합니다.

임포트

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

기본 사용법

<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.52, longitude: 126.92, zoom: 12 }}>
  <NaverMapMultiPathOverlay
    pathParts={[
      {
        coords: [
          { latitude: 37.50, longitude: 126.90 },
          { latitude: 37.52, longitude: 126.92 },
        ],
        color: '#00AA00',       // 지나갈 경로 (초록 = 원활)
        passedColor: '#AAAAAA', // 지나온 경로
      },
      {
        coords: [
          { latitude: 37.52, longitude: 126.92 },
          { latitude: 37.54, longitude: 126.94 },
        ],
        color: '#FFAA00',       // 지나갈 경로 (주황 = 서행)
        passedColor: '#AAAAAA',
      },
      {
        coords: [
          { latitude: 37.54, longitude: 126.94 },
          { latitude: 37.56, longitude: 126.96 },
        ],
        color: '#FF0000',       // 지나갈 경로 (빨강 = 정체)
        passedColor: '#AAAAAA',
      },
    ]}
    width={8}
    progress={0.4}
  />
</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	타입	기본값	설명
`pathParts`	`MultiPathPart[]`	-	경로 구간 배열 (필수)
`width`	`number`	`1`	선 두께 (dp/pt)
`outlineWidth`	`number`	`0`	외곽선 두께
`progress`	`number`	`0`	진척률 (0 ~ 1)
`patternImage`	`MapImageProp`	-	패턴 이미지
`patternInterval`	`number`	`0`	패턴 간격

겹침 처리

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

MultiPathPart 타입

각 구간은 MultiPathPart 객체로 정의합니다.

interface MultiPathPart {
  coords: Coord[];           // 구간 좌표 (최소 2개)
  color?: ColorValue;        // 지나갈 경로 색상 (기본: 'black')
  passedColor?: ColorValue;  // 지나온 경로 색상 (기본: 'black')
  outlineColor?: ColorValue; // 지나갈 외곽선 색상 (기본: 'black')
  passedOutlineColor?: ColorValue; // 지나온 외곽선 색상 (기본: 'black')
}

각 구간(pathParts)의 coords는 최소 2개의 좌표를 포함해야 합니다. 어느 한 구간이라도 조건을 만족하지 않으면 전체 컴포넌트가 렌더링되지 않습니다.

인접한 구간의 끝 좌표와 다음 구간의 시작 좌표를 동일하게 설정하면 구간이 연속적으로 이어집니다.

사용 예제

교통 상황별 경로

// 실시간 교통 정보 기반 경로 표시
const trafficRoute = [
  {
    coords: [
      { latitude: 37.5000, longitude: 126.9000 },
      { latitude: 37.5100, longitude: 126.9100 },
    ],
    color: '#00CC44',       // 원활 (녹색)
    passedColor: '#CCCCCC',
  },
  {
    coords: [
      { latitude: 37.5100, longitude: 126.9100 },
      { latitude: 37.5200, longitude: 126.9200 },
    ],
    color: '#FFAA00',       // 서행 (주황)
    passedColor: '#CCCCCC',
  },
  {
    coords: [
      { latitude: 37.5200, longitude: 126.9200 },
      { latitude: 37.5300, longitude: 126.9300 },
    ],
    color: '#FF3300',       // 정체 (빨강)
    passedColor: '#CCCCCC',
  },
];

<NaverMapView
  style={{ flex: 1 }}
  initialCamera={{ latitude: 37.515, longitude: 126.915, zoom: 13 }}
>
  <NaverMapMultiPathOverlay
    pathParts={trafficRoute}
    width={10}
    outlineWidth={2}
    progress={0.0}
  />
</NaverMapView>

NaverMapMultiPathOverlay

임포트

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

기본 사용법

<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.52, longitude: 126.92, zoom: 12 }}>
  <NaverMapMultiPathOverlay
    pathParts={[
      {
        coords: [
          { latitude: 37.50, longitude: 126.90 },
          { latitude: 37.52, longitude: 126.92 },
        ],
        color: '#00AA00',       // 지나갈 경로 (초록 = 원활)
        passedColor: '#AAAAAA', // 지나온 경로
      },
      {
        coords: [
          { latitude: 37.52, longitude: 126.92 },
          { latitude: 37.54, longitude: 126.94 },
        ],
        color: '#FFAA00',       // 지나갈 경로 (주황 = 서행)
        passedColor: '#AAAAAA',
      },
      {
        coords: [
          { latitude: 37.54, longitude: 126.94 },
          { latitude: 37.56, longitude: 126.96 },
        ],
        color: '#FF0000',       // 지나갈 경로 (빨강 = 정체)
        passedColor: '#AAAAAA',
      },
    ]}
    width={8}
    progress={0.4}
  />
</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	타입	기본값	설명
`pathParts`	`MultiPathPart[]`	-	경로 구간 배열 (필수)
`width`	`number`	`1`	선 두께 (dp/pt)
`outlineWidth`	`number`	`0`	외곽선 두께
`progress`	`number`	`0`	진척률 (0 ~ 1)
`patternImage`	`MapImageProp`	-	패턴 이미지
`patternInterval`	`number`	`0`	패턴 간격

겹침 처리

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

MultiPathPart 타입

각 구간은 MultiPathPart 객체로 정의합니다.

interface MultiPathPart {
  coords: Coord[];           // 구간 좌표 (최소 2개)
  color?: ColorValue;        // 지나갈 경로 색상 (기본: 'black')
  passedColor?: ColorValue;  // 지나온 경로 색상 (기본: 'black')
  outlineColor?: ColorValue; // 지나갈 외곽선 색상 (기본: 'black')
  passedOutlineColor?: ColorValue; // 지나온 외곽선 색상 (기본: 'black')
}

각 구간(pathParts)의 coords는 최소 2개의 좌표를 포함해야 합니다. 어느 한 구간이라도 조건을 만족하지 않으면 전체 컴포넌트가 렌더링되지 않습니다.

인접한 구간의 끝 좌표와 다음 구간의 시작 좌표를 동일하게 설정하면 구간이 연속적으로 이어집니다.

사용 예제

교통 상황별 경로

// 실시간 교통 정보 기반 경로 표시
const trafficRoute = [
  {
    coords: [
      { latitude: 37.5000, longitude: 126.9000 },
      { latitude: 37.5100, longitude: 126.9100 },
    ],
    color: '#00CC44',       // 원활 (녹색)
    passedColor: '#CCCCCC',
  },
  {
    coords: [
      { latitude: 37.5100, longitude: 126.9100 },
      { latitude: 37.5200, longitude: 126.9200 },
    ],
    color: '#FFAA00',       // 서행 (주황)
    passedColor: '#CCCCCC',
  },
  {
    coords: [
      { latitude: 37.5200, longitude: 126.9200 },
      { latitude: 37.5300, longitude: 126.9300 },
    ],
    color: '#FF3300',       // 정체 (빨강)
    passedColor: '#CCCCCC',
  },
];

<NaverMapView
  style={{ flex: 1 }}
  initialCamera={{ latitude: 37.515, longitude: 126.915, zoom: 13 }}
>
  <NaverMapMultiPathOverlay
    pathParts={trafficRoute}
    width={10}
    outlineWidth={2}
    progress={0.0}
  />
</NaverMapView>

NaverMapMultiPathOverlay

NaverMapMultiPathOverlay

임포트

기본 사용법

Props

기본 오버레이 Props (BaseOverlayProps)

멀티경로 Props

겹침 처리

MultiPathPart 타입

사용 예제

교통 상황별 경로

On this page

NaverMapMultiPathOverlay

NaverMapMultiPathOverlay

임포트

기본 사용법

Props

기본 오버레이 Props (BaseOverlayProps)

멀티경로 Props

겹침 처리

MultiPathPart 타입

사용 예제

교통 상황별 경로

On this page