GroundImage

Una GroundImage es una superposición de imagen posicionada geográficamente en un mapa. Es útil para mostrar planos de plantas, imágenes de satélite, superposiciones meteorológicas o datos basados en imágenes que deben anclarse a coordenadas geográficas específicas.

Función Composable

GroundImage Básico

@Composable
fun MapViewScope.GroundImage(
    bounds: GeoRectBounds,
    image: Drawable,
    opacity: Float = 0.5f,
    id: String? = null,
    extra: Serializable? = null
)

GroundImage con Estado

@Composable
fun MapViewScope.GroundImage(state: GroundImageState)

Parámetros

• bounds: Límites rectangulares geográficos donde se posiciona la imagen (GeoRectBounds)
• image: Imagen dibujable para mostrar (Drawable)
• opacity: Nivel de opacidad de 0.0 (transparente) a 1.0 (opaco) (predeterminado: 0.5f)
• id: Identificador único opcional para la GroundImage (String?)
• extra: Datos adicionales adjuntos a la GroundImage (Serializable?)

Ejemplos de Uso

GroundImage Básico

@Composable
fun BasicGroundImageExample(
    drawable: Drawable,
    modifier: Modifier = Modifier,
) {
    val mapViewState =
        rememberGoogleMapViewState(
            cameraPosition =
                MapCameraPosition(
                    position = GeoPoint(51.511649,-0.100761),
                    zoom = 12.0,
                ),
        )

    val bounds = GeoRectBounds(
        southWest = GeoPoint.fromLatLng(51.476747, -0.167729),
        northEast = GeoPoint.fromLatLng(51.546550,-0.033792),
    )
    GoogleMapView(
        modifier = modifier,
        state = mapViewState,
    ) {
        GroundImage(
            id = "groundimage",
            bounds = bounds,
            image = drawable,
            opacity = 0.6f
        )
    }
}

image: http://maps.bpl.org, CC BY 2.0, via Wikimedia Commons

GroundImage Interactivo con Marcadores de Límites

@Composable
fun MapView(
    drawable: Drawable,
    modifier: Modifier = Modifier,
) {
    val mapViewState =
        rememberGoogleMapViewState(
            cameraPosition =
                MapCameraPosition(
                    position = GeoPoint(51.511649,-0.100761),
                    zoom = 12.0,
                ),
        )

    var marker1 by remember { mutableStateOf(MarkerState(
        position = GeoPoint.fromLatLong(51.476747,-0.167729),
        draggable = true,
    )) }
    var marker2 by remember { mutableStateOf(MarkerState(
        position = GeoPoint.fromLatLong(51.546550,-0.033792),
        draggable = true,
    )) }
    val bounds = GeoRectBounds(
        southWest = marker1.position as GeoPoint,
        northEast = marker2.position as GeoPoint,
    )
    var opacity by remember { mutableStateOf(0.7f) }

    Column(
        modifier = modifier,
    ) {
        Slider(
            value = opacity,
            onValueChange = { opacity = it },
            valueRange = 0f..1f,
            modifier = Modifier.padding(16.dp)
        )
        GoogleMapView(
            state = mapViewState,
        ) {
            Marker(marker1)
            Marker(marker2)
            GroundImage(
                id = "groundimage",
                bounds = bounds,
                image = drawable,
                opacity = opacity
            )
        }
    }
}

Manejo de Eventos

Las interacciones de GroundImage se manejan mediante el componente de su proveedor de mapas:

@Composable
fun GroundImageEventHandlingExample(overlayImage: Drawable) {
    val mapViewState = rememberGoogleMapViewState()

    GoogleMapView(
        state = mapViewState
    ) {
        val imageBounds = GeoRectBounds(
            northWest = GeoPoint.fromLatLong(37.8, -122.5),
            southEast = GeoPoint.fromLatLong(37.7, -122.4)
        )

        GroundImage(
            bounds = imageBounds,
            image = overlayImage,
            opacity = 0.7f,
            extra = "Base map overlay",
            onClick = { groundImageEvent ->
                println("Ground image clicked at: ${groundImageEvent.clicked}")
                println("Ground image: ${groundImageEvent.state}")
            }
        )
    }
}