MapConductorGroundImage ― मानचित्र पर छवि चिपकाएँ
दक्षिण-पश्चिम और उत्तर-पूर्व के दो बिंदुओं से सीमा निर्धारित करें, और वहाँ एक छवि फैलाएँ। सुविधाओं के फर्श नक्शे, पुराने मानचित्र, हवाई तस्वीरें, या स्वयं बनाए गए रंगीन नक्शे आदि, टाइल न की गई छवियों को जैसी है वैसे ही मानचित्र पर ओवरले किया जा सकता है। सीमा और पारदर्शिता बाद में बदली जा सकती है, और कैमरा संचालन के अनुसार छवि जमीन से चिपकी हुई दिखाई देती है।
01 · GroundImage की स्थिति
GroundImageState एक छवि का प्रतिनिधित्व करता है। इसमें सीमा, छवि, पारदर्शिता, और टैप हैंडलर होता है। आप प्रत्येक प्लेटफ़ॉर्म के लिए प्राकृतिक रूप से छवि पास कर सकते हैं (Android के लिए Drawable, iOS के लिए UIImage, Web के लिए URL)।
val groundImageState =
GroundImageState(
id = "groundImage",
bounds =
GeoRectBounds(
southWest = southWestPosition,
northEast = northEastPosition,
),
image = drawable, // Drawable जस का तस दें
opacity = 0.5f,
onClick = this::onGroundImageClick,
)
GroundImage(groundImageState)let groundImageState = GroundImageState(
bounds: GeoRectBounds(southWest: southWest, northEast: northEast),
image: resources.image, // UIImage जस का तस दें
opacity: 0.5,
id: "groundImage"
)
content.groundImages = [GroundImage(state: groundImageState)]const image = createGroundImageState({
id: 'ground-image',
bounds: createGeoRectBounds({ southWest, northEast }),
imageUrl: GROUND_IMAGE_URL, // URL के रूप में दें
opacity,
onClick: () => showToast('Ground image clicked.'),
});
<GroundImage state={image} />02 · सीमा और पारदर्शिता
सीमा एक आयत है। यदि छवि का पहलू अनुपात और सीमा का पहलू अनुपात भिन्न है, तो इसे सीमा के अनुसार खींचा जाएगा, इसलिए कृपया उस सीमा को निर्दिष्ट करें जो चिपकाने वाले आरेखण के पहलू अनुपात से मेल खाती हो। सीमा, पारदर्शिता, और छवि सभी बाद में बदली जा सकती हैं, और बदलने पर रेंडरिंग में परिलक्षित होगा।
ड्रैग करके दायरा बनाएँ
दो बिंदुओं के मार्कर्स को ड्रैग करते हुए `bounds` को बदलने पर, चित्र अनुसरण करता है। हालाँकि, निरंतर अद्यतन का अनुसरण प्रदाता के अनुसार भिन्न होता है।
आधार मानचित्र के साथ ओवरलैप करें
पारदर्शिता कम करने पर, नीचे के मानचित्र की सड़कें और स्थान-नाम दिखाई देते हैं। इंजन के आधार पर परिवर्तन के समय और प्रभाव पर प्रतिबंध हो सकते हैं।
// कोनों के मार्कर खींचकर सीमा दोबारा बनाएँ
override fun onMarkerDrag(dragged: MarkerState) {
when (dragged.id) {
"south_west" -> southWestPosition = GeoPoint.from(dragged.position)
"north_east" -> northEastPosition = GeoPoint.from(dragged.position)
}
bounds = GeoRectBounds(southWest = southWestPosition, northEast = northEastPosition)
}
// अपारदर्शिता बस असाइन कर दें
groundImageState.opacity = sliderOpacityfunc setOpacity(_ value: Double) {
opacity = value
groundImageState.opacity = value
}
// मार्कर खींचने के साथ सीमा दोबारा बनाएँ
groundImageState.bounds = GeoRectBounds(southWest: sw, northEast: ne)// खींचते समय स्टेट ऑब्जेक्ट में सीधे लिखें, री-रेंडर का इंतज़ार न करें
const applyGeometry = (sw: GeoPoint, ne: GeoPoint) => {
image.bounds = createGeoRectBounds({ southWest: sw, northEast: ne });
polylineState.points = framePoints(sw, ne);
};
image.opacity = opacity;03 · किसी भी प्रदाता पर समान दिखाई देता है
GroundImage प्रत्येक मानचित्र SDK ड्राइवर में सबसे बड़े कार्यान्वयन अंतर वाली सुविधा है। छवि ओवरले तंत्र इंजन के आधार पर काफी भिन्न होते हैं, और कुछ में समकक्ष कार्यक्षमता भी नहीं होती है। MapConductor संभव होने पर इस अंतर को कम करता है, लेकिन कुछ प्रदाताओं में गतिशील परिवर्तनों पर प्रतिबंध बना रह सकता है।
समान दायरा, समान खिंचाव
चित्र निर्दिष्ट दायरे के अनुसार व्यवस्थित किया जाता है। इंजन की ओर से चित्र ओवरले के निर्देशांक तंत्र के अंतर की परवाह किए बिना, यह समान स्थिति और समान आकार में प्रदर्शित होता है।
पहले नेटिव सुविधाओं से आरेखित करें
प्रत्येक ड्राइवर, जहाँ तक संभव हो, उस मानचित्र SDK के विशिष्ट चित्र ओवरले की सुविधाओं का उपयोग करके इष्टतम रूप से आरेखित करता है (ArcGIS के लिए `MediaLayer` + `ImageElement`, Cesium के लिए `Rectangle` का चित्र सामग्री आदि)। यदि किसी इंजन में बिल्कुल समतुल्य सुविधा नहीं है, तो चित्र को काटकर टाइल के रूप में प्रदान किया जाता है और रास्टर लेयर के रूप में ओवरलैप किया जाता है। दोनों मार्गों में ऐप की ओर का कोड नहीं बदलता है।
प्रदाता द्वारा प्रतिबंध
दायरे का पुनर्निर्माण (ड्रैग के दौरान निरंतर अद्यतन) और पारदर्शिता में परिवर्तन, इंजन की ओर से बाधाओं के कारण सीमित हो सकते हैं। स्थैतिक व्यवस्था किसी भी प्रदाता के लिए समान है, लेकिन गतिशील रूप से बदलने के उद्देश्यों के लिए लक्षित प्रदाता पर जाँच की अनुशंसा की जाती है।
टैप परीक्षण भी समान है
टैप परीक्षण समान तर्क द्वारा किया जाता है, इसलिए इंजन द्वारा चित्र ओवरले के टैप का समर्थन किए जाने की परवाह किए बिना `onClick` को बुलाया जाता है।
04 · टैप
onClick छवि की स्थिति और टैप किए गए निर्देशांक प्राप्त करता है। नमूने में, टैप करने पर छवि को बदलकर प्रदर्शन स्विच किया जा रहा है।
// टैप पर इमेज बदलें
override fun onGroundImageClick(clicked: GroundImageEvent) {
val isBase = clicked.state.image == imageResources.image
image = if (isBase) imageResources.clickedImage else imageResources.image
}private func onGroundImageClick(_ event: GroundImageEvent) {
let isBase = groundImageState.image === resources.image
groundImageState.image = isBase ? resources.clickedImage : resources.image
}createGroundImageState({
bounds,
imageUrl,
onClick: event => showToast(event.clicked),
});टैप किए गए चित्र की स्थिति। आप वर्तमान चित्र और `extra` को संदर्भित कर सकते हैं।
टैप किए गए भौगोलिक निर्देशांक। दायरे में कहाँ दबाया गया है, यह पता चलता है।
छवि के पारदर्शी हिस्से भी टैप क्षेत्र में शामिल हैं। यदि आप पारदर्शी हिस्सों को गैर-प्रतिक्रियाशील बनाना चाहते हैं, तो क्षेत्र को छवि की वास्तविक वस्तु के अनुसार सेट करें या बहुभुज का उपयोग करें।