टाइल की लेयर

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

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

परिचय

टाइल लेयर (जिन्हें कभी-कभी टाइल ओवरले भी कहा जाता है) की मदद से, Google के बेस मैप टाइल के ऊपर इमेज को सुपरइंपोज किया जा सकता है. यह आपके ऐप्लिकेशन में डेटा और स्थानीय इमेज जोड़ने का बेहतरीन तरीका है. जैसे, लोकप्रिय जगहों या ट्रैफ़िक की जानकारी. kGMSTypeNone मैप टाइप के साथ टाइल लेयर का इस्तेमाल करने पर, Google के बेस मैप डेटा को अपने डेटा से बदला जा सकता है.

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

टाइल कोऑर्डिनेट

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

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

दुनिया का मैप, जिसे टाइल की चार पंक्तियों और चार कॉलम में बांटा गया है.

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

टाइल लेयर जोड़ना

  1. GMSURLTileLayer ऑब्जेक्ट या GMSTileLayer या GMSSyncTileLayer के कस्टम सबक्लास को इंस्टैंशिएट करें.
  2. zIndex प्रॉपर्टी में बदलाव करके, टाइल की अन्य लेयर के हिसाब से उसकी स्थिति में बदलाव किया जा सकता है.
  3. GMSTileLayer ऑब्जेक्ट की map प्रॉपर्टी सेट करके, उसे मैप पर असाइन करें.

iOS के लिए Maps SDK टूल में तीन क्लास उपलब्ध हैं. इनका इस्तेमाल टाइल लेयर लागू करने के लिए किया जा सकता है. हर क्लास के लिए, आपको यह तय करना होगा कि {x,y,zoom} कोऑर्डिनेट के किसी दिए गए सेट के लिए, सही मैप टाइल को फ़ेच कैसे किया जाए. ये विकल्प उपलब्ध हैं:

  • सबक्लास GMSSyncTileLayer, tileForX:y:zoom को लागू करता है, जो UIImage इंस्टेंस दिखाता है.
  • सबक्लास GMSTileLayer, असाइनोक्रोनस तरीका requestTileForX:y:zoom लागू करता है. यह तरीका बाद में टाइल इमेज के साथ कॉल करता है.
  • यूआरएल से टाइल अपने-आप फ़ेच करने के लिए, GMSURLTileLayer ब्लॉक की मदद से मौजूदा क्लास का इस्तेमाल करें.GMSTileURLConstructor GMSURLTileLayer एक ऐसी क्लास है जिसकी सब-क्लास नहीं बनाई जा सकती.

GMSSyncTileLayer या GMSTileLayer के सबक्लास के मामले में, nil टाइल का नतीजा देने से, iOS के लिए Maps SDK टूल को पता चलेगा कि फ़िलहाल डेटा उपलब्ध नहीं है, लेकिन आने वाले समय में यह उपलब्ध हो सकता है. इसके अलावा, इस जगह पर कोई टाइल नहीं है, यह बताने के लिए kGMSTileLayerNoTile दिखाएं.

GMSURLTileLayer के लिए, GMSTileURLConstructor से nil पर वापस जाने पर, यह पता चलेगा कि इस जगह पर कोई टाइल नहीं है.

यूआरएल से टाइल फ़ेच करने के लिए, GMSURLTileLayer का इस्तेमाल करना

GMSURLTileLayer के लिए सबक्लास बनाने की ज़रूरत नहीं है, लेकिन आपको GMSTileURLConstructor ब्लॉक लागू करना होगा. यहां दिए गए कोड में, कई स्टोरी वाली इमारत का फ़्लोर प्लान दिखाने के लिए, GMSURLTileLayer का इस्तेमाल करने का तरीका बताया गया है.

Swift

let floor = 1

// Implement GMSTileURLConstructor
// Returns a Tile based on the x,y,zoom coordinates, and the requested floor
let urls: GMSTileURLConstructor = { (x, y, zoom) in
  let url = "https://www.example.com/floorplans/L\(floor)_\(zoom)_\(x)_\(y).png"
  return URL(string: url)
}

// Create the GMSTileLayer
let layer = GMSURLTileLayer(urlConstructor: urls)

// Display on the map at a specific zIndex
layer.zIndex = 100
layer.map = mapView
      

Objective-C

NSInteger floor = 1;

// Create the GMSTileLayer
GMSURLTileLayer *layer = [GMSURLTileLayer tileLayerWithURLConstructor:^NSURL * _Nullable(NSUInteger x, NSUInteger y, NSUInteger zoom) {
  NSString *url = [NSString stringWithFormat:@"https://www.example.com/floorplans/L%ld_%lu_%lu_%lu.png",
                   (long)floor, (unsigned long)zoom, (unsigned long)x, (unsigned long)y];
  return [NSURL URLWithString:url];
}];

// Display on the map at a specific zIndex
layer.zIndex = 100;
layer.map = mapView;
      

टाइल को UIImage के तौर पर दिखाने के लिए, GMSSyncTileLayer का सबक्लास

GMSSyncTileLayer और GMSTileLayer ऐब्स्ट्रैक्ट क्लास हैं, जिन्हें सबक्लास के तौर पर डिज़ाइन किया गया है. इन क्लास का इस्तेमाल करके, टाइल को UIImage के तौर पर दिखाया जा सकता है. यहां दिए गए उदाहरण में, GMSSyncTileLayer की सबक्लास बनाकर, मैप पर कुछ टाइल के ऊपर कस्टम इमेज को रेंडर करने का तरीका बताया गया है.

Swift

class TestTileLayer: GMSSyncTileLayer {
  override func tileFor(x: UInt, y: UInt, zoom: UInt) -> UIImage? {
    // On every odd tile, render an image.
    if (x % 2 == 1) {
      return UIImage(named: "australia")
    } else {
      return kGMSTileLayerNoTile
    }
  }
}

      

Objective-C

@interface TestTileLayer : GMSSyncTileLayer
@end

@implementation TestTileLayer

- (UIImage *)tileForX:(NSUInteger)x y:(NSUInteger)y zoom:(NSUInteger)zoom {
  // On every odd tile, render an image.
  if (x % 2 == 1) {
    return [UIImage imageNamed:@"australia"];
  } else {
    return kGMSTileLayerNoTile;
  }
}

@end
      

अपने मैप में लेयर जोड़ने के लिए, ऑब्जेक्ट को इंस्टैंशिएट करें और उसकी मैप प्रॉपर्टी सेट करें.

Swift

let layer = TestTileLayer()
layer.map = mapView
      

Objective-C

GMSTileLayer *layer = [[TestTileLayer alloc] init];
layer.map = mapView;
      

रेटिना डिवाइसों के लिए हाई डीपीआई टाइल

tileSize को 512 पर सेट करके, GMSSyncTileLayer या GMSURLTileLayer के साथ हाई डीपीआई वाली इमेज का इस्तेमाल किया जा सकता है. tileSize प्रॉपर्टी से पता चलता है कि दी गई टाइल इमेज कितने पिक्सल में दिखेंगी. डिफ़ॉल्ट रूप से, यह वैल्यू 256 होती है. यह वैल्यू, बिना Retina डिवाइस पर Google Maps टाइल के डाइमेंशन के बराबर होती है.

अगर हाई डीपीआई डिवाइस पर सामान्य डीपीआई टाइल दिखाई जा रही हैं, तो tileSize को 512 पर सेट करके इमेज को बड़ा किया जा सकता है. ध्यान दें कि इमेज को बड़ा करने पर, इमेज की क्वालिटी में कमी आ सकती है. खास तौर पर, महीन लाइनों या टेक्स्ट के लिए. सबसे अच्छे नतीजे पाने के लिए, डिसप्ले के हिसाब से tileSize और इमेज का डीपीआई मैच करें. Retina डिवाइस पर Maps का सबसे बेहतरीन अनुभव तब मिलता है, जब 512 tileSize वाली हाई डीपीआई इमेज देखी जाती हैं. वहीं, बिना Retina डिवाइस पर Maps का सबसे बेहतरीन अनुभव तब मिलता है, जब सामान्य इमेज और डिफ़ॉल्ट tileSize 256 देखी जाती हैं.

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

अगर लेयर से मिली टाइल 'पुरानी' हो जाती हैं, तो रीफ़्रेश करने के लिए, लेयर पर clearTileCache को कॉल किया जाना चाहिए. ऐसा करने पर, इस लेयर पर मौजूद सभी टाइल फिर से लोड हो जाएंगी.

Swift

layer.clearTileCache()
      

Objective-C

[layer clearTileCache];