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

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

इस्तेमाल शुरू करना:

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

या

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

चालू करें

• फ़ोटोरियलिस्टिक 3D टाइल एपीआई
• Location API

अनुभव को कस्टमाइज़ करें

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

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

जगह

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

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

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

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

  यह एक निश्चित ऊंचाई पर और इसके खास बिंदु के आस-पास बनी एक गोलाकार कक्षा है रुचि.

  Google सिडनी के बारे में ज़्यादा जानकारी के ज़रिए, निश्चित ऑर्बिट को देखें ऑफ़िस.

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

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

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

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

• आपको किस तरह की जगहें देखनी हैं, यह तय करके अपने एक्सप्लोरेशन को पसंद के मुताबिक बनाएं खोजें. types का इस्तेमाल करके, म्यूज़ियम, पार्क, स्कूल वगैरह में से चुनें config.json में कलेक्शन.
• यह सेट करें कि ज़्यादा से ज़्यादा कितनी जगहें दिखाई जाएंगी. 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: कैमरा ऑर्बिट का टाइप ("फ़िक्स्ड-ऑर्बिट" या "डाइनैमिक-ऑर्बिट").

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

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

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

ध्यान दें: पूरी तरह से लोड किया गया कस्टमाइज़ किया गया यूआरएल आज़माएं: 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/utils/cesium.js फ़ाइल, src डायरेक्ट्री में मौजूद है. नीचे दिए गए ऐप्लिकेशन के लुक और स्टाइल को बदलने के लिए, वैरिएबल को बदला जा सकता है

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

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

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

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

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

const locationSection = await getLocationSettingsSection(locationConfig);

नतीजा

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

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