Circle

円は、カスタマイズ可能な半径、ストローク、塗りつぶしプロパティを持つ円形のオーバーレイで、地図上に描画できます。エリア、範囲、またはゾーンを表現するのに便利です。

Composable 関数

基本的な Circle
State を利用した Circle

円の数が少ない場合、オプションを直接指定すると簡単に扱えます。 id を指定すると、不要な Recomposition を抑えることができます。

@Composable
fun MapViewScope.Circle(
    center: GeoPointInterface,
    radiusMeters: Double,
    geodesic: Boolean = false,
    strokeColor: Color = Color.Red,
    strokeWidth: Dp = 2.dp,
    fillColor: Color = Color.White.copy(alpha = 0.5f),
    extra: Serializable? = null,
    id: String? = null
)

円の数が多い場合、円を移動させるような場合、こちらを使用することを推奨します。 id を指定すると、不要な Recomposition を抑えることができます。

CircleState(
    center: GeoPointInterface,
    radiusMeters: Double,
    geodesic: Boolean = false,
    strokeColor: Color = Color.Red,
    strokeWidth: Dp = 2.dp,
    fillColor: Color = Color.White.copy(alpha = 0.5f),
    extra: Serializable? = null,
    id: String? = null
)

@Composable
fun MapViewScope.Circle(state: CircleState)

パラメータ

center: 円の地理的中心点（GeoPointInterface）
radiusMeters: 半径（メートル単位、Double）
geodesic: 測地線（地球の曲率に沿う）を描画するかどうか（デフォルト: false）
strokeColor: 円の境界線の色（デフォルト: Color.Red）
strokeWidth: 境界線の幅（デフォルト: 2.dp）
fillColor: 円の内部の塗りつぶし色（デフォルト: 半透明の白）
extra: 円に付加する追加データ（Serializable?）
id: 円の一意識別子（String?）

使用例

基本的な Circle

// MapView を GoogleMapView、MapboxMapView などのマップ地図SDKに置き換えてください
MapView(state = mapViewState) {
    Circle(
        center = GeoPoint.fromLatLong(37.7749, -122.4194),
        radiusMeters = 1000.0, // 1km radius
        strokeColor = Color.Blue,
        fillColor = Color.Blue.copy(alpha = 0.3f),
        id = "downtown-area"
    )
}

インタラクティブな例

マーカーを使ったインタラクティブな Circle

ドラッグ可能なマーカーを使ったインタラクティブな円の作成方法を示します。

@Composable
fun InteractiveCircleExample() {
    val circleCenter = GeoPoint.fromLatLong(21.382314, -157.933097)

    // calculatePositionAtDistance is a MapConductor utility function
    // Calculates position 1000m away from circleCenter, rotated 180 degrees clockwise
    val edgeMarkerPosition = calculatePositionAtDistance(
        center = circleCenter,
        distanceMeters = 1000.0,
        bearingDegrees = 180.0,
    )

    // Marker placed at the edge of the circle
    val edgeMarkerState = MarkerState(
        id = "edge_marker",
        position = edgeMarkerPosition,
        icon = DefaultIcon(
            fillColor = Color.Green,
            strokeColor = Color.White,
            label = "Drag me",
        ),
        draggable = true,
        onDragStart = onMarkerMove,
        onDrag = onMarkerMove,
        onDragEnd = onMarkerMove,
    )

    // Create CircleState
    val circleState = remember {
        CircleState(
            id = "circle",
            center = circleCenter,
            radiusMeters = 1000.0,
        )
    }

    // Update circle radius when marker moves
    // Without specifying circleState.id, a new circle would be created on recomposition
    val onMarkerMove: OnMarkerEventHandler = { markerState ->
        circleState.radiusMeters = computeDistanceBetween(circleCenter, markerState.position)
    }
    LaunchedEffect(Unit) {
        onMarkerMove(edgeMarkerState)
    }

    // Create map
    val camera = MapCameraPosition(
        position = circleCenter,
        zoom = 13.0,
    )
    val mapViewState = rememberMapLibreMapViewState(
        cameraPosition = camera,
    )

    MapLibreMapView(
        modifier = modifier,
        state = mapViewState
    ) {
        // Circle
        Circle(circleState)

        // Center marker (not draggable)
        Marker(
            position = circleCenter,
        )

        // Edge marker (draggable)
        Marker(edgeMarkerState)
    }
}

動的な Circle の更新

