3D Maps के लिए सबसे सही तरीके

इस गाइड में, 3D Maps Web कॉम्पोनेंट के बारे में ज़्यादा जानकारी दी गई है. साथ ही, इसे अपने ऐप्लिकेशन के साथ इंटिग्रेट करते समय ध्यान रखने वाली बातों के बारे में बताया गया है.

जगहें खोजने और रास्ता ढूंढने का उदाहरण.

परफ़ॉर्मेंस से जुड़ी बातें

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

मैप लोड करना

3D मैप को लोड करने और रेंडर करने के शुरुआती सेटअप में, ब्राउज़र कॉन्फ़िगरेशन की तकनीकों और यूज़र इंटरफ़ेस (यूआई) के सबसे सही तरीकों का इस्तेमाल किया जाता है, ताकि उपयोगकर्ताओं को बेहतर अनुभव मिल सके.

• एपीआई लोड करना: पेज के शुरुआती लोड के दौरान Maps JavaScript API को लोड करने के लिए, 3D Maps की एसिंक डाइनैमिक लोडिंग का इस्तेमाल करें.
• लाइब्रेरी: प्रोग्राम के हिसाब से, ज़रूरत के मुताबिक लाइब्रेरी लोड करें. जैसे, google.maps.importLibrary("maps3d"). इसके अलावा, अगर डायरेक्ट स्क्रिप्ट लोडिंग की मदद से, अपने एचटीएमएल पेज में सीधे तौर पर <gmp-map-3d> जैसे वेब कॉम्पोनेंट का इस्तेमाल किया जाता है, तो लाइब्रेरी सही समय पर अपने-आप लोड हो जाएंगी
• बेसमैप की सुविधाओं को मैनेज करना: बेसमैप के पीओएस (हाइब्रिड मोड) को फ़िल्टर करने के लिए, कस्टम mapId का इस्तेमाल करें. साथ ही, उनकी डेंसिटी को कंट्रोल करें. ऐसा खास तौर पर तब करें, जब ऐप्लिकेशन में मार्कर या पॉलीलाइन जैसे कस्टम एलिमेंट का अपना सेट हो. इससे विज़ुअल क्लटर और संभावित ओवरलैप को रोका जा सकता है. इसके अलावा, बेस मैप वेक्टर टाइल की सुविधाओं को बंद किया जा सकता है. जैसे, दिलचस्पी की जगहें, सड़कों की पॉलीलाइन, सड़कों के नाम, और सड़कों के नाम (सैटलाइट मोड).
• इवेंट: gmp-steadystate या gmp-error इवेंट सुनें, ताकि आप बाद का लॉजिक बना सकें. जैसे, मार्कर लोड करना और कैमरे को ऐनिमेट करना.

बैकग्राउंड कैनवस > छोटे किए गए टाइल > टेरेन मेश > सर्फ़ेस मेश (जैसे: इमारतें) > दिलचस्पी की जगहें और सड़क के लेबल, कस्टम एलिमेंट को पैरलल में लोड किया जा रहा है (मार्कर, 3D मॉडल वगैरह)

• उपयोगकर्ता इंटरैक्शन: मैप के कॉन्टेंट में बदलाव करने से पहले, gmp-steadystate इवेंट का इंतज़ार करें. अगर कोई उपयोगकर्ता, शुरुआती gmp-steadystate इवेंट से पहले मैप के साथ इंटरैक्ट करना (पैन, ज़ूम) शुरू कर देता है, तो यह इवेंट सिर्फ़ तब ट्रिगर होगा, जब उपयोगकर्ता इंटरैक्ट करना बंद कर देगा. जब उपयोगकर्ता मैप को पैन या ज़ूम करता है, तब ओवरले कॉन्टेंट (जैसे, मार्कर या पॉलीगॉन) को दिखाने या अपडेट करने से बचें. साथ ही, gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange, gmp-tiltchange को सुनकर, ओवरले कॉन्टेंट (जैसे, मार्कर या पॉलीगॉन) को दिखाने या अपडेट करने से बचें.

• लगातार अपडेट पाने के लिए, requestAnimationFrame() (rAF) का इस्तेमाल करें. साथ ही, ज़्यादा कैलकुलेशन वाले कोड को ड्रॉ कॉल से अलग रखें.

  • rAF का इस्तेमाल करें: यह अपडेट को ब्राउज़र की डिसप्ले रेट के साथ सिंक करता है, ताकि 60 एफ़पीएस का ऐनिमेशन आसानी से चल सके और बिजली की खपत कम हो.
  • ज़्यादा ड्रॉइंग वाले काम न करें: फ़ाइनल अपडेट के दौरान, ज़्यादा ड्रॉइंग वाले काम न करें.
  • अलग-अलग लॉजिक: rAF लूप में, वेब कॉम्पोनेंट को अपडेट करने के लिए कम से कम कॉल करने से पहले, सभी इंटेंसिव लॉजिक लागू करें.

