Naver Map컴포넌트
NaverMapPolylineOverlay
폴리라인을 표시하는 오버레이 컴포넌트
NaverMapPolylineOverlay
좌표 배열을 연결하는 단순 폴리라인을 표시합니다. 경로선(NaverMapPathOverlay)과 달리 진척률 기능은 없지만, 끝점(CapType)과 연결점(JoinType) 모양을 지정할 수 있습니다.
임포트
import { NaverMapPolylineOverlay } from '@boostbrothers/react-native-naver-map';
기본 사용법
<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.5, longitude: 126.9, zoom: 12 }}><NaverMapPolylineOverlaycoords={[{ latitude: 37.5, longitude: 126.9 },{ latitude: 37.52, longitude: 126.92 },{ latitude: 37.54, longitude: 126.90 },]}width={3}color="blue"capType="Round"joinType="Round"/></NaverMapView>
Props
기본 오버레이 Props (BaseOverlayProps)
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
zIndex | number | 0 | 보조 Z 인덱스 |
globalZIndex | number | -200000 | 전역 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' | 선 색상 |
pattern | number[] | - | 점선 패턴 (픽셀 단위, 대시-갭 교대) |
capType | CapType | 'Round' | 끝점 모양 |
joinType | JoinType | 'Round' | 연결점 모양 |
CapType (끝점 모양)
| 값 | 설명 |
|---|---|
'Round' | 둥근 끝 (기본값) |
'Butt' | 평평한 끝 |
'Square' | 사각형 끝 (선보다 약간 돌출) |
JoinType (연결점 모양)
| 값 | 설명 |
|---|---|
'Round' | 둥근 연결점 (기본값) |
'Bevel' | 사선으로 잘린 연결점 |
'Miter' | 뾰족한 연결점 |
폴리라인은 외곽선을 지원하지 않습니다. 외곽선이 필요하다면 NaverMapPathOverlay를 사용하세요.
coords 배열은 최소 2개의 좌표를 포함해야 합니다.
PathOverlay vs PolylineOverlay 비교
| 기능 | PathOverlay | PolylineOverlay |
|---|---|---|
| 진척률(progress) | 지원 | 미지원 |
| 외곽선 | 지원 | 미지원 |
| 패턴 이미지 | 지원 | 미지원 |
| 점선 패턴 | 미지원 | 지원 |
| 끝점 모양 | 미지원 | 지원 |
| 연결점 모양 | 미지원 | 지원 |
| globalZIndex 기본값 | -100000 | -200000 |
사용 예제
점선 폴리라인
<NaverMapPolylineOverlaycoords={[{ latitude: 37.5, longitude: 126.9 },{ latitude: 37.55, longitude: 126.95 },]}width={4}color="#FF6B6B"pattern={[10, 5]} // 10px 대시, 5px 갭capType="Round"/>
다각형 경계선
<NaverMapPolylineOverlaycoords={[{ latitude: 37.50, longitude: 126.90 },{ latitude: 37.50, longitude: 126.95 },{ latitude: 37.55, longitude: 126.95 },{ latitude: 37.55, longitude: 126.90 },{ latitude: 37.50, longitude: 126.90 }, // 시작점으로 돌아옴]}width={2}color="#0066FF"joinType="Miter"capType="Butt"/>