PolygonState

PolygonState gestiona la configuración y el comportamiento de superposiciones poligonales (áreas rellenas) en el mapa. Proporciona propiedades reactivas para vértices, trazo, relleno y opciones geodésicas.

Constructor

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

Propiedades

Propiedades básicas

• id: String: Identificador único (se genera automáticamente si no se proporciona).
• points: List<GeoPointInterface>: Lista de vértices que definen el polígono (debe estar cerrado).
• extra: Serializable?: Datos adicionales asociados al polígono.

Propiedades visuales

• strokeColor: Color: Color del borde.
• strokeWidth: Dp: Grosor del borde.
• fillColor: Color: Color de relleno.
• geodesic: Boolean: Indica si se dibujan aristas geodésicas.

Métodos

fun copy(...): PolygonState // Crear una copia modificada
fun fingerPrint(): PolygonFingerPrint // Detección de cambios
fun asFlow(): Flow<PolygonFingerPrint> // Actualizaciones reactivas

Ejemplos de uso

Polígono básico

val polygonState = PolygonState(
    points = 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) // Cerrar el polígono
    ),
    strokeColor = Color.Blue,
    strokeWidth = 2.dp,
    fillColor = Color.Blue.copy(alpha = 0.3f)
)

MapView(state = mapViewState) {
    Polygon(polygonState)
}

Polígono editable

@Composable
fun EditablePolygonExample() {
    var polygonState by remember {
        mutableStateOf(
            PolygonState(
                points = listOf(
                    GeoPoint.fromLatLong(37.7749, -122.4194),
                    GeoPoint.fromLatLong(37.7849, -122.4094),
                    GeoPoint.fromLatLong(37.7799, -122.3994),
                    GeoPoint.fromLatLong(37.7749, -122.4194)
                ),
                strokeColor = Color.Red,
                fillColor = Color.Red.copy(alpha = 0.2f),
                onClick = { event ->
                    println("Polígono pulsado en: ${event.clicked}")
                }
            )
        )
    }

    MapView(
        state = mapViewState
    ) {
        Polygon(polygonState)

        // Marcadores de vértices (excluyendo el punto de cierre)
        polygonState.points.dropLast(1).forEachIndexed { index, point ->
            Marker(
                position = point,
                icon = DefaultIcon(
                    fillColor = Color.Red,
                    label = "${index + 1}",
                    scale = 0.8f
                ),
                draggable = true,
                extra = "vertex_$index"
            )
        }
    }
}

Polígonos de zona

val zonePolygons = listOf(
    PolygonState(
        points = restrictedZonePoints,
        strokeColor = Color.Red,
        strokeWidth = 3.dp,
        fillColor = Color.Red.copy(alpha = 0.2f),
        extra = "Zona restringida"
    ),
    PolygonState(
        points = parkingZonePoints,
        strokeColor = Color.Blue,
        strokeWidth = 2.dp,
        fillColor = Color.Blue.copy(alpha = 0.2f),
        extra = "Zona de estacionamiento"
    ),
    PolygonState(
        points = safeZonePoints,
        strokeColor = Color.Green,
        strokeWidth = 2.dp,
        fillColor = Color.Green.copy(alpha = 0.2f),
        extra = "Zona segura"
    )
)

MapView(state = mapViewState) {
    zonePolygons.forEach { zone ->
        Polygon(zone)
    }
}

Formas complejas

@Composable
fun ComplexPolygonExample() {
    // Polígono en forma de estrella
    val starPolygon = remember {
        val center = GeoPoint.fromLatLong(37.7749, -122.4194)
        val points = mutableListOf<GeoPointInterface>()

        for (i in 0 until 10) {
            val angle = (i * 36.0) * Math.PI / 180.0
            val radiusMeters = if (i % 2 == 0) 0.01 else 0.005
            val lat = center.latitude + radiusMeters * cos(angle)
            val lng = center.longitude + radiusMeters * sin(angle)
            points.add(GeoPoint.fromLatLong(lat, lng))
        }
        points.add(points.first()) // Cerrar el polígono

        PolygonState(
            points = points,
            strokeColor = Color.Magenta,
            fillColor = Color.Magenta.copy(alpha = 0.4f),
            extra = "Forma de estrella"
        )
    }

    MapView(state = mapViewState) {
        Polygon(starPolygon)
    }
}

Manejo de eventos

Los eventos de polígono proporcionan tanto el estado como la posición del clic:

data class PolygonEvent(
    val state: PolygonState,
    val clicked: GeoPointInterface?
)

typealias OnPolygonEventHandler = (PolygonEvent) -> Unit

Buenas prácticas

1. Cerrar el polígono: Asegúrate de que el primer y el último punto sean iguales.
2. Orden de los vértices: Utiliza un orden consistente (en el sentido de las agujas del reloj / antihorario).
3. Rendimiento: Evita polígonos excesivamente complejos con muchos vértices.
4. Diseño visual: Usa transparencia adecuada en el relleno para mantener la visibilidad del mapa.
5. Validación: Comprueba que el polígono forme una geometría válida.