• शुरुआती सीन की सेटिंग: <gmp-map-3d> कैमरे की सेटिंग, जैसे कि झुकाव, लोडिंग की स्पीड पर असर डालेंगी. सीन को जितना ज़्यादा ज़ूम या झुकाया जाएगा, पॉलीगॉन उतना ही ज़्यादा दिखेगा और उसे लोड करने में समय लगेगा. जानकारी का लेवल, जगह के हिसाब से भी अलग-अलग होगा. उदाहरण के लिए: कई इमारतों वाले शहर की तुलना में, सिर्फ़ प्राकृतिक चीज़ों वाले ग्रामीण इलाके की जानकारी अलग होगी.

  • ज़्यादा ज़ूम-इन (ऊंचाई से ली गई), कम या बिना झुकाव वाली इमेज को प्राथमिकता दें.
  • मैप में बाउंड्री (उदाहरण) जोड़ें, ताकि उपयोगकर्ता किसी खास इलाके पर फ़ोकस कर सकें और टाइलें पूरी तरह से लोड हो सकें.

• प्रीलोडर विज़ुअल: <gmp-map-3d> बहुत तेज़ी से लोड होता है. हालांकि, कम कॉन्फ़िगरेशन वाले डिवाइसों (कम जीपीयू) या कम बैंडविथ (धीमा 4G) वाले उपयोगकर्ताओं के लिए, इसे फ़ुल रिज़ॉल्यूशन में दिखने में कुछ समय लग सकता है. इस मामले में, इमेज, ऐनिमेशन या टेक्स्ट की मदद से प्रीलोडर बनाया जा सकता है. साथ ही, बैकग्राउंड में 3D सीन लोड किया जा सकता है. इस्तेमाल के लिए मुख्य इवेंट यहां देखें:

प्रीलोडर का उदाहरण

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• 2D मैप:
  • इन उपयोगकर्ताओं को 2D मैप (सैटलाइट) का दूसरा वर्शन दिखाया जा सकता है. इसमें मार्कर जैसे आपके भौगोलिक डेटा को शामिल किया जाता है.

• इसके अलावा, उपयोगकर्ताओं को किसी जगह की जानकारी दिखाने के लिए, SATELLITE मोड में 2D स्टैटिक मैप दिखाया जा सकता है.

ध्यान दें: फ़िलहाल, हर 2D और 3D मैप लोड करने के लिए अलग से बिल भेजा जाता है. इसलिए, दूसरा मैप सिर्फ़ तब रेंडर करें, जब उपयोगकर्ता उससे इंटरैक्ट करना चाहें.

विज़ुअल एलिमेंट की परफ़ॉर्मेंस और उन्हें मैनेज करना

3D मैप में, विज़ुअल एलिमेंट दिखाने के कई तरीके उपलब्ध हैं. जैसे, मार्कर, पॉलीलाइन, पॉलीलाइन, और 3D मॉडल. ये एलिमेंट, बेहतर परफ़ॉर्मेंस के साथ और कम समय में रेंडर होते हैं. भले ही, विज़ुअल की संख्या ज़्यादा हो.

मार्कर

उदाहरण के लिए: 41 अलग-अलग एसवीजी मार्कर ग्लिफ़ वाले 300 मार्कर लोड करने में 150 से 300 मि॰से॰ लगते हैं (मॉडर्न लैपटॉप: macOS M3 Pro, Chrome)

• ऑप्टिमल कस्टमर एक्सपीरियंस के लिए सबसे सही विकल्प:
  • PinElement: मार्कर में बुनियादी बदलाव करने के लिए (रंग, स्केल, बॉर्डर, टेक्स्ट ग्लाइफ़), <gmp-pin> एलिमेंट या PinElement क्लास का इस्तेमाल करें. यह परफ़ॉर्मेंस को बेहतर बनाने वाला सबसे अच्छा तरीका है.
  • HTMLImageElement या SVGElement मार्कर का कम से कम इस्तेमाल करें: इनका इस्तेमाल ज़्यादा कस्टम बनाने के लिए करें. जैसे, पारदर्शिता जोड़ना या SVGElement में कोई इमेज डालना. इसके लिए, base64 एन्कोडिंग की ज़रूरत होती है. इन्हें लोड होने पर रास्टर किया जाएगा और इनमें परफ़ॉर्मेंस ओवरहेड शामिल होगा. Marker3DElement के डिफ़ॉल्ट स्लॉट को असाइन करने से पहले, HTMLImageElement और SVGElement को <template> एलिमेंट में रैप किया जाना चाहिए.
  • फ़िलहाल, सामान्य एचटीएमएल या सीएसएस जोड़ने की सुविधा उपलब्ध नहीं है.
