3D एरिया एक्सप्लोरर को पसंद के मुताबिक बनाना

3D Area Explorer एक ऐसा समाधान है जो आपको आकर्षक 3D में समुदायों को एक्सप्लोर करने की सुविधा देता है. इस समाधान में इनका इस्तेमाल किया जाता है: Google की फ़ोटोरियलिस्टिक 3D टाइल, Places Search, Place Details, और ऑटोकंप्लीट एपीआई.

शुरू करने का तरीका:

चालू करें

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

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

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

जगह

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

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

कैमरे के ऑर्बिट टाइप को चुनकर, अपनी यात्रा को कंट्रोल करें: क्लासिक सर्कुलर पाथ या दिलचस्प साइन वेव.

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

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

    Google के सिडनी ऑफ़िस को एक्सप्लोर करके, फ़िक्स्ड ऑर्बिट को काम करते हुए देखें.

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

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

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

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

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

एक्सप्लोरेशन को पहले से लोड करना: यूआरएल को पसंद के मुताबिक बनाने की सुविधा के बारे में ज़्यादा जानें

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

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

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

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: कैमरे के ऑर्बिट का टाइप ("fixed-orbit" या "dynamic-orbit").

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

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

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

पसंद के मुताबिक बनाने के अन्य विकल्प

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

ये बेहतर कस्टमाइज़ेशन करने के लिए, आपको 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: 1,500 मीटर (सेंटर से दूर)

शुरुआती निर्देशांक:

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: 15000000 (सतह से 15,000 कि॰मी॰ ऊपर)

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

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

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

config.json में मौजूद location ऑब्जेक्ट, इलाके का केंद्र सेट करता है. यह Cesium व्यूअर में कैमरे का शुरुआती व्यू पॉइंट होता है.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 फ़ाइल में अडजस्ट किया जा सकता है. चौथी लाइन से, डेमो में उपलब्ध जगहों के टाइप की जानकारी दी गई है.

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

स्टाइल (सीएसएस) को पसंद के मुताबिक बनाना

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

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

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

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

हमारे 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);

नतीजा

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

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