3D एरिया एक्सप्लोरर: कस्टमाइज़ेशन गाइड

3D एरिया एक्सप्लोरर एक ऐसा समाधान है जिससे आपको शानदार 3D में समुदायों के बारे में जानने की सुविधा मिलती है. इस टूल का इस्तेमाल इन कामों के लिए किया जा सकता है: Google की फ़ोटोरियलिस्टिक 3D टाइल, जगहों की खोज, जगह की जानकारी, और ऑटोकंप्लीट एपीआई.

शुरुआत करना:

चालू करें

अनुभव को पसंद के मुताबिक बनाएं

3D एरिया एक्सप्लोरर को पसंद के मुताबिक बनाया जा सकता है. इससे आपको ग्राहक के सफ़र को बेहतर अनुभव देने में मदद मिलती है. यूज़र इंटरफ़ेस (यूआई) पर मौजूद कंट्रोल पैनल का इस्तेमाल करके या config.json फ़ाइल का इस्तेमाल करके, इसे अपनी पसंद के मुताबिक बनाया जा सकता है.

क्या आप पसंद के मुताबिक बनाने के लिए तैयार हैं? इसके लिए यह तरीका अपनाएं:

जगह

config.json फ़ाइल में अक्षांश और देशांतर को अडजस्ट करके, अपने अनुभव की शुरुआत की जगह तय करें.

कैमरे का कंट्रोल

कैमरे का ऑर्बिट टाइप चुनें, जैसे कि एक क्लासिक गोल आकार का रास्ता या कोई पेचीदा साइन वेव.

  • फ़िक्स्ड ऑर्बिट:

    यह एक तय ऊंचाई पर और किसी लोकप्रिय जगह के आस-पास गोल ऑर्बिट है.

    Google के, सिडनी ऑफ़िस की पड़ताल करके तय की गई कक्षा को देखें.

  • डाइनैमिक ऑर्बिट:

    कैमरा साइन वेव ट्रजेक्टरी में, किसी खास जगह के आस-पास आसानी से मूव करता है. इस अनोखी मूवमेंट से दर्शक, किसी खास जगह को अलग-अलग ऐंगल से देख पाते हैं. इससे उन्हें बेहतरीन विज़ुअल अनुभव मिलता है.

    आइफ़िल टावर को एक्सप्लोर करके, डाइनैमिक ऑर्बिट को देखें.

लोकप्रिय जगहें:

  • आपको जिन जगहों को खोजना है उन्हें तय करके, अपनी ज़रूरत के हिसाब से एक्सप्लोरेशन बनाएं. config.json में मौजूद types कलेक्शन का इस्तेमाल करके म्यूज़ियम, पार्क, स्कूल वगैरह में से चुनें.
  • density पैरामीटर को अडजस्ट करके, ज़्यादा से ज़्यादा दिखाई जाने वाली लोकप्रिय जगहों की संख्या सेट करें.
  • searchRadius (in meters) में बदलाव करके, आस-पास मौजूद छिपे हुए जेम या खास जगहों पर फ़ोकस करें.
  • speed (in revolutions per minute) पैरामीटर की मदद से, कैमरे की गतिविधि के हिसाब से स्पीड सेट करें.

अपने एक्सप्लोरेशन को पहले से लोड करना: यूआरएल कस्टमाइज़ेशन की मदद से ज़्यादा जानकारी पाएं

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

बेहतरीन यूआरएल बनाना:

जगह और दूसरी सेटिंग को पहले से सेट करने के लिए, बस एरिया एक्सप्लोरर यूआरएल में खास पैरामीटर जोड़ें. उदाहरण के लिए:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

