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