MapConductorPolyline
केवल एक स्टेट ऑब्जेक्ट बनाएं जिसमें कोऑर्डिनेट्स की श्रृंखला और लाइन की स्टाइल हो, और उसे मैप व्यू पर रखें। लाइन की दिखावट, मोड़, और टैप का पता लगाना अक्सर प्रोवाइडर के आधार पर भिन्न होता है, लेकिन MapConductor यह सुनिश्चित करता है कि किसी भी प्रोवाइडर पर परिणाम समान आए।
01 · Polyline की स्थिति
PolylineState एक लाइन का प्रतिनिधित्व करता है। इसमें कोऑर्डिनेट्स की श्रृंखला, स्टाइल, और टैप हैंडलर होते हैं। प्रॉपर्टी को बदलने पर लाइन तुरंत अपडेट हो जाती है, इसलिए रूट के आकार में बदलाव वाले ऐप्स के लिए पुनर्निर्माण की आवश्यकता नहीं होती है।
val polylineState =
PolylineState(
points = routePoints,
strokeColor = Color.Red,
strokeWidth = 4.dp,
geodesic = true,
onClick = { event -> viewModel.onPolylineClick(event) },
)
// बस मैप के भीतर रख दें
Polyline(polylineState)
// आकार बदलना यानी सिर्फ़ points दोबारा लिखना
polylineState.points = nextPointslet polylineState = PolylineState(
points: routePoints,
strokeColor: .red,
strokeWidth: 4.0,
geodesic: true,
onClick: { event in viewModel.onPolylineClick(event) }
)
content.polylines = [Polyline(state: polylineState)]const polylineState = createPolylineState({
id: 'demo-polyline',
points,
strokeColor: '#e74c3c',
strokeWidth,
geodesic: true,
onClick: event => showToast(event.clicked),
});
<Polyline state={polylineState} />02 · सीधी रेखा और महान चक्कर पथ
geodesic को true पर सेट करने पर, दो बिंदुओं को पृथ्वी पर सबसे छोटा मार्ग (महान चक्कर पथ) से जोड़ा जाता है। लंबी दूरी की उड़ान पथ आदि सीधी रेखा के बजाय एक चाप बनाते हैं। false होने पर यह मैप प्रोजेक्शन पर एक सीधी रेखा है। दोनों को एक ही कोऑर्डिनेट्स के साथ एक साथ खींचकर तुलना की जा सकती है।
Polyline(polylineState) // geodesic = true (घुमावदार)
Polyline(
polylineState.copy(
id = "${polylineState.id}-straight",
geodesic = false,
strokeColor = Color.Blue,
),
)content.polylines = [
Polyline(state: polylineState), // घुमावदार
Polyline(state: polylineState.copy(geodesic: false)) // सीधा
]const straightPolyline = polyline.copy({
id: `${polyline.id}-straight`,
geodesic: false,
strokeColor: '#0000ff',
});
<Polyline state={polyline} />
<Polyline state={straightPolyline} />03 · किसी भी प्रोवाइडर पर समान दिखाई देता है
मैप इंजन में, कुछ महान चक्कर पथ बना सकते हैं और कुछ नहीं, लाइन की मोटाई की इकाइयाँ भिन्न होती हैं, और दिनांक रेखा को पार करने वाली लाइनों का उपचार भिन्न होता है। यदि आप बेअसर SDK का उपयोग करते हैं, तो समान कोऑर्डिनेट्स के साथ भी दिखावट बदल सकती है।
MapConductor आंतरिक रूप से इस अंतर को अवशोषित करता है। ऐप केवल एक PolylineState पास करता है, और किसी भी प्रोवाइडर पर समान चाप, समान मोटाई, और समान टैप रेंज मिलती है।
वक्र नहीं बना पाने वाले इंजन के लिए भी वही चाप
जो इंजन महावृत्त मार्ग को सीधे नहीं बना सकते, उन्हें रेखा को छोटे-छोटे खंडों में विभाजित निर्देशांक सूची में बदलकर दें। परिणामस्वरूप, किसी भी इंजन पर वही चाप प्रदर्शित होता है।
दिनांक रेखा को पार करने वाली रेखा
180 डिग्री रेखांश को पार करने वाली रेखा को जैसा है वैसा ही पासने पर कुछ इंजन इसे पृथ्वी को उल्टी दिशा में पार करते हुए दिखाते हैं। सीमा पर रेखा को विभाजित करकर देने से, कोई भी इंजन सबसे छोटी दिशा से होकर गुजरता है।
मोटाई के मानक को समान करें
रेखा की मोटाई प्लेटफ़ॉर्म के तार्किक इकाइयों में निर्दिष्ट करें। डिवाइस के पिक्सेल घनत्व और इंजन-विशिष्ट इकाई अंतर को आंतरिक रूप से परिवर्तित करने के कारण, वास्तविक डिवाइस पर दिखने वाली मोटाई मेल खाती है।
टैप पहचान भी सामान्य है
टैप पहचान इंजन पर छोड़ने के बजाय, एक सामान्य तर्क से की जाती है। यह उंगली के आकार के बराबर सहनशीलता को ज़ूम के अनुसार मीटर में बदलकर जांचता है, इसलिए ज़ूम स्तर अलग होने पर भी दबाने की सुविधा नहीं बदलती। वक्र के मामले में, यह चाप के साथ जांच करता है।
04 · टैप
onClick लाइन की स्थिति और लाइन पर टैप किए गए स्थान को प्राप्त करता है। टैप स्थान एक ऐसा कोऑर्डिनेट है जिसे लाइन के सबसे निकटतम बिंदु पर सुधारा गया है, इसलिए आप उस स्थान पर मार्कर लगा सकते हैं या दूरी की गणना कर सकते हैं।
टैप की गई रेखा की स्थिति स्वयं। आप रंग और extra से डेटा प्राप्त कर सकते हैं।
रेखा पर निर्देशांक। यह उंगली की स्थिति नहीं, बल्कि रेखा का निकटतम बिंदु है।
उंगली के आकार के बराबर लचीलापन रखकर जांच करें। इसे ज़ूम के अनुसार मीटर में बदला जाता है।
// टैप की गई जगह पर मार्कर गिराएँ
fun onPolylineClick(event: PolylineEvent) {
markers = markers + MarkerState(
position = event.clicked,
animation = MarkerAnimation.Drop,
icon = DefaultMarkerIcon(fillColor = event.state.strokeColor),
)
}func onPolylineClicked(_ event: PolylineEvent) {
markerState = MarkerState(
position: GeoPoint.from(position: event.clicked),
icon: DefaultMarkerIcon(fillColor: event.state.strokeColor)
)
}onClick: event => {
setClickMarkers(prev => [...prev, createMarkerState({
id: `polyline-click-${prev.length}`,
position: event.clicked,
animation: MarkerAnimation.Drop,
icon: new ColorDefaultIcon({ fillColor: event.state.strokeColor }),
})]);
},प्रदर्शन सीमा के बाहर के रेखाखंड निर्धारण से बाहर रखे जाते हैं, इसलिए चाहे कितनी भी लंबी रूट रख दी जाए, प्रतिक्रिया धीमी नहीं होती। यदि अनेक रेखाएँ एक दूसरे पर आच्छादित हैं, तो सबसे निकटतम रेखा चुनी जाती है।