यह यूआरएल, शुरुआत की जगह को तय किए गए अक्षांश और देशांतर पर सेट करता है, ताकि आपको तुरंत चुनी गई जगह पर ले जाया जा सके. उपलब्ध पैरामीटर:

  • location.coordinates.lat: आपके चुने गए स्थान का अक्षांश.
  • location.coordinates.lng: आपकी चुनी गई जगह का देशांतर.
  • poi.types: दिखाने के लिए लोकप्रिय जगह के टाइप की कॉमा-सेपरेटेड लिस्ट.
  • poi.density: लोकप्रिय जगहों की चुनी गई ज़्यादा से ज़्यादा संख्या.
  • poi.searchRadius: आस-पास की लोकप्रिय जगहों को खोजने का दायरा.
  • camera.speed: कैमरे की ऑर्बिट की स्पीड.
  • camera.orbitType: कैमरा ऑर्बिट टाइप ("फ़िक्स्ड-ऑर्बिट" या "डाइनैमिक-ऑर्बिट").

यूआरएल को पसंद के मुताबिक बनाने के फ़ायदे:

  • अपनी चुनी हुई सेटिंग को पहले से तय करके, उपयोगकर्ता अनुभव को बेहतर बनाएं.
  • टारगेट की गई यात्राओं को पहले से लोड की गई जगहों और लोकप्रिय जगहों के साथ शेयर करें.
  • पहले से कॉन्फ़िगर किए गए एरिया एक्सप्लोरर अनुभवों को वेबसाइटों में आसानी से जोड़ें.

यूआरएल को पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करके, लोगों को अपने हिसाब से अनुभव दिया जा सकता है. साथ ही, चुनिंदा रोमांचक गतिविधियों के लिए दूसरों को न्योता भी भेजा जा सकता है.

ज़्यादा कस्टमाइज़ेशन

पिछले सेक्शन में, ऐसे अडजस्टमेंट के बारे में बताया गया था जिन्हें यूज़र इंटरफ़ेस (यूआई) या कॉन्फ़िगरेशन फ़ाइल से ऐक्सेस किया जा सकता है. हालांकि, कई दूसरे बिल्ट-इन पैरामीटर भी हैं जिन्हें ऐप्लिकेशन को अपनी पसंद के मुताबिक बनाने के लिए बदला जा सकता है.

ये बेहतर कस्टमाइज़ेशन करने के लिए, आपको src डायरेक्ट्री में मौजूद src/utils/cesium.js फ़ाइल में यह कोड देखना होगा. ऐप्लिकेशन के लुक और स्टाइल में बदलाव करने के लिए, इन वैरिएबल को बदला जा सकता है

कैमरे की ऊंचाई

CAMERA_HEIGHT वैल्यू को अडजस्ट करके, यह कंट्रोल करें कि किसी पॉइंट पर उड़ते समय कैमरा खुद को कितनी ऊंचाई पर ले जाए. उच्च मान से ज़ूम-आउट, पैनोरामिक दृश्य मिलता है, जबकि कम मान से आप उस क्षेत्र के विवरण के और करीब आ जाएंगे.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • सेटिंग: CAMERA_HEIGHT
  • डिफ़ॉल्ट वैल्यू: 100
  • ब्यौरा: किसी पॉइंट पर उड़ते समय, टारगेट की गई जगह के ऊपर कैमरे की ऊंचाई तय करता है.
  • वैल्यू के उदाहरण:
    • 50: बारीकियों को देखें और जानकारी पर ज़ोर दें.
    • 200: ज़्यादा पैनोरामा वाला नज़रिया.

कैमरा पिच

कैमरे के शुरुआती झुकाव को BASE_PITCH ने तय किया है. नीचे की ओर झुकने के लिए, नेगेटिव वैल्यू और ऊपर की ओर वाले व्यू के लिए पॉज़िटिव वैल्यू का इस्तेमाल करें. अपने एक्सप्लोरेशन में मामूली उतार-चढ़ाव के लिए, AUTO_ORBIT_PITCH_AMPLITUDE बदलें.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
  • सेटिंग: BASE_PITCH और AUTO_ORBIT_PITCH_AMPLITUDE
  • डिफ़ॉल्ट वैल्यू:
    • BASE_PITCH: -30 (30 डिग्री नीचे की ओर पिच करना)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (समय के साथ पिच में 10 डिग्री का बदलाव)

