Naver Map컴포넌트
NaverMapPolygonOverlay
다각형 영역을 표시하는 오버레이 컴포넌트
NaverMapPolygonOverlay
지도 위에 채워진 다각형을 표시합니다. 내부 홀(구멍)을 만들어 도넛 형태의 다각형도 표현할 수 있습니다.
임포트
import { NaverMapPolygonOverlay } from '@boostbrothers/react-native-naver-map';
기본 사용법
<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.5, longitude: 126.9, zoom: 12 }}><NaverMapPolygonOverlaycoords={[{ latitude: 37.50, longitude: 126.90 },{ latitude: 37.50, longitude: 126.96 },{ latitude: 37.56, longitude: 126.96 },{ latitude: 37.56, longitude: 126.90 },{ latitude: 37.50, longitude: 126.90 },]}color="rgba(0, 100, 255, 0.3)"outlineWidth={2}outlineColor="#0066FF"/></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[] | - | 외곽 좌표 배열 (필수, 최소 3개, 시계 방향) |
holes | Coord[][] | [] | 내부 홀 좌표 배열들 (반시계 방향) |
color | ColorValue | 'black' | 채우기 색상 |
outlineWidth | number | 0 | 외곽선 두께 (0 = 미표시) |
outlineColor | ColorValue | 'black' | 외곽선 색상 |
좌표 방향 주의:
- 외곽 좌표(
coords)는 시계 방향으로 지정해야 합니다. - 홀 좌표(
holes)는 시계 반대 방향으로 지정해야 합니다. - 방향이 틀리면 비정상적으로 그려지거나 탭 이벤트를 받지 못할 수 있습니다.
coords 배열은 최소 3개의 좌표를 포함해야 합니다.
홀(Holes) 기능
holes prop을 사용하면 폴리곤 내부에 구멍을 만들 수 있습니다. 홀 영역은 색상이 채워지지 않고 탭 이벤트도 발생하지 않습니다.
<NaverMapPolygonOverlaycoords={[// 외곽 (시계 방향){ latitude: 37.48, longitude: 126.88 },{ latitude: 37.48, longitude: 126.98 },{ latitude: 37.58, longitude: 126.98 },{ latitude: 37.58, longitude: 126.88 },{ latitude: 37.48, longitude: 126.88 },]}holes={[[// 내부 홀 (시계 반대 방향){ latitude: 37.52, longitude: 126.92 },{ latitude: 37.54, longitude: 126.92 },{ latitude: 37.54, longitude: 126.94 },{ latitude: 37.52, longitude: 126.94 },{ latitude: 37.52, longitude: 126.92 },],]}color="rgba(255, 100, 0, 0.3)"outlineWidth={2}outlineColor="#FF6400"/>
사용 예제
구역 표시
// 서울 강남구 대략적 영역const gangnamCoords = [{ latitude: 37.4943, longitude: 127.0167 },{ latitude: 37.4943, longitude: 127.1167 },{ latitude: 37.5343, longitude: 127.1167 },{ latitude: 37.5343, longitude: 127.0167 },{ latitude: 37.4943, longitude: 127.0167 },];<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.51, longitude: 127.07, zoom: 12 }}><NaverMapPolygonOverlaycoords={gangnamCoords}color="rgba(0, 128, 255, 0.2)"outlineWidth={2}outlineColor="#0080FF"onTap={() => console.log('강남구 탭')}/></NaverMapView>
반투명 오버레이
<NaverMapPolygonOverlaycoords={areaCoords}color="rgba(255, 0, 0, 0.15)"outlineWidth={1}outlineColor="rgba(255, 0, 0, 0.8)"zIndex={10}/>