MapConductorपॉलीगॉन
परिधि के निर्देशांक और मनमानी संख्या में छेद (holes) वाला एक सतह है। भरण और रेखा शैलियों के साथ मानचित्र दृश्य में रखने भर से, क्षेत्र का प्रदर्शन या मास्क प्रभाव बनाया जा सकता है। छेद के संचालन में मानचित्र SDK के अनुसार विशिष्टताएँ होती हैं, लेकिन MapConductor यह सुनिश्चित करता है कि किसी भी प्रदाता पर यह एक ही दिखाई दे।
01 · पॉलीगॉन की स्थिति
PolygonState एक सतह का प्रतिनिधित्व करता है। इसमें परिधि, छेद, भरण, रेखा और टैप हैंडलर होते हैं, और गुणों को बदलने पर आकार तत्काल अपडेट हो जाता है। शीर्ष मार्कर्स को खींचकर आकार संपादित करने जैसे UI भी, निर्देशांक को बदलकर ही बनाए जा सकते हैं।
val polygonState =
PolygonState(
points = outerRing,
holes = listOf(holeA, holeB),
strokeColor = Color.Red,
strokeWidth = 3.dp,
fillColor = Color(0x4D0064E6),
onClick = { event -> viewModel.onPolygonClick(event) },
)
Polygon(polygonState)
// शीर्ष और छेद बस दोबारा लिखने से अपडेट हो जाते हैं
polygonState.holes = nextHoleslet polygonState = PolygonState(
points: outerRing,
strokeColor: .red,
strokeWidth: 3.0,
fillColor: UIColor(red: 0, green: 0.39, blue: 0.9, alpha: 0.3),
holes: [holeA, holeB],
onClick: { event in viewModel.onPolygonClicked(event) }
)
content.polygons = [Polygon(state: polygonState)]const polygonState = createPolygonState({
id: 'demo-polygon',
points: vertices,
holes,
strokeColor: '#e74c3c',
strokeWidth,
fillColor: `rgba(0, 100, 230, ${fillOpacity})`,
onClick: () => showToast('Polygon clicked'),
});
<Polygon state={polygonState} />02 · छेद (holes) और ओवरलैप का संघटन
छेद परिधि से हटाई गई क्षेत्र हैं। मास्क प्रभाव में अक्सर "दिखाने वाली जगह" को छेद के रूप में रखा जाता है, और तब छेद आपस में ओवरलैप हो सकते हैं।
कई मानचित्र SDK ओवरलैप किए गए छेदों को उसी रूप में पास करने पर ओवरलैप वाले हिस्से में रूपरेखा खींच देते हैं, जिससे छेदों के बीच की सीमा दिखाई देने लगती है। MapConductor छेदों को संयोजित करने के बाद आरेखित करता है, इसलिए ओवरलैप को एक छेद के रूप में माना जाता है और अतिरिक्त रेखाएँ नहीं बनती हैं।
// ओवरलैप करते छेद जस के तस दिए जा सकते हैं; भीतर वे एक छेद बन जाते हैं
PolygonState(
points = outerRing,
holes =
listOf(
triangleA, // ← ये आपस में ओवरलैप करते हैं
triangleB,
),
fillColor = Color(0xCC787880),
)// ओवरलैप करते छेद जस के तस दिए जा सकते हैं; भीतर वे एक छेद बन जाते हैं
let state = PolygonState(
points: outerRing,
fillColor: UIColor(white: 0.47, alpha: 0.8),
holes: [triangleA, triangleB]
)// ओवरलैप करते छेद जस के तस दिए जा सकते हैं; भीतर वे एक छेद बन जाते हैं
const state = createPolygonState({
id: 'world-hole',
points: OUTER_POINTS,
holes, // आपस में ओवरलैप करते दो त्रिकोण
fillColor: 'rgba(120, 120, 128, 0.8)',
strokeColor: '#ef4444',
strokeWidth: 2,
});03 · किसी भी प्रदाता पर समान दिखाई देता है
छेदों के ओवरलैप के अलावा, सतह आरेखण में इंजन के अनुसार अंतर आ सकता है। MapConductor इन्हें आंतरिक रूप से समायोजित करता है और यह सुनिश्चित करता है कि समान PolygonState से समान चित्र बने।
ओवरलैपिंग छेदों को मिलाएं
छेदों के बीच ओवरलैप बनाने की प्रक्रिया के दौरान एक क्षेत्र में मिला दिया जाता है। न तो आकृति की रेखा ओवरलैपिंग हिस्से में दिखाई देती है और न ही भराव दोहराया जाता है।
वक्र न खींच सकने वाले इंजन को भी वही आकार
ग्रेट सर्कल कोर्स को सीधे नहीं खींच सकने वाले इंजन के लिए, किनारों को छोटे-छोटे हिस्सों में विभाजित निर्देशांक की श्रृंखला में बदलकर दिया जाता है। व्यापक क्षेत्र में भी आकार मेल खाता है।
अंतर्राष्ट्रीय तिथि रेखा को पार करने वाला फलक
180 डिग्री देशांतर को पार करने वाले फलक को सीमा पर विभाजित करके दिया जाता है। पृथ्वी को उल्टी दिशा में पार करने वाले भराव वाले इंजन में भी सही तरफ भरा जाता है।
टैप परीक्षण भी आम
टैप परीक्षण आम तर्क से किया जाता है, और छेद के अंदर टैप पर प्रतिक्रिया नहीं होती। इंजन छेद पर विचार करे या न करे, दिखाई देने वाले अनुसार ही परीक्षण होता है।
04 · टैप
onClick सतह की स्थिति और टैप किए गए निर्देशांक प्राप्त करता है। भरण या extra से डेटा निकालकर विवरण प्रदर्शित करना एक सामान्य उपयोग है।
टैप किए गए फलक की स्थिति। भराव रंग और extra से डेटा निकाला जा सकता है।
टैप किए गए भौगोलिक निर्देशांक।
छेद के अंदर टैप करने पर भी, उस फलक की घटना ट्रिगर नहीं होती। केवल दिखाई देने वाला भरा हुआ हिस्सा ही इसका विषय है।
fun onPolygonClicked(event: PolygonEvent) {
markerState = MarkerState(
position = event.clicked,
icon = DefaultMarkerIcon(fillColor = event.state.fillColor),
)
}func onPolygonClicked(_ event: PolygonEvent) {
let color = event.state.fillColor.withAlphaComponent(1.0)
markerState = MarkerState(
position: GeoPoint.from(position: event.clicked),
id: "clicked",
icon: DefaultMarkerIcon(fillColor: color)
)
}onClick: event => {
setMarker(createMarkerState({
id: 'clicked',
position: event.clicked,
icon: new ColorDefaultIcon({ fillColor: event.state.fillColor }),
}));
},यदि सतहें ओवरलैप कर रही हैं, तो ऊपर वाला (zIndex बड़ा वाला) प्राथमिकता पाता है। भले ही कई बड़े क्षेत्र रखे गए हों, प्रदर्शन सीमा से बाहर की सतहें निर्णय से बाहर रखी जाती हैं।