MapConductorDocumentación / Básicos / Circle
Círculo (Circle)
Dibuja un círculo con un centro y un radio en metros. El radio se ajusta al zoom y tiene el mismo aspecto en cualquier proveedor.
ANDROID
com.mapconductor:core
iOS
MapConductorCore
REACT
@mapconductor/js-sdk-react
01 · Uso
Simplemente cree un objeto de estado y colóquelo en la vista del mapa. El radio y el color se aplican inmediatamente al cambiar las propiedades.
CircleScreen.kt · Jetpack Compose
val circleState = remember {
CircleState(
center = GeoPoint.fromLatLong(21.382314, -157.933097),
radiusMeters = 1000.0,
strokeWidth = 3.dp,
fillColor = Color.Red.copy(alpha = 0.3f),
onClick = { /* circle tapped */ },
)
}
MapLibreMapView(state = mapState) {
Circle(circleState)
}CircleView.swift · SwiftUI
MapLibreMapView(state: mapState) {
Circle(
center: GeoPoint(latitude: 21.382314, longitude: -157.933097),
radiusMeters: 1000,
strokeColor: UIColor.red,
strokeWidth: 2,
fillColor: UIColor.blue.withAlphaComponent(0.3)
)
}CirclePage.tsx · React
import { createCircleState, createGeoPoint } from '@mapconductor/js-sdk-core';
import { Circle } from '@mapconductor/js-sdk-react';
const circle = useMemo(() => createCircleState({
id: 'circle',
center: createGeoPoint({ latitude: 21.382314, longitude: -157.933097 }),
radiusMeters: 1000,
strokeWidth: 3,
fillColor: 'rgba(0, 0, 255, 0.3)',
}), []);
<MapLibreMapView2D state={state}>
<Circle state={circle} />
</MapLibreMapView2D>02 · Opciones principales
Option
Type
Descripción
center
GeoPoint
El centro del círculo.
radiusMeters
Double
El radio en metros. No en píxeles de pantalla.
fillColor / strokeColor
Color
Colores de relleno y línea. La transparencia se especifica mediante el alfa del color.
strokeWidth
Dp · Double · number
Grosor de línea.
geodesic
Boolean · true
Si se dibuja un círculo correcto a lo largo de la línea geodésica. A diferencia del polígono y la polilínea, el valor predeterminado del círculo es true.
clickable
Boolean · true
Si se detecta el toque.
zIndex
Int? · null
Orden de superposición. Opcional.
extra
any?
Datos adjuntos arbitrarios. Se reciben al hacer clic.
onClick
handler
Recibe toques en el círculo.
03 · Ejemplo
Cambiar el radio arrastrando
En la aplicación de ejemplo, se colocan marcadores en el centro y en el perímetro, y el radio se recalcula arrastrando el marcador del perímetro. Hay una función auxiliar de cálculo de distancia incluida en core.