@Composable
fun DynamicCircleExample() {
    var circleRadius by remember { mutableStateOf(500.0) }
    var circleColor by remember { mutableStateOf(Color.Blue) }

    Column {
        // Controls
        Slider(
            value = circleRadius.toFloat(),
            onValueChange = { circleRadius = it.toDouble() },
            valueRange = 100f..2000f,
            modifier = Modifier.padding(16.dp)
        )

        Row {
            Button(onClick = { circleColor = Color.Red }) {
                Text("Red")
            }
            Button(onClick = { circleColor = Color.Blue }) {
                Text("Blue")
            }
            Button(onClick = { circleColor = Color.Green }) {
                Text("Green")
            }
        }

        // Map with dynamic circle
        // MapView を GoogleMapView、MapboxMapView などのマップ地図SDKに置き換えてください
        MapView(state = mapViewState) {
            Circle(
                center = GeoPoint.fromLatLong(37.7749, -122.4194),
                radiusMeters = circleRadius,
                strokeColor = circleColor,
                fillColor = circleColor.copy(alpha = 0.3f)
            )

            // Center marker
            Marker(
                position = GeoPoint.fromLatLong(37.7749, -122.4194),
                icon = DefaultIcon(
                    fillColor = circleColor,
                    label = "${circleRadius.toInt()}m"
                )
            )
        }
    }
}

イベント処理

Circle のインタラクションは、マップ地図SDKコンポーネントで処理されます:

// MapView を GoogleMapView、MapboxMapView などのマップ地図SDKに置き換えてください
MapView(
    state = mapViewState
) {
    Circle(
        center = GeoPoint.fromLatLong(37.7749, -122.4194),
        radiusMeters = 1000.0,
        clickable = true,
        extra = "Clickable circle",
        onClick = { circleEvent ->
            val circle = circleEvent.state
            val clickPoint = circleEvent.clicked

            println("Circle clicked:")
            println("  Center: ${circle.center}")
            println("  Radius: ${circle.radiusMeters}m")
            println("  Click point: ${clickPoint}")
            println("  Extra data: ${circle.extra}")
        }
    )
}

スタイルオプション

ストロークスタイル

// Thin border
Circle(
    center = center,
    radiusMeters = 500.0,
    strokeColor = Color.Black,
    strokeWidth = 1.dp
)

// Thick border
Circle(
    center = center,
    radiusMeters = 500.0,
    strokeColor = Color.Black,
    strokeWidth = 5.dp
)

// No border
Circle(
    center = center,
    radiusMeters = 500.0,
    strokeColor = Color.Transparent,
    strokeWidth = 0.dp
)

塗りつぶしスタイル

// Solid fill
Circle(
    center = center,
    radiusMeters = 500.0,
    fillColor = Color.Red
)

// Semi-transparent fill
Circle(
    center = center,
    radiusMeters = 500.0,
    fillColor = Color.Red.copy(alpha = 0.5f)
)

// No fill
Circle(
    center = center,
    radiusMeters = 500.0,
    fillColor = Color.Transparent
)

Circle の識別

ID プロパティの使用

id プロパティは円に一意の識別子を提供し、効率的な追跡と管理を可能にします。

@Composable
fun CircleIdentificationExample() {
    val mapViewState = rememberGoogleMapViewState()

    // Use ID in event handling
    val onCircleClick: OnCircleEventHandler = { circleEvent ->
        when (circleEvent.state.id) {
            "zone-a" -> handleZoneA()
            "zone-b" -> handleZoneB()
            else -> handleUnknownZone()
        }
    }

    // Create circles with unique IDs
    val circles = listOf(
        CircleState(
            center = GeoPoint.fromLatLong(37.7749, -122.4194),
            radiusMeters = 1000.0,
            strokeColor = Color.Red,
            fillColor = Color.Red.copy(alpha = 0.3f),
            id = "zone-a",
            onClick = onCircleClick
        ),
        CircleState(
            center = GeoPoint.fromLatLong(37.7849, -122.4094),
            radiusMeters = 1500.0,
            strokeColor = Color.Blue,
            fillColor = Color.Blue.copy(alpha = 0.3f),
            id = "zone-b",
            onClick = onCircleClick
        )
    )

    MapView(
        state = mapViewState
    ) {
        circles.forEach { circle -> Circle(circle) }
    }
}

private fun handleZoneA() {
    println("Zone A clicked")
}

private fun handleZoneB() {
    println("Zone B clicked")
}

private fun handleUnknownZone() {
    println("Unknown zone clicked")
}

イベント処理の詳細

Circle のクリックイベント処理の詳細な例：

@Composable
fun CircleClickEventExample() {
    val mapViewState = rememberGoogleMapViewState()

    // Replace MapView with your chosen map provider, such as GoogleMapView, MapboxMapView
    MapView(
        state = mapViewState
    ) {
        Circle(
            center = GeoPoint.fromLatLong(37.7749, -122.4194),
            radiusMeters = 1000.0,
            clickable = true,
            extra = "Clickable circle",
            onClick = { circleEvent ->
                val circle = circleEvent.state
                val clickPoint = circleEvent.clicked

                println("Circle clicked:")
                println("  Center: ${circle.center}")
                println("  Radius: ${circle.radiusMeters}m")
                println("  Click point: ${clickPoint}")
                println("  Extra data: ${circle.extra}")
            }
        )
    }
}