Naver Map컴포넌트
NaverMapArrowheadPathOverlay
화살표 머리가 있는 경로선 오버레이 컴포넌트
NaverMapArrowheadPathOverlay
끝 방향으로 화살표 머리가 표시되는 경로선입니다. 방향을 나타내는 경로나 이동 방향 표시에 적합합니다.
임포트
import { NaverMapArrowheadPathOverlay } from '@boostbrothers/react-native-naver-map';
기본 사용법
<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.5, longitude: 126.9, zoom: 12 }}><NaverMapArrowheadPathOverlaycoords={[{ latitude: 37.5, longitude: 126.9 },{ latitude: 37.52, longitude: 126.92 },{ latitude: 37.54, longitude: 126.94 },]}width={8}color="#FF6B35"headSizeRatio={2.5}/></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' | 선과 화살표 머리 색상 |
outlineWidth | number | 0 | 외곽선 두께 (0 = 미표시) |
outlineColor | ColorValue | 'black' | 외곽선 색상 |
headSizeRatio | number | 2.5 | 화살표 머리 크기 배율 (두께 × 배율 = 머리 크기) |
화살표 머리의 실제 크기는 width × headSizeRatio로 계산됩니다. 예를 들어 width=8, headSizeRatio=2.5이면 화살표 머리 크기는 20dp/pt가 됩니다.
coords 배열은 최소 2개의 좌표를 포함해야 합니다.
사용 예제
방향 표시 화살표
<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.52, longitude: 126.92, zoom: 13 }}><NaverMapArrowheadPathOverlaycoords={[{ latitude: 37.50, longitude: 126.90 },{ latitude: 37.52, longitude: 126.92 },{ latitude: 37.54, longitude: 126.94 },]}width={6}color="#0066FF"outlineWidth={1}outlineColor="white"headSizeRatio={3}onTap={() => console.log('화살표 경로 탭')}/></NaverMapView>
여러 방향 화살표
const directions = [{id: '1',coords: [{ latitude: 37.50, longitude: 126.90 },{ latitude: 37.51, longitude: 126.91 },],color: '#FF0000',},{id: '2',coords: [{ latitude: 37.52, longitude: 126.90 },{ latitude: 37.53, longitude: 126.91 },],color: '#00AA00',},];<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.515, longitude: 126.905, zoom: 13 }}>{directions.map((dir) => (<NaverMapArrowheadPathOverlaykey={dir.id}coords={dir.coords}width={8}color={dir.color}headSizeRatio={2.5}/>))}</NaverMapView>