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: 2,000 (शुरुआती शुरुआती स्थिति)

पहले से तय जगह को लोड करें

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

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

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

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

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

इमेज

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

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

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

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

यह समाधान अलग-अलग तरीके से दो अलग-अलग कैमरा पाथ लागू करता है:

fixed-orbit" | "dynamic-orbit"

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

calculateAutoOrbitFrame फ़ंक्शन में /src/utils/cesium.js.

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

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

कॉन्फ़िगरेशन के लिए जगहों के टाइप की सूची, demo/src/place-settings.js फ़ाइल में अडजस्ट की जा सकती है. लाइन 4 से शुरू होने वाले प्लेसटाइप, डेमो में उपलब्ध हैं.

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

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