Polyline

Una polilínea es una secuencia de segmentos de línea que conectan múltiples puntos geográficos. Las polilíneas se usan comúnmente para representar rutas, caminos, límites o características lineales en un mapa.

Funciones Composable

Polilínea Básica

Para un pequeño número de polilíneas, puede especificar opciones directamente. Especificar un id ayuda a prevenir recomposiciones innecesarias.

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

Polilínea con Estado

Para un gran número de polilíneas o cuando se mueven polilíneas, se recomienda usar estado. Especificar un id ayuda a prevenir recomposiciones innecesarias.

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

@Composable
fun Polyline(state: PolylineState)

Parámetros

• points: Lista de coordenadas geográficas que definen el segmento de línea (List<GeoPointInterface>)
• id: Identificador único opcional para la polilínea (String?)
• strokeColor: Color de la línea (predeterminado: Color.Black)
• strokeWidth: Ancho de la línea (predeterminado: 1.dp)
• geodesic: Si se debe dibujar la línea utilizando bordes geodésicos que sigan la curvatura de la Tierra (predeterminado: false)
• extra: Datos adicionales adjuntos a la polilínea (Serializable?)

Ejemplos de Uso

Polilínea Básica

@Composable
fun BasicPolylineExample(modifier: Modifier = Modifier) {
    val center = GeoPoint.fromLatLong(53.566853, 9.988269)

    // 地図の作成
    val camera =
        MapCameraPosition(
            position = center,
            zoom = 14,
        )
    val mapViewState =
        rememberMapboxMapViewState(
            cameraPosition = camera,
        )
    val routePoints = listOf(
        GeoPoint.fromLatLong(53.561011,9.989448),
        GeoPoint.fromLatLong(53.563203,9.985800),
        GeoPoint.fromLatLong(53.564579,9.983525),
        GeoPoint.fromLatLong(53.566873,9.980822),
        GeoPoint.fromLatLong(53.567943,9.982152),
        GeoPoint.fromLatLong(53.570186,9.984813),
        GeoPoint.fromLatLong(53.572683,9.986143),
        GeoPoint.fromLatLong(53.572658,9.988675),
        GeoPoint.fromLatLong(53.572709,9.990392)
    )

    // Reemplace MapView con su proveedor de mapas elegido, como GoogleMapView, MapboxMapView
    MapboxMapView(
        state = mapViewState,
        modifier = modifier,
    ) {
        Polyline(
            points = routePoints,
            strokeColor = Color.Blue,
            strokeWidth = 9.dp
        )
    }
}

Polilínea Interactiva con Marcadores de Waypoint

@Composable
fun InteractivePolylineExample() {
    val center = GeoPoint.fromLatLong(53.566853, 9.988269)

    val camera = MapCameraPosition(position = center, zoom = 14.0)
    val mapViewState = rememberMapboxMapViewState(cameraPosition = camera)

    var waypoints by remember {
        mutableStateOf(
            listOf(
                GeoPoint.fromLatLong(53.561011, 9.989448),
                GeoPoint.fromLatLong(53.563203, 9.985800),
                GeoPoint.fromLatLong(53.564579, 9.983525),
                GeoPoint.fromLatLong(53.566873, 9.980822),
                GeoPoint.fromLatLong(53.567943, 9.982152),
                GeoPoint.fromLatLong(53.570186, 9.984813),
                GeoPoint.fromLatLong(53.572683, 9.986143),
                GeoPoint.fromLatLong(53.572658, 9.988675),
                GeoPoint.fromLatLong(53.572709, 9.990392)
            )
        )
    }

    val polylineState = PolylineState(
        points = waypoints,
        strokeColor = Color.Blue,
        strokeWidth = 4.dp,
        geodesic = true
    )

    val onWaypointDrag: (MarkerState) -> Unit = { markerState ->
        val markerIndex = markerState.extra as Int
        markerIndex.let { index ->
            waypoints = waypoints.toMutableList().apply {
                if (index < size) {
                    set(index, markerState.position as GeoPoint)
                }
            }
        }
    }

    val waypointMarkers = waypoints.mapIndexed { index, point ->
        MarkerState(
            id = "marker-${index}",
            position = point,
            icon = DefaultIcon(label = "${index + 1}", scale = 0.7f),
            draggable = true,
            extra = index,
            onDrag = onWaypointDrag
        )
    }

    MapboxMapView(
        state = mapViewState
    ) {
        Polyline(polylineState)
        waypointMarkers.forEach { marker ->
            Marker(marker)
        }
    }
}

Construcción Dinámica de Polilínea

