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

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

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

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

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

मैप लोड करना

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

• एपीआई लोड करना: पेज लोड होने के दौरान, 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 मैप (सैटेलाइट) दिखाया जा सकता है. इसमें, मार्कर जैसे जियो डेटा भी शामिल किया जा सकता है.

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

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

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

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

मार्कर

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

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

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

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

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

3D मॉडल

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

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

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