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 に含まれています。
サンプル動画 · 各地図SDKで測地線の円がどう違うか