MapConductor문서 / 기본 / Circle
원(Circle)
중심과 미터 단위의 반지름으로 원을 그립니다. 반지름은 줌에 따라가며, 어느 프로바이더에서도 같은 모습이 됩니다.
ANDROID
com.mapconductor:core
iOS
MapConductorCore
REACT
@mapconductor/js-sdk-react
01 · 사용법
상태 객체를 만들어 지도 뷰 안에 놓기만 하면 됩니다. 반지름이나 색은 프로퍼티를 바꿔 쓰면 즉시 반영됩니다.
CircleScreen.kt · Jetpack Compose
val circleState = remember {
CircleState(
center = GeoPoint.fromLatLong(21.382314, -157.933097),
radiusMeters = 1000.0,
strokeWidth = 3.dp,
fillColor = Color.Red.copy(alpha = 0.3f),
onClick = { /* circle tapped */ },
)
}
MapLibreMapView(state = mapState) {
Circle(circleState)
}CircleView.swift · SwiftUI
MapLibreMapView(state: mapState) {
Circle(
center: GeoPoint(latitude: 21.382314, longitude: -157.933097),
radiusMeters: 1000,
strokeColor: UIColor.red,
strokeWidth: 2,
fillColor: UIColor.blue.withAlphaComponent(0.3)
)
}CirclePage.tsx · React
import { createCircleState, createGeoPoint } from '@mapconductor/js-sdk-core';
import { Circle } from '@mapconductor/js-sdk-react';
const circle = useMemo(() => createCircleState({
id: 'circle',
center: createGeoPoint({ latitude: 21.382314, longitude: -157.933097 }),
radiusMeters: 1000,
strokeWidth: 3,
fillColor: 'rgba(0, 0, 255, 0.3)',
}), []);
<MapLibreMapView2D state={state}>
<Circle state={circle} />
</MapLibreMapView2D>02 · 주요 옵션
Option
Type
설명
center
GeoPoint
원의 중심.
radiusMeters
Double
미터 단위의 반지름. 화면 픽셀이 아닙니다.
fillColor / strokeColor
Color
칠과 선의 색. 투명도는 색의 알파로 지정합니다.
strokeWidth
Dp · Double · number
선의 굵기.
geodesic
Boolean · true
측지선을 따라 정확한 원을 그릴지 여부. 폴리곤・폴리라인과 달리 원의 기본값은 true입니다.
clickable
Boolean · true
탭 판정의 유무.
zIndex
Int? · null
겹침 순서. 지정하지 않아도 됩니다.
extra
any?
임의의 부수 데이터. 클릭 시에 받을 수 있습니다.
onClick
handler
원의 탭을 받습니다.
03 · 샘플
드래그로 반지름 바꾸기
샘플 앱에서는 중심과 외곽에 마커를 놓고, 외곽 마커의 드래그로 반지름을 다시 계산합니다. 거리 계산 헬퍼가 core에 들어 있습니다.