जानकारी: कैमरा पिच, मैप का विज़ुअल झुकाव होता है. इसे डिग्री में मापा जाता है. इसे टिल्ट भी कहते हैं. ये सेटिंग, कैमरे के शुरुआती पिच और डाइनैमिक पिच अडजस्टमेंट को तय करती हैं.

वैल्यू के उदाहरण:

  • BASE_PITCH: 0 (लेवल कैमरा)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (पिच में कोई वैरिएशन नहीं)

कैमरा रेंज और ज़ूम

ये पैरामीटर खास पॉइंट पर फ़ोकस करते समय लागू किए गए ज़ूम की संख्या को सेट करते हैं. छोटी वैल्यू का मतलब है कि ऑब्जेक्ट को ज़्यादा बारीकी से ज़ूम करना चाहिए.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

सेटिंग: RANGE_AMPLITUDE_RELATIVE और ZOOM_FACTOR

डिफ़ॉल्ट वैल्यू:

  • RANGE_AMPLITUDE_RELATIVE: 0.55 (दूरी के सापेक्ष अंतर)
  • ZOOM_FACTOR: 20 (कैमरे का ज़ूम फ़ैक्टर)

जानकारी: ये सेटिंग, कैमरे को इधर-उधर ले जाने के दौरान रेंज में उतार-चढ़ाव और करीब से देखने के लिए ज़ूम लेवल तय करती हैं.

वैल्यू के उदाहरण:

  • RANGE_AMPLITUDE_RELATIVE: 1 (पूरी रेंज वाले वैरिएशन)
  • ZOOM_FACTOR: 10 (कम ज़ूम)
// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

कैमरा रीसेट

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

  • सेटिंग: CAMERA_OFFSET
  • डिफ़ॉल्ट वैल्यू:
    • heading: 0 (कोई रोटेशन ऑफ़सेट नहीं)
    • pitch: Cesium.Math.toRadians(-30) (30 डिग्री नीचे की ओर पिच करना)
    • range: 800 (बीच से 800 मीटर)
  • विवरण: व्यू को रीसेट करने के लिए कैमरे का शीर्षक, पिच, और रेंज तय करता है.
  • वैल्यू के उदाहरण:
    • heading: 45 (डिग्री, उत्तर-पश्चिम का व्यू)
    • range: 1500 मीटर (केंद्र से और)

निर्देशांक प्रारंभ करें:

START_COORDINATES कैमरे के लिए शुरुआती देशांतर, अक्षांश, और ऊंचाई तय करता है. यहीं से एक्सप्लोरेशन शुरू होगा. इसलिए, इसे उस जगह पर सेट करें जिसे आपको उपयोगकर्ताओं को पहले दिखाना है.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • सेटिंग: START_COORDINATES

  • डिफ़ॉल्ट वैल्यू:

    • longitude: 0
    • latitude: 60
    • height: 15,00,000 (सतह से 15,000 कि॰मी॰ ऊपर)

  • वैल्यू के उदाहरण:

    • longitude: -122.4934, latitude: 37.7951 (गोल्डन गेट ब्रिज)
    • height: 2000 (करीबी शुरुआती स्थिति)

पहले से तय की गई जगह की जानकारी लोड करें

config.json में मौजूद location ऑब्जेक्ट, इलाके के केंद्र को सेट करता है. सीज़ियम व्यूअर में, यह कैमरे का शुरुआती व्यूपॉइंट होता है.coordinates: उस जगह के अक्षांश (lat) और देशांतर (lng) बताता है जिस पर आपको कैमरा पैन करना है. कैमरे को ग्लोब पर किसी भी खास जगह पर सेट करने के लिए, इन वैल्यू को अडजस्ट करें.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

