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

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

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

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

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

मैप लोड करना

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 का इस्तेमाल करें: यह ब्राउज़र के डिसप्ले रेट के साथ अपडेट को सिंक करता है, ताकि 60FPS पर ऐनिमेशन आसानी से चले और बिजली की खपत कम हो.
  • ज़्यादा ड्रॉ वर्क से बचें: फ़ाइनल अपडेट के दौरान, ड्रॉइंग से जुड़े ऐसे टास्क न करें जिनमें ज़्यादा रिसॉर्स की ज़रूरत होती है.
  • अलग लॉजिक: 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) डिलीवर किया जा सकता है. इसमें मार्कर जैसा आपका जियो डेटा भी शामिल होता है.

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

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

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

3D Maps, मार्कर, पॉलीलाइन, और 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 स्पेस में दिखाने के लिए, ऊंचाई की वैल्यू का इस्तेमाल किया जा सकता है. हालांकि, पॉलीलाइन को एक्सट्रूड करने (जैसे, उसे स्ट्रोक-विड्थ और ऊंचाई की बड़ी रेंज देना) से ग्राफ़िक पर ज़्यादा असर पड़ सकता है. बेहतर परफ़ॉर्मेंस के लिए, जब भी संभव हो, ज़मीन पर 2D पॉलीलाइन (RELATIVE_TO_GROUND) या कम से कम स्ट्रोक-विड्थ का इस्तेमाल करें.
• ज़रूरी रूटिंग एलिमेंट के लिए, सिर्फ़ drawsOccludedSegments का इस्तेमाल करें. बैकग्राउंड या कॉन्टेक्स्ट के हिसाब से बनाए गए शेप के लिए, उन्हें मैप की 3D ज्यामिति से नैचुरल तरीके से छिपाने की अनुमति दें. छिपी हुई ऐसी ज्यामिति को दिखाने से रेंडरिंग की प्रोसेस मुश्किल हो जाती है जो ज़रूरी नहीं है.

3D मॉडल

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

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

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