Polygon

ポリゴンは、カスタマイズ可能なストロークと塗りつぶしプロパティを持つエリアを定義する閉じた形状です。ゾーン、地域、境界、またはエリアベースの機能を表現するのに便利です。

Composable 関数

基本的な Polygon

@Composable
fun Polygon(
    points: List<GeoPointInterface>,
    id: String? = null,
    strokeColor: Color = Color.Black,
    strokeWidth: Dp = 1.dp,
    fillColor: Color = Color.Transparent,
    geodesic: Boolean = false,
    extra: Serializable? = null
)

State を利用した Polygon

PolygonState(
    points: List<GeoPointInterface>,
    id: String? = null,
    strokeColor: Color = Color.Black,
    strokeWidth: Dp = 1.dp,
    fillColor: Color = Color.Transparent,
    geodesic: Boolean = false,
    extra: Serializable? = null
)

@Composable
fun Polygon(state: PolygonState)

パラメータ

• points: ポリゴンの頂点を定義する地理座標のリスト（List<GeoPointInterface>）
• id: ポリゴンのオプションの一意識別子（String?）
• strokeColor: ポリゴンの境界線の色（デフォルト: Color.Black）
• strokeWidth: 境界線の幅（デフォルト: 1.dp）
• fillColor: ポリゴン内部の塗りつぶし色（デフォルト: Color.Transparent）
• geodesic: 測地線エッジを描画するかどうか（デフォルト: false）
• extra: ポリゴンに付加する追加データ（Serializable?）

使用例

基本的な Polygon

// MapView を GoogleMapView、MapboxMapView などに置き換えてください
MapLibreMapView(state = mapViewState) {
    val trianglePoints = listOf(
        GeoPoint.fromLatLong(37.7749, -122.4194),
        GeoPoint.fromLatLong(37.7849, -122.4094),
        GeoPoint.fromLatLong(37.7749, -122.3994),
        GeoPoint.fromLatLong(37.7749, -122.4194)
    )

    Polygon(
        points = trianglePoints,
        strokeColor = Color.Blue,
        strokeWidth = 2.dp,
        fillColor = Color.Blue.copy(alpha = 0.3f)
    )
}

頂点マーカー付きのインタラクティブな Polygon

@Composable
fun InteractivePolygonExample() {
    val mapViewState =
        rememberMapLibreMapViewState(
            cameraPosition =
                MapCameraPosition(
                    position = GeoPoint.fromLatLong(37.7809, -122.4094),
                    zoom = 13.5,
                ),
        )

    var vertices by remember {
        mutableStateOf(
            listOf(
                GeoPoint.fromLatLong(37.7749, -122.4194),
                GeoPoint.fromLatLong(37.7849, -122.4094),
                GeoPoint.fromLatLong(37.7799, -122.3994),
                GeoPoint.fromLatLong(37.7649, -122.4094)
            )
        )
    }

    val closedVertices = vertices + vertices.first()

    val polygonState = PolygonState(
        id = "polygon",  // important
        points = closedVertices,
        strokeColor = Color.Red,
        strokeWidth = 3.dp,
        fillColor = Color.Red.copy(alpha = 0.2f),
        onClick = { polygonEvent ->
            println("Polygon がクリックされました: ${polygonEvent.clicked} at: ${polygonEvent.clicked}")
        }
    )

    val onVertexDrag: (MarkerState) -> Unit = { markerState ->
        val vertexIndex = markerState.extra as Int
        vertices = vertices.toMutableList().apply {
            if (vertexIndex < size) {
                set(vertexIndex, GeoPoint.from(markerState.position))
            }
        }
    }

    val vertexMarkers = vertices.mapIndexed { index, point ->
        MarkerState(
            id = "marker-${index + 1}",  // important
            position = point,
            icon = DefaultIcon(
                fillColor = Color.Red,
                strokeColor = Color.White,
                label = "${index + 1}",
                scale = 0.8f
            ),
            draggable = true,
            extra = index,
            onDrag = onVertexDrag,
        )
    }

    MapLibreMapView(
        modifier = modifier,
        state = mapViewState
    ) {
        Polygon(polygonState)
        vertexMarkers.forEach { marker ->
            Marker(marker)
        }
    }
}

測地線ポリゴン vs 標準線ポリゴン

@Composable
fun MapView(modifier: Modifier = Modifier) {
    val mapViewState =
        rememberArcGISMapViewState(
            cameraPosition =
                MapCameraPosition(
                    position = GeoPoint(30, 0),
                    zoom = 2,
                ),
        )

    val points =
        listOf(
            GeoPoint.fromLongLat(23.66, 56.42),
            GeoPoint.fromLongLat(13.39, 2.95),
            GeoPoint.fromLongLat(-87.82, 38.58),
            GeoPoint.fromLongLat(23.66, 56.42),
        )

    var marker by remember { mutableStateOf<MarkerState?>(null) }
    val onMarkerClick: OnMarkerEventHandler = { markerState ->
        marker = markerState
    }
    val onMarkerDragStart: OnMarkerEventHandler = { markerState ->
        println("マーカーのドラッグを開始: ${markerState.id}")
    }
    val onMarkerDrag: OnMarkerEventHandler = { markerState ->
        println("マーカーをドラッグ中: ${markerState.position}")
    }
    val onMarkerDragEnd: OnMarkerEventHandler = { markerState ->
        println("マーカーのドラッグが終了: ${markerState.id}")
    }
    val onPolygonClick: OnPolygonEventHandler = { event ->
        marker = MarkerState(
            position = event.clicked,
            icon = DefaultIcon(
                fillColor = event.state.fillColor,
                strokeColor = Color.Red,
            ),
            animation = MarkerAnimation.Drop,
            draggable = true,
            onClick = onMarkerClick,
            onDragStart = onMarkerDragStart,
            onDrag = onMarkerDrag,
            onDragEnd = onMarkerDragEnd,
        )
    }

    val polygonState =
        remember {
            PolygonState(
                points = points,
                strokeColor = Color.Yellow.copy(alpha = 0.3f),
                strokeWidth = 3.dp,
                fillColor = Color.Green.copy(alpha = 0.5f),
                geodesic = false,
                zIndex = 0,
                onClick = onPolygonClick,
            )
        }

    val geodesicPolygonState =
        remember {
            PolygonState(
                points = points,
                strokeColor = Color.Red.copy(alpha = 0.3f),
                strokeWidth = 3.dp,
                fillColor = Color.Blue.copy(alpha = 0.5f),
                geodesic = true,
                zIndex = 1,
                onClick = onPolygonClick,
            )
        }

    ArcGISMapView(
        modifier = modifier,
        state = mapViewState,
        onMapLoaded = {
            println("地図の読み込みが完了しました")
        },
        onMapClick = {
            marker = null // 地図クリックで選択解除
        }
    ) {

        // インタラクティブなマーカーを持つ地図コンテンツ
        Polygon(polygonState)
        Polygon(geodesicPolygonState)

        // 選択されたマーカーの情報を表示
        marker?.let { markerState ->
            Marker(markerState)
        }
    }
}