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

3D Area Explorer एक ऐसा सलूशन है जिसकी मदद से, 3D में शानदार तरीके से कम्यूनिटी एक्सप्लोर की जा सकती हैं. इस सलूशन में, Google के Photorealistic 3D Tiles, Places Search, Place Details, और Autocomplete API का इस्तेमाल किया जाता है.

शुरू करना:

3D Area Explorer के एडमिन ऐप्लिकेशन का होस्ट किया गया वर्शन इस्तेमाल करें

या

एपीआई कुंजी पाएं और GitHub से कोड डाउनलोड करें.

चालू करें

• Photorealistic 3D tiles API
• Places API

अपने हिसाब से अनुभव देना

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").

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

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

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

ध्यान दें: पूरी तरह से लोड किए गए, पसंद के मुताबिक बनाए गए यूआरएल को आज़माएं: https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

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

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

ऐडवांस कस्टमाइज़ेशन करने के लिए, आपको 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: 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 Place Navigator ऐप्लिकेशन को अपनी पसंद की किसी खास जगह पर ज़ूम इन करके शुरू किया जा सकता है. जगह के ऑब्जेक्ट में पता या जगह का नाम डालकर, Google के जियोकोडिंग टूल का इस्तेमाल करके, अक्षांश और देशांतर के कोऑर्डिनेट पाए जा सकते हैं:

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

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

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

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

ऐडवांस कस्टमाइज़ेशन

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

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

इस सलूशन में, कैमरे के दो अलग-अलग पाथ पहले से मौजूद हैं:

fixed-orbit" | "dynamic-orbit"

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

calculateAutoOrbitFrame फ़ंक्शन में मौजूद /src/utils/cesium.js का इस्तेमाल करके लागू किया जा सकता है.

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

जगह के ज़्यादा टाइप जोड़ना

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

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

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

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

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

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

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

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

const locationSection = await getLocationSettingsSection(locationConfig);

नतीजा

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

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