@Composable
fun DynamicPolylineExample() {
    val center = GeoPoint.fromLatLong(53.566853, 9.988269)

    val camera = MapCameraPosition(position = center, zoom = 14.0)
    val mapViewState = rememberMapLibreMapViewState(cameraPosition = camera)

    var points by remember { mutableStateOf<List<GeoPointInterface>>(emptyList()) }
    var isDrawing by remember { mutableStateOf(false) }

    Column(modifier = modifier) {
        Row {
            Button(onClick = { isDrawing = !isDrawing }) {
                Text(if (isDrawing) "Stop Drawing" else "Start Drawing")
            }
            Button(onClick = { points = emptyList() }) {
                Text("Clear")
            }
        }

        MapLibreMapView(
            state = mapViewState,
            onMapClick = { geoPoint ->
                if (isDrawing) {
                    points = points + geoPoint
                }
            }
        ) {
            if (points.isNotEmpty()) {
                Polyline(
                    points = points,
                    strokeColor = Color.Red,
                    strokeWidth = 3.dp
                )

                points.forEachIndexed { index, point ->
                    Marker(
                        position = point,
                        icon = DefaultIcon(
                            fillColor = if (index == 0) Color.Green
                            else if (index == points.size - 1) Color.Red
                            else Color.Blue,
                            label = "${index + 1}",
                            scale = 0.8f
                        )
                    )
                }
            }
        }
    }
}

Líneas Geodésicas vs Líneas Estándar

@Composable
fun GeodesicPolylineExample(modifier: Modifier = Modifier) {
    val center = GeoPoint.fromLatLong(36.0, -160.0)
    val camera = MapCameraPosition(position = center, zoom = 4.0)
    val mapViewState = rememberMapboxMapViewState(cameraPosition = camera)

    var markers by remember { mutableStateOf<List<MarkerState>>(emptyList()) }
    val onPolylineClick: OnPolylineEventHandler = { polylineEvent ->
        markers = markers + MarkerState(
            icon = DefaultIcon(fillColor = polylineEvent.state.strokeColor),
            position = polylineEvent.clicked
        )
    }

    MapboxMapView(
        state = mapViewState,
        modifier = modifier
    ) {
        val longDistancePoints = listOf(
            GeoPoint.fromLatLong(35.548852, 139.784086), // 羽田空港
            GeoPoint.fromLatLong(37.615223, -122.389979)   // サンフランシスコ空港
        )

        // 標準線
        Polyline(
            id = "straight-line",
            points = longDistancePoints,
            strokeColor = Color.Red,
            strokeWidth = 3.dp,
            geodesic = false,
            extra = "Straight line",
            onClick = onPolylineClick
        )

        // 測地線
        Polyline(
            id = "geodesic-line",
            points = longDistancePoints,
            strokeColor = Color.Blue,
            strokeWidth = 3.dp,
            geodesic = true,
            extra = "Geodesic line",
            onClick = onPolylineClick
        )

        markers.forEach { markerState ->
            Marker(markerState)
        }
    }
}

Manejo de Eventos

Las interacciones de polilínea se manejan mediante el componente de su proveedor de mapas:

// Reemplace MapView con su proveedor de mapas elegido, como GoogleMapView, MapboxMapView
MapView(
    state = mapViewState
) {
    Polyline(
        points = routePoints,
        strokeColor = Color.Blue,
        strokeWidth = 4.dp,
        extra = "Ruta interactiva",
        onClick = { polylineEvent ->
            val polyline = polylineEvent.state
            val clickPoint = polylineEvent.clicked

            println("Polilínea clickeada:")
            println("  Número de puntos: ${polyline.points.size}")
            println("  Ubicación del click: ${clickPoint}")
            println("  Datos adicionales: ${polyline.extra}")
        }
    )
}

Opciones de Estilo

Variaciones de Ancho de Línea

// Línea fina
Polyline(
    points = points,
    strokeWidth = 1.dp
)

// Línea media
Polyline(
    points = points,
    strokeWidth = 3.dp
)

// Línea gruesa
Polyline(
    points = points,
    strokeWidth = 8.dp
)

Variaciones de Color

// Colores sólidos
Polyline(points = points, strokeColor = Color.Red)
Polyline(points = points, strokeColor = Color.Blue)
Polyline(points = points, strokeColor = Color.Green)

// Semi-transparente
Polyline(points = points, strokeColor = Color.Red.copy(alpha = 0.7f))

// Color personalizado
Polyline(
    points = points,
    strokeColor = Color(0xFF4CAF50) // Verde material
)

Mejores Prácticas

1. Densidad de Puntos: Equilibrar detalle y rendimiento - demasiados puntos pueden ralentizar el renderizado
2. Líneas Geodésicas: Usar geodésicas para rutas de larga distancia para mostrar caminos precisos
3. Jerarquía Visual: Usar diferentes colores y anchos para distinguir diferentes tipos de rutas
4. Retroalimentación Interactiva: Proporcionar retroalimentación visual cuando las polilíneas sean clickeables
5. Rendimiento: Considerar usar geometría simplificada para polilíneas complejas en niveles de zoom específicos
6. Contraste de Color: Asegurar que el color de la polilínea destaque contra el fondo del mapa
7. Dirección de Ruta: Considerar añadir flechas o marcadores a lo largo de la ruta para indicar dirección
8. Gestión de Estado: Almacenar y actualizar datos de polilínea de manera eficiente y reactiva