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