MapConductorDokumentation / Grundlagen / Circle
Kreis (Circle)
Zeichnet einen Kreis mit einem Mittelpunkt und einem Radius in Metern. Der Radius passt sich dem Zoom an und sieht auf jedem Anbieter gleich aus.
ANDROID
com.mapconductor:core
iOS
MapConductorCore
REACT
@mapconductor/js-sdk-react
01 · Verwendung
Erstellen Sie einfach ein Zustandsobjekt und platzieren Sie es in der Kartenansicht. Radius und Farbe werden sofort durch Ändern der Eigenschaften übernommen.
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 · Wichtige Optionen
Option
Type
Beschreibung
center
GeoPoint
Der Mittelpunkt des Kreises.
radiusMeters
Double
Der Radius in Metern. Nicht in Bildschirmpixeln.
fillColor / strokeColor
Color
Füll- und Linienfarben. Die Transparenz wird mit dem Alpha-Wert der Farbe angegeben.
strokeWidth
Dp · Double · number
Linienstärke.
geodesic
Boolean · true
Ob ein korrekter Kreis entlang der Geodäte gezeichnet wird. Im Gegensatz zu Polygon und Polylinie ist die Voreinstellung für den Kreis true.
clickable
Boolean · true
Ob auf Tippen geprüft wird.
zIndex
Int? · null
Überlappungsreihenfolge. Kann auch weggelassen werden.
extra
any?
Beliebige zugehörige Daten. Werden beim Klick empfangen.
onClick
handler
Empfängt Tippen auf den Kreis.
03 · Beispiel
Radius durch Ziehen ändern
In der Beispiel-App werden Marker am Mittelpunkt und am Umfang platziert, und der Radius wird durch Ziehen des Markers am Umfang neu berechnet. Eine Hilfsfunktion zur Abstandsberechnung ist in core enthalten.