यह कॉन्फ़िगरेशन आपको अपनी पसंद के किसी खास जगह पर ज़ूम इन किए गए 3D प्लेस नेविगेटर ऐप्लिकेशन को शुरू करने देता है. Google के जियोकोडिंग टूल का इस्तेमाल करके, किसी पते या जगह के नाम को लोकेशन ऑब्जेक्ट में तय करके, उसके अक्षांश और देशांतर निर्देशांक मिल सकते हैं:

  1. जियोकोडिंग टूल ऐक्सेस करें.
  2. जियोकोडिंग का अनुरोध करें "इसे खुद आज़माएं" सेक्शन पर क्लिक करें और "पता" फ़ील्ड में अपनी चुनी हुई जगह डालें. पता, जगह का नाम या लैंडमार्क भी तय किया जा सकता है.
  3. निर्देशांक बनाएं अपना अनुरोध सबमिट करने के लिए "रन" बटन पर क्लिक करें. यह टूल आपको एक जवाब दिखाएगा जिसमें जगह के बारे में अलग-अलग जानकारी होगी. इस जानकारी में, geometry.locationसेक्शन में दिखाए गए अक्षांश और देशांतर निर्देशांक भी शामिल हैं.
  4. जियोकोड का इस्तेमाल करें जवाब से वापस मिले अक्षांश और देशांतर वैल्यू को कॉपी करें और उन्हें अपने कॉन्फ़िगरेशन में coordinates ऑब्जेक्ट में चिपकाएं.

ध्यान दें: इस तरीके से इस्तेमाल किए जाने वाले जियोकोड, Google Maps प्लैटफ़ॉर्म के सेवा की शर्तों के सेक्शन 3.4 में दी गई शर्तों के मुताबिक होने चाहिए. इसका मतलब है कि उन्हें 30 दिनों से ज़्यादा समय तक कैश मेमोरी में नहीं रखा जाना चाहिए. इसके बाद, उन्हें रीफ़्रेश कर देना चाहिए.

इमेज

यह कॉन्फ़िगरेशन, कैलिफ़ोर्निया के माउंटेन व्यू में Google के मुख्यालयों के निर्देशांकों को अपने आप निर्धारित करने के लिए जियोकोडिंग टूल का इस्तेमाल करेगा, और उस स्थान के केंद्र में रखे कैमरे से आपके 3D प्लेस नेविगेटर ऐप्लिकेशन को लॉन्च करेगा.

बेहतर कस्टमाइज़ेशन

कोड के बारे में ज़्यादा गहराई से जानकारी हासिल करके, अपनी पसंद के मुताबिक कुछ और सुविधाएं जोड़ी जा सकती हैं. इस सेक्शन में, कुछ विकल्पों के बारे में बताया गया है

नया कैमरा पाथ जोड़ें

सबसे अलग टूल में, दो अलग-अलग कैमरा पाथ लागू किए जाते हैं:

fixed-orbit" | "dynamic-orbit"

हालांकि, अगर आप एक नया कैमरा पाथ बना सकते हैं, तो आप

/src/utils/cesium.js, calculateAutoOrbitFrame फ़ंक्शन में मौजूद होता है.

कॉन्फ़िगरेशन पैनल में इस नए पाथ कैलकुलेशन का इस्तेमाल करने के लिए,demo/src/camera-settings.js. में लागू करने वाला तरीका देखें

और जगहों के टाइप जोड़ें

कॉन्फ़िगरेशन के लिए जगह के टाइप की सूची को demo/src/place-settings.js फ़ाइल में अडजस्ट किया जा सकता है. चौथी पंक्ति से डेमो में अलग-अलग तरह के प्लेसटाइप दिए गए हैं.

अगर आपको डेमो सोर्स बदले बिना खास तरह की जगहों का इस्तेमाल करना है, तो उन्हें poi.types की config.json फ़ाइल में जोड़ें

शैली कस्टमाइज़ करें (css)

स्टाइल के लिए, हमने सीएसएस वैरिएबल के साथ काम किया. ये हर बड़े ब्राउज़र में काम करते हैं और इनकी मदद से एक ही जगह पर एक लाइन बदली जा सकती है और किसी सीएसएस प्रॉपर्टी को अपडेट किया जा सकता है. हमारे सीएसएस वैरिएबल src/main.css. में बताए गए हैं. यहां पूरे ऐप्लिकेशन के लिए कलर, फ़ॉन्ट सेटिंग, और पैडिंग या मार्जिन को बदला जा सकता है.

अतिरिक्त डेटा ओवरले करें

अतिरिक्त डेटा को ओवरले करने के लिए, आपको src/utils/cesium.js फ़ाइल अपडेट करना होगा. साथ ही, ग्लोब पर GeoJSON या अन्य भौगोलिक डेटा से जुड़ा डेटा जोड़ने का तरीका जानने के लिए, सीज़ियम का दस्तावेज़ देखना होगा.

कॉन्फ़िगरेशन सेक्शन हटाएं

कॉन्फ़िगरेशन फ़ाइल में, हमारे JavaScript ऐप्लिकेशन के तीन मुख्य सेक्शन होते हैं: demo/src/[config-panel.js](config-panel.js): location, poi, और camera. इनमें से हर सेक्शन, ऐप्लिकेशन के अलग-अलग पहलुओं के लिए कॉन्फ़िगरेशन के विकल्प देता है. डेवलपर इन सेक्शन को अपनी खास ज़रूरतों के हिसाब से पसंद के मुताबिक बना सकते हैं.

1.कॉन्फ़िगरेशन से किसी खास सेक्शन को हटाएं

  • जगह की जानकारी का सेक्शन

location सेक्शन को हटाने के लिए, अपने कोड में यहां दी गई लाइन ढूंढें और उस पर टिप्पणी करें या उसे मिटाएं:

const locationConfig = { ...config.location, ...customConfig.location };
  • लोकप्रिय जगह का सेक्शन

poi सेक्शन को हटाने के लिए, अपने कोड में यहां दी गई लाइन ढूंढें और टिप्पणी करें या इसे मिटाएं:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • कैमरा सेक्शन

camera सेक्शन को हटाने के लिए, अपने कोड में यहां दी गई लाइन ढूंढें और टिप्पणी करें या इसे मिटाएं:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. मिले-जुले कॉन्फ़िगरेशन अपडेट करना

किसी सेक्शन को हटाने के बाद, मिले-जुले कॉन्फ़िगरेशन ऑब्जेक्ट को अपडेट करना ज़रूरी है. यह ऑब्जेक्ट, डिफ़ॉल्ट कॉन्फ़िगरेशन को किसी भी कस्टमाइज़ेशन के साथ मर्ज करता है. combinedConfig ऑब्जेक्ट से, इससे जुड़ी प्रॉपर्टी हटाएं:

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. यूज़र इंटरफ़ेस (यूआई) के एलिमेंट अडजस्ट करें

अगर किसी सेक्शन को हटाने का मतलब उससे जुड़े यूज़र इंटरफ़ेस (यूआई) एलिमेंट भी हटाना है, तो एचटीएमएल कोड के मुताबिक कोड को अपडेट करें. उदाहरण के लिए, अगर आपको एडमिन पैनल से कैमरे की स्पीड जैसे किसी सेक्शन को हटाना है, तो उसके लिए आपको js और एचटीएमएल कोड, दोनों को अपडेट करना होगा.

4. कैमरा सेटिंग सेक्शन को हटाएं

यूज़र इंटरफ़ेस (यूआई) से कैमरा सेटिंग सेक्शन हटाने के लिए, नीचे दी गई लाइन ढूंढें और उस पर टिप्पणी करें या उसे मिटाएं:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

स्थान सेक्शन से जुड़ी खास जानकारी को हटाया जा रहा है

const locationSection = await getLocationSettingsSection(locationConfig);

नतीजा

इस दस्तावेज़ में हमने आपके 3D एक्सप्लोरेशन अनुभव को बेहतर बनाने के लिए, एरिया एक्सप्लोरर में उपलब्ध अलग-अलग कस्टमाइज़ेशन के विकल्पों को एक्सप्लोर किया है. कैमरे के काम करने के तरीके में बदलाव करके, विज़ुअल झुकाव को अडजस्ट करके, और ज़ूम लेवल को बदलकर, आपको यूनीक और दिलचस्प अनुभव देने में मदद मिलती है, जो आपकी चुनी गई सेटिंग और पसंदीदा जगहों को दिखाता है.

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