टाइल ओवरले

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

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

कोड के नमूने

GitHub पर ApiDemos डेटा स्टोर करने की जगह में एक नमूना शामिल है जो टाइल ओवरले सुविधा के बारे में बताता है:

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

सुविधा के बारे में जानकारी

TileOverlay इमेज के एक ऐसे सेट के बारे में बताता है जो मैप की बेस टाइल के ऊपर जोड़े जाते हैं.

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

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

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

टाइल निर्देशांक और ज़ूम स्तर

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

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

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

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

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

ध्यान दें: कैमरे के साथ काम करने वाला ज़ूम का लेवल कई चीज़ों पर निर्भर करता है. यह आपकी ज़ूम के लेवल से जुड़ा नहीं होता.

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() को कॉल करें.

Java

private GoogleMap map;

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("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));

      

Kotlin

private lateinit var map: GoogleMap

var 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)
)

      

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

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

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

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

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

Java

private TileOverlay tileOverlayTransparent;

@Override
public void onMapReady(GoogleMap map) {
    tileOverlayTransparent = map.addTileOverlay(new TileOverlayOptions()
        .tileProvider(new UrlTileProvider(256, 256) {
            // ...
        })
        .transparency(0.5f));
}

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

      

Kotlin

private var tileOverlayTransparent: TileOverlay? = null

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

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

      

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

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

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

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

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

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

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

Java

tileOverlay.remove();

      

Kotlin

tileOverlay?.remove()

      

पुरानी टाइल हटाएं

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

Java

tileOverlay.clearTileCache();

      

Kotlin

tileOverlay?.clearTileCache()