• मार्कर के ओवरलैप होने की समस्या को मैनेज करना: मार्कर की collisionBehavior प्रॉपर्टी का इस्तेमाल करें. ऐसे ज़रूरी मार्कर के लिए, जो हमेशा दिखने चाहिए, उनके दिखने का तरीका सेट करें. कम ज़रूरी मार्कर को छिपाने की अनुमति दें, ताकि मैप को साफ़-सुथरा और कम अव्यवस्थित रखा जा सके. ऐसा खास तौर पर ज़्यादा ज़ूम लेवल पर किया जाता है.
• सिर्फ़ ज़रूरी पीओएस: drawsWhenOccluded (या प्रोग्राम के हिसाब से प्रॉपर्टी सेट करें) का इस्तेमाल सिर्फ़ उन मार्कर के लिए करें जिन्हें इमारतों या इलाके से ज़रूर दिखना चाहिए. उदाहरण के लिए, बचाव का टारगेट, दबी हुई यूटिलिटी लाइन या उपयोगकर्ता का अवतार.
• ऑक्लूज़न की जांच करें: मैप 3D में होता है. इसलिए, मार्कर इमारतों या इलाके की बनावट की वजह से दिख नहीं सकते (ऑक्ल्यूड हो सकते हैं). अलग-अलग कैमरा ऐंगल और मार्कर की ऊंचाई की जांच करें, ताकि यह पक्का किया जा सके कि ज़रूरी पीओएस दिखते रहें. इसके अलावा, लॉजिक लागू करें, ताकि जब पीओएस न दिखें, तब उनकी ऊंचाई और दिखने की स्थिति को अडजस्ट किया जा सके.
• ऊंचाई का इस्तेमाल करें: 3D मैप में, मार्कर को ऊंचाई की वैल्यू के साथ पोज़िशन का इस्तेमाल करना चाहिए. अगर मार्कर, इलाके या बिल्डिंग से जुड़े हैं, तो altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' या इसी तरह की अन्य सेटिंग का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि मैप को झुकाने या घुमाने पर मार्कर सही जगह पर बने रहें.

पॉलीगॉन और पॉलीलाइन

उदाहरण के लिए: 1,000 पॉलीगॉन लोड करने में 100 से 150 मि॰से॰ लगते हैं (मॉडर्न लैपटॉप: macOS M3 Pro, Chrome)

