MapConductorदस्तावेज़ / बुनियादी / Circle
वृत्त (Circle)
केंद्र और मीटर में त्रिज्या के साथ एक वृत्त बनाता है। त्रिज्या ज़ूम के अनुसार समायोजित होती है, और किसी भी प्रदाता पर वही दिखाई देती है।
ANDROID
com.mapconductor:core
iOS
MapConductorCore
REACT
@mapconductor/js-sdk-react
01 · उपयोग
स्टेट ऑब्जेक्ट बनाएं और बस नक़्शे के दृश्य में रखें। त्रिज्या और रंग प्रॉपर्टी बदलने पर तुरंत प्रभाव पड़ता है।
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 · मुख्य विकल्प
Option
Type
विवरण
center
GeoPoint
वृत्त का केंद्र।
radiusMeters
Double
मीटर में त्रिज्या। स्क्रीन पिक्सेल में नहीं।
fillColor / strokeColor
Color
भरण और रेखा का रंग। पारदर्शिता रंग के अल्फा से निर्दिष्ट करें।
strokeWidth
Dp · Double · number
रेखा की मोटाई।
geodesic
Boolean · true
क्या जियोडेसिक रेखा के साथ सही वृत्त बनाना है। बहुभुज और पॉलीलाइन के विपरीत, वृत्त का डिफ़ॉल्ट true है।
clickable
Boolean · true
टैप पहचान की उपस्थिति।
zIndex
Int? · null
ओवरलैप क्रम। निर्दिष्ट न होने पर भी चलेगा।
extra
any?
मनमाना संबंधित डेटा। क्लिक पर प्राप्त किया जा सकता है।
onClick
handler
वृत्त पर टैप प्राप्त करें।
03 · सैंपल
ड्रैग करके त्रिज्या बदलें
सैंपल ऐप में, केंद्र और परिधि पर मार्कर रखे गए हैं, और परिधि मार्कर को ड्रैग करके त्रिज्या की पुनर्गणना की जाती है। दूरी गणना का हेल्पर core में शामिल है।