Polygon

Un polígono es una forma cerrada que define un área con propiedades de trazo y relleno personalizables. Los polígonos son útiles para representar zonas, regiones, límites o características basadas en áreas.

Funciones Composable

Polígono Básico

@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
)

Polígono con Estado

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)

Parámetros

• points: Lista de coordenadas geográficas que definen los vértices del polígono (List<GeoPointInterface>)
• id: Identificador único opcional para el polígono (String?)
• strokeColor: Color del límite del polígono (predeterminado: Color.Black)
• strokeWidth: Ancho de la línea de límite (predeterminado: 1.dp)
• fillColor: Color de relleno del interior del polígono (predeterminado: Color.Transparent)
• geodesic: Si se deben dibujar bordes geodésicos (predeterminado: false)
• extra: Datos adicionales adjuntos al polígono (Serializable?)

Ejemplos de Uso

Polígono Básico

// Replace MapView with your chosen provider, such as GoogleMapView or 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)
    )
}

Polígono Interactivo con Marcadores de Vértices

@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 clicked at: ${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)
        }
    }
}

Polígono Geodésico vs Polígono Estándar

@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("Comenzó a arrastrar el marcador: ${markerState.id}")
    }
    val onMarkerDrag: OnMarkerEventHandler = { markerState ->
        println("Arrastrando el marcador a: ${markerState.position}")
    }
    val onMarkerDragEnd: OnMarkerEventHandler = { markerState ->
        println("Finalizó el arrastre del marcador: ${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("El mapa se cargó y está listo")
        },
        onMapClick = {
            marker = null // Borrar la selección al pulsar el mapa
        }
    ) {

        // Contenido interactivo con marcadores
        Polygon(polygonState)
        Polygon(geodesicPolygonState)

        // Mostrar información del marcador seleccionado
        marker?.let { markerState ->
            Marker(markerState)
        }
    }
}