• ज्यामिति को आसान बनाएं: रेंडर करने से पहले, अपने पाथ डेटा पर सिंपलीफिकेशन एल्गोरिदम लागू करें. इससे वर्टेक्स की संख्या कम हो जाती है, लेकिन सामान्य आकार बना रहता है. इससे रेंडरिंग की स्पीड में काफ़ी सुधार होता है. खास तौर पर, जटिल सीमाओं या रास्तों के लिए.
• ज़ूम लेवल के हिसाब से डेटा कम करना: बहुत बड़े डेटासेट के लिए, ज़्यादा जानकारी वाली ज्यामिति को सिर्फ़ तब लोड करें, जब उपयोगकर्ता उस इलाके में ज़ूम इन करे. ज़ूम लेवल कम होने पर, पॉलीलाइन या पॉलीगॉन का बहुत ही आसान वर्शन दिखाना ज़रूरी होता है.
• एक्सट्रूड किए गए पॉलीगॉन के लिए पहले से हिसाब लगाएं: अगर आपके पॉलीगॉन एक्सट्रूड किए गए हैं (extruded: true), तो पाथ डेटा, 3D वॉल्यूम (एक मेश) तय करता है. ज़्यादा वर्टेक्स वाले जटिल पॉलीगॉन को प्रोसेस करने में, कंप्यूटेशनल पावर ज़्यादा खर्च होती है. पक्का करें कि आपके पॉलीगॉन के लिए सोर्स डेटा जितना हो सके उतना आसान हो.
• पॉलीलाइन और पॉलीगॉन की परफ़ॉर्मेंस की जांच करें: कई या जटिल पॉलीलाइन/पॉलीगॉन जोड़ते समय, खास तौर पर 3D के लिए एक्सट्रूड किए जाने पर, पक्का करें कि वे फ़्रेम रेट में गिरावट न करें. ज़रूरत पड़ने पर, वर्टेक्स की संख्या सीमित करें या सिंपलीफिकेशन एल्गोरिदम का इस्तेमाल करें.
• किसी शेप को अपडेट करते समय, लूप करने और अलग-अलग एलिमेंट में बदलाव करने के बजाय, एक ही ऑपरेशन में पूरे पाथ ऐरे में बदलाव करें. एक बार में असाइनमेंट करने की कार्रवाई (जैसे, polyline.path = newPathArray;) कई बार अपडेट करने की तुलना में ज़्यादा असरदार होती है.
• जहां तक हो सके, एक्सट्रूड की गई पॉलीलाइन का इस्तेमाल न करें: पॉलीलाइन को 3D स्पेस में रखने के लिए, ऊंचाई की वैल्यू का इस्तेमाल किया जा सकता है. हालांकि, पॉलीलाइन को एक्सट्रूड करने (जैसे कि उसे स्ट्रोक-विड्थ और ऊंचाई की बड़ी रेंज देना) से ग्राफ़िक पर ज़्यादा असर पड़ सकता है. जब भी हो सके, बेहतर परफ़ॉर्मेंस के लिए ज़मीन पर (RELATIVE_TO_GROUND) 2D पॉलीलाइन या कम से कम स्ट्रोक-विड्थ का इस्तेमाल करें.
• drawsOccludedSegments का इस्तेमाल सिर्फ़ राउटिंग के ज़रूरी एलिमेंट के लिए करें. बैकग्राउंड या कॉन्टेक्स्ट के हिसाब से बनाए गए शेप के लिए, उन्हें मैप की 3D ज्यामिति के हिसाब से अपने-आप ढकने की अनुमति दें. ज़रूरी न होने वाली छिपी हुई ज्यामिति दिखाने से, रेंडरिंग की जटिलता बढ़ जाती है.

3D मॉडल

<gmp-map-3d> में, 3D मॉडल .glb रेंडरिंग और इंटरैक्टिविटी, जैसे कि gmp-click इवेंट बहुत तेज़ी से होती है.

उदाहरण: किसी पाथ पर घूम रहे 200 केबी के हल्के 3D मॉडल के 1,000 इंस्टेंस को दिखाने में करीब दो सेकंड लगते हैं. (मॉडर्न लैपटॉप: macOS M3 Pro, Chrome)

• कंप्रेशन की मदद से फ़ाइल का साइज़ कम करें: तेज़ी से लोड होने के लिए, खास तौर पर मोबाइल नेटवर्क पर, .glb मॉडल की जटिल फ़ाइलों को 5 एमबी से कम रखें. हालांकि, इससे भी कम साइज़ रखना बेहतर होता है. इसके लिए, Draco कंप्रेशन का इस्तेमाल किया जाता है. इसे अपनी .glb फ़ाइलों में मौजूद मेश डेटा पर लागू किया जाता है. इससे फ़ाइल का साइज़ काफ़ी कम हो जाता है. अक्सर, यह 50% से ज़्यादा होता है. साथ ही, विज़ुअल क्वालिटी में मामूली गिरावट आती है.
• मॉडल के ऑरिजिन को सेंटर में रखना: पक्का करें कि 3D मॉडलिंग सॉफ़्टवेयर, मॉडल को एक्सपोर्ट करते समय उसके ऑरिजिन (0, 0, 0 पॉइंट) को मॉडल के बेस में सेंटर पर रखे. इससे मैप पर मॉडल को सही जगह पर रखने और घुमाने में आसानी होती है. साथ ही, यह पक्का किया जा सकता है कि मॉडल, अक्षांश और देशांतर के हिसाब से सही जगह पर मौजूद हो.
• सीओआरएस मैनेज करना: अगर आपकी मॉडल फ़ाइलें, आपके वेब ऐप्लिकेशन के बजाय किसी दूसरे डोमेन या सीडीएन पर होस्ट की जाती हैं, तो आपको होस्टिंग सर्वर को कॉन्फ़िगर करना होगा. ऐसा ज़रूरी क्रॉस-ऑरिजिन रिसोर्स शेयरिंग (सीओआरएस) हेडर (जैसे, Access-Control-Allow-Origin: *) को शामिल करने के लिए करना होगा. ऐसा न करने पर, मैप मॉडल को लोड नहीं कर पाएगा.