टाइल ऊपर लगाएं

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

टाइल ओवरले को टाइल लेयर भी कहा जाता है. यह इमेज का कलेक्शन होता है, जो बुनियादी मैप की टाइल के ऊपर दिखता है.

कोड सैंपल

GitHub पर मौजूद ApiDemos रिपॉज़िटरी में, एक ऐसा सैंपल है जो टाइल ओवरले की सुविधा के बारे में बताता है:

• TileOverlayDemoActivity - Java: Java में टाइल ओवरले की सुविधाएं
• TileCoordinateDemoActivity - Java: Java में टाइल ओवरले के लिए इस्तेमाल किया जाने वाला कोऑर्डिनेट सिस्टम
• TileOverlayDemoActivity - Kotlin: Kotlin में टाइल ओवरले की सुविधाएं
• TileCoordinateDemoActivity - Kotlin: Kotlin में टाइल ओवरले के लिए इस्तेमाल किया जाने वाला कोऑर्डिनेट सिस्टम

परिचय

A TileOverlay इमेज का एक सेट तय करता है, जो बुनियादी मैप की टाइल के ऊपर जोड़ा जाता है.

आपको हर उस ज़ूम करने के लेवल के लिए टाइलें उपलब्ध करानी होंगी जिसके लिए आपको सहायता देनी है. अगर आपके पास कई ज़ूम करने के लेवल के लिए, ज़रूरत के मुताबिक टाइलें हैं, तो पूरे मैप के लिए Google के मैप डेटा को सप्लीमेंट किया जा सकता है.

टाइल ओवरले तब काम के होते हैं, जब आपको मैप में ज़्यादा इमेज जोड़नी होती हैं, आम तौर पर, ये इमेज बड़े भौगोलिक इलाकों को कवर करती हैं. इसके उलट, ग्राउंड ओवरले तब काम के होते हैं, जब आपको मैप पर किसी एक जगह पर कोई इमेज जोड़नी होती है.

पारदर्शी टाइल ओवरले का इस्तेमाल करके, मैप में अतिरिक्त सुविधाएं भी जोड़ी जा सकती हैं, इसके लिए, टाइल ओवरले पर प्रोग्राम के ज़रिए पारदर्शिता फ़ैक्टर सेट किया जा सकता है या पारदर्शी टाइल इमेज उपलब्ध कराई जा सकती हैं.

टाइल कोऑर्डिनेट और ज़ूम करने का लेवल

Google Maps API, हर ज़ूम करने के लेवल पर इमेज को स्क्वेयर मैप टाइल के सेट में तोड़ता है. इन टाइल को ग्रिड में व्यवस्थित किया जाता है. जब कोई मैप नई जगह पर या नए ज़ूम करने के लेवल पर जाता है, तो Maps API यह तय करता है कि किन टाइल की ज़रूरत है. इसके बाद, वह जानकारी, वापस पाने के लिए टाइल के सेट में बदल जाती है.

कोऑर्डिनेट (0,0) वाली टाइल हमेशा मैप के उत्तर-पश्चिम कोने पर होती है, इसमें x की वैल्यू पश्चिम से पूर्व की ओर बढ़ने पर बढ़ती है और y की वैल्यू उत्तर से दक्षिण की ओर बढ़ने पर बढ़ती है. टाइलों को x,y कोऑर्डिनेट का इस्तेमाल करके इंडेक्स किया जाता है. ये कोऑर्डिनेट, ऑरिजिन से लिए जाते हैं.

ज़ूम करने के लेवल 0 पर, पूरी दुनिया को एक ही टाइल में रेंडर किया जाता है. हर ज़ूम लेवल, मैग्निफ़िकेशन को दो के फ़ैक्टर से बढ़ाता है. इसलिए, ज़ूम करने के लेवल 1 पर मैप को 2x2 टाइल ग्रिड के तौर पर रेंडर किया जाएगा. ज़ूम लेवल 2 पर, यह 4x4 ग्रिड होती है. ज़ूम करने के लेवल 3 पर, यह 8x8 ग्रिड होती है. इसी तरह, आगे भी.

उदाहरण के लिए, ज़ूम करने के लेवल 2 पर पृथ्वी को 16 टाइल में बांटा जाता है. हर टाइल को x, y, और ज़ूम के यूनीक कॉम्बिनेशन से रेफ़र किया जा सकता है:

टाइल लेयर के लिए इमेज बनाते समय, आपको हर उस ज़ूम करने के लेवल के लिए हर टाइल की एक इमेज बनानी होगी जिसके लिए आपको सहायता देनी है. Google Maps, टाइलें दिखाते समय 256 dp (डिवाइस-इंडिपेंडेंट पिक्सल) को टारगेट करता है. ज़्यादा रिज़ॉल्यूशन वाले डिवाइसों के लिए, हमारा सुझाव है कि आप ज़्यादा डीपीआई वाली टाइलें (512x512 पिक्सल) दिखाएं. अलग-अलग स्क्रीन साइज़ और डेंसिटी के साथ काम करने के बारे में जानकारी पाने के लिए , Android Developers के दस्तावेज़ देखें.

ध्यान दें: कैमरे के लिए सहायता देने वाले ज़ूम करने के लेवल, कई फ़ैक्टर पर निर्भर करते हैं, इनका उन ज़ूम करने के लेवल से कोई संबंध नहीं होता जिनके लिए आपकी टाइलें सहायता देंगी.

1. GoogleMap.getMaxZoomLevel() कैमरे की मौजूदा पोज़िशन पर उपलब्ध ज़्यादा से ज़्यादा ज़ूम करने का लेवल दिखाता है. इसमें, फ़िलहाल इस्तेमाल किए जा रहे मैप टाइप को ध्यान में रखा जाता है. उदाहरण के लिए, सैटलाइट या इलाके के हिसाब से मैप में बुनियादी मैप की टाइलों की तुलना में ज़ूम करने का लेवल कम हो सकता है.
2. GoogleMap.getMinZoomLevel() कम से कम ज़ूम लेवल दिखाता है. यह हर जगह के लिए एक जैसा होता है. हालांकि, डिवाइसों और मैप के साइज़ के हिसाब से इसमें अंतर हो सकता है.

टाइल ओवरले जोड़ना

टाइल ओवरले बनाने का सबसे आसान और आम तरीका यह है कि उससे जुड़ी टाइल इमेज की ओर ले जाने वाला यूआरएल उपलब्ध कराया जाए. UrlTileProvider , TileProvider का आंशिक तौर पर लागू किया गया वर्शन है. यह यूआरएल के आधार पर इमेज टाइल उपलब्ध कराता है. इस क्लास के लिए, यह ज़रूरी है कि सभी इमेज के डाइमेंशन एक जैसे हों.

आपको UrlTileProvider.getTileUrl() को लागू करना होगा. यह टाइल के कोऑर्डिनेट (x, y, ज़ूम) स्वीकार करता है और टाइल के लिए इस्तेमाल की जाने वाली इमेज की ओर ले जाने वाला यूआरएल दिखाता है. अगर दिए गए x, y, और ज़ूम के लिए कोई टाइल नहीं है, तो इस तरीके से शून्य वैल्यू दिखनी चाहिए. कोई यूआरएल, वेब रिसॉर्स, एक Android एसेट या लोकल डिस्क पर मौजूद किसी फ़ाइल की ओर ले जा सकता है.

किसी सर्वर पर टाइल इमेज का स्टॉक सेट अप करें. इसे उन सभी x,y कोऑर्डिनेट और ज़ूम करने के लेवल के लिए तय करें जिनके लिए आपको सहायता देनी है. इसके बाद, टाइल ओवरले जोड़ें:

1. टाइल इमेज उपलब्ध कराने के लिए, UrlTileProvider तय करें.
2. हर टाइल इमेज के लिए यूआरएल बनाने के लिए, getTileUrl() को बदलें.
3. काम के विकल्पों के साथ TileOverlayOptions ऑब्जेक्ट उपलब्ध कराएं:
• fadeIn: बूलियन. इससे यह तय होता है कि टाइलें फ़ेड इन होनी चाहिए या नहीं. डिफ़ॉल्ट वैल्यू true होती है. टाइल ओवरले के बीच तेज़ी से स्विच करते समय, फ़ेड-इन को बंद करना काम का हो सकता है. पारदर्शिता और फ़ेड-इन के बीच के संबंध के बारे में जानकारी पाने के लिए, नीचे दिया गया पारदर्शिता सेक्शन देखें.
• tileProvider: इस ओवरले के लिए इस्तेमाल किया जाने वाला TileProvider.
• transparency: फ़्लोट. इससे टाइल इमेज के लिए पारदर्शिता फ़ैक्टर सेट होता है. वैल्यू, [0.0f, 1.0f] के बीच होनी चाहिए. इसमें 0.0f का मतलब है पूरी तरह से ओपेक (डिफ़ॉल्ट) और 1.0f का मतलब है पूरी तरह से पारदर्शी. कोड सैंपल और पारदर्शिता और फ़ेड-इन के बीच के संबंध के बारे में जानकारी पाने के लिए, नीचे दिया गया पारदर्शिता सेक्शन देखें.
• visible: बूलियन. इससे टाइल ओवरले की विज़िबिलिटी तय होती है. न दिखने वाले टाइल ओवरले (वैल्यू false) को मैप पर नहीं दिखाया जाता. हालांकि, इसकी अन्य सभी प्रॉपर्टी बरकरार रहती हैं. डिफ़ॉल्ट वैल्यू होती हैtrue.
• zIndex: इससे यह तय होता है कि टाइल ओवरले को अन्य ओवरले के मुकाबले किस क्रम में दिखाया जाएगा. इनमें ग्राउंड ओवरले , सर्कल, पॉलीलाइन और पॉलीगॉन शामिल हैं. ज़्यादा z-इंडेक्स वाले ओवरले, कम z-इंडेक्स वाले ओवरले के ऊपर दिखाए जाते हैं. एक ही z-इंडेक्स वाले ओवरले का क्रम तय नहीं होता. डिफ़ॉल्ट z-इंडेक्स 0 होता है. ध्यान दें कि मार्कर हमेशा अन्य ओवरले के ऊपर दिखाए जाते हैं. भले ही, अन्य ओवरले का z-इंडेक्स कुछ भी हो.
4. मैप में ओवरले जोड़ने के लिए, GoogleMap.addTileOverlay() को कॉल करें.

Kotlin

val tileProvider: TileProvider = object : UrlTileProvider(256, 256) {
    override fun getTileUrl(x: Int, y: Int, zoom: Int): URL? {

        /* Define the URL pattern for the tile images */
        val url = "http://my.image.server/images/$zoom/$x/$y.png"
        return if (!checkTileExists(x, y, zoom)) {
            null
        } else try {
            URL(url)
        } catch (e: MalformedURLException) {
            throw AssertionError(e)
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private fun checkTileExists(x: Int, y: Int, zoom: Int): Boolean {
        val minZoom = 12
        val maxZoom = 16
        return zoom in minZoom..maxZoom
    }
}

val tileOverlay = map.addTileOverlay(
    TileOverlayOptions()
        .tileProvider(tileProvider)
)
tileOverlay?.let {
    val isVisible = it.isVisible
    val fadeIn = it.fadeIn
    val transparency = it.transparency
    val zIndex = it.zIndex
}

      

Java

TileProvider tileProvider = new UrlTileProvider(256, 256) {

    @Override
    public URL getTileUrl(int x, int y, int zoom) {

        /* Define the URL pattern for the tile images */
        String s = String.format(java.util.Locale.US, "http://my.image.server/images/%d/%d/%d.png", zoom, x, y);

        if (!checkTileExists(x, y, zoom)) {
            return null;
        }

        try {
            return new URL(s);
        } catch (MalformedURLException e) {
            throw new AssertionError(e);
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private boolean checkTileExists(int x, int y, int zoom) {
        int minZoom = 12;
        int maxZoom = 16;

        return (zoom >= minZoom && zoom <= maxZoom);
    }
};

TileOverlay tileOverlay = map.addTileOverlay(new TileOverlayOptions()
    .tileProvider(tileProvider));

      

UrlTileProvider का उदाहरण देखने के लिए, Google Play services SDK के साथ बंडल किए गए सैंपल कोड में मौजूद TileOverlayDemoActivity देखें.

ध्यान दें: अगर आपको ज़्यादा कंट्रोल चाहिए, तो TileProvider इंटरफ़ेस को लागू करके, टाइल प्रोवाइडर तय किया जा सकता है.

टाइल ओवरले के लिए पारदर्शिता सेट करना

मैप पर पारदर्शी टाइलें ओवरले करना काम का हो सकता है, ताकि उपयोगकर्ता ओवरले की गई टाइल के नीचे बुनियादी मैप देख सकें. इसके लिए, अपनी पारदर्शी टाइलें उपलब्ध कराई जा सकती हैं या टाइल ओवरले पर प्रोग्राम के ज़रिए पारदर्शिता फ़ैक्टर सेट किया जा सकता है.

यहां दिए गए कोड सैंपल में, टाइल ओवरले की पारदर्शिता को 0.5f और 0.0f के बीच टॉगल किया जाता है:

Kotlin

val tileOverlayTransparent = map.addTileOverlay(
    TileOverlayOptions()
        .tileProvider(object : UrlTileProvider(256, 256) {
            // ...
        })
        .transparency(0.5f)
)

// Switch between 0.0f and 0.5f transparency.
tileOverlayTransparent?.let {
    it.transparency = 0.5f - it.transparency
}

      

Java

TileOverlay tileOverlayTransparent = map.addTileOverlay(new TileOverlayOptions()
    .tileProvider(new UrlTileProvider(256, 256) {
        // ...
    })
    .transparency(0.5f));

// Switch between 0.0f and 0.5f transparency.
if (tileOverlayTransparent != null) {
    tileOverlayTransparent.setTransparency(0.5f - tileOverlayTransparent.getTransparency());
}

      

पारदर्शिता को टाइल इमेज के लिए, अल्फ़ा चैनल मल्टीप्लायर के तौर पर लागू किया जाता है. टाइल ओवरले की पारदर्शिता सेट करने के लिए, TileOverlayOptions ऑब्जेक्ट उपलब्ध कराएं. इसमें transparency की वैल्यू, ऊपर दिए गए सैंपल में दिखाए गए तरीके से [0.0f, 1.0f] के बीच होनी चाहिए. 0.0f वैल्यू का मतलब है कि टाइल ओवरले पूरी तरह से ओपेक है और 1.0f का मतलब है कि यह पूरी तरह से पारदर्शी है. डिफ़ॉल्ट वैल्यू 0.0f (ओपेक) होती है.

टाइल ओवरले की पारदर्शिता को TileOverlay.getTransparency() को कॉल करके ऐक्सेस किया जा सकता है. साथ ही, TileOverlay.setTransparency() को कॉल करके, इसे बदला जा सकता है.

पारदर्शिता, ऐनिमेशन, और फ़ेड-इन

पारदर्शिता में बदलाव होने पर, कोई ऐनिमेशन नहीं दिखता. पारदर्शिता का विकल्प, fadeIn विकल्प के साथ काम करता है.

फ़ेड-इन, टाइल लोड होने पर पारदर्शिता का ऐनिमेशन दिखाता है. अगर पारदर्शिता की कोई वैल्यू सेट की जाती है, तो टाइलें पूरी तरह से पारदर्शी से लेकर तय की गई पारदर्शिता वैल्यू तक फ़ेड इन होती हैं. अगर फ़ेड-इन के दौरान पारदर्शिता में बदलाव किया जाता है, तो ऐनिमेशन नई टारगेट पारदर्शिता की ओर बढ़ता रहता है.

टाइल ओवरले हटाना

TileOverlay.remove() तरीके से, टाइल ओवरले हटाया जा सकता है.

Kotlin

tileOverlay?.remove()

      

Java

tileOverlay.remove();

      

पुरानी टाइलें साफ़ करना

अगर टाइल ओवरले से उपलब्ध कराई गई टाइलें 'पुरानी' हो जाती हैं, तो रीफ़्रेश करने के लिए, clearTileCache() को कॉल किया जा सकता है. इससे इस ओवरले पर मौजूद सभी टाइलें फिर से लोड हो जाएंगी. उदाहरण के लिए, अगर से उपलब्ध कराई गई टाइलें TileProvider बदल जाती हैं, तो यह पक्का करने के लिए कि पिछली टाइलें अब रेंडर न हों, इसके बाद clearTileCache() को कॉल करना ज़रूरी है.

Kotlin

tileOverlay?.clearTileCache()

      

Java

tileOverlay.clearTileCache();