Penjelajah Area 3D: Panduan penyesuaian

Penjelajah Area 3D adalah solusi yang memungkinkan Anda menjelajahi komunitas dalam tampilan 3D yang menarik. Solusi ini memanfaatkan: Ubin 3D Fotorealistik Google, Penelusuran Places, Place Details, dan Autocomplete API.

Memulai:

Aktifkan

Menyesuaikan pengalaman

Solusi Penjelajah Area 3D sangat mudah disesuaikan, memungkinkan Anda untuk pengalaman pada perjalanan pelanggan Anda. Anda bisa menyesuaikan menggunakan panel kontrol di UI atau menggunakan file config.json.

Siap untuk disesuaikan? Berikut caranya:

Lokasi

Tentukan titik awal pengalaman Anda dengan menyesuaikan lintang dan bujur dalam file config.json.

Kontrol Kamera

Kontrol perjalanan Anda dengan memilih jenis orbit kamera: jalur melingkar klasik atau gelombang sinus yang menarik.

  • Orbit tetap:

    Ini adalah orbit lingkaran pada ketinggian tetap dan di sekitar titik tertentu minat tertentu.

    Lihat cara kerja orbit tetap dengan menjelajahi Google Sydney kantor.

  • Orbit dinamis:

    Kamera bergerak mulus dalam lintasan gelombang sinus mengitari garis lokasi menarik lainnya. Gerakan unik ini memungkinkan penonton untuk mengamati poinnya menarik dari berbagai ketinggian dan sudut, memberikan pengalaman pengalaman visual yang imersif.

    Lihat orbit dinamis beraksi dengan mengeksplorasi Eiffel menara.

Lokasi Menarik (POI):

  • Menyesuaikan eksplorasi dengan menentukan jenis tempat yang ingin Anda kunjungi temukan. Pilih dari museum, taman, sekolah, dan lainnya menggunakan types array di config.json.
  • Tetapkan jumlah maksimum Lokasi Menarik yang ditampilkan dengan menyesuaikan Parameter density.
  • Ubah searchRadius (in meters) untuk menyertakan tempat atau fokus tersembunyi di sekitar bidang tertentu.
  • Tetapkan kecepatan yang dipilih untuk gerakan kamera Anda dengan parameter speed (in revolutions per minute).

Memuat Eksplorasi Terlebih Dahulu: Mempelajari Lebih Dalam dengan Penyesuaian URL

Penjelajah Area 3D membantu Anda menentukan awal eksplorasi dengan URL dan penyesuaian. Dengan begitu, konfigurasi manual tidak diperlukan lagi, sehingga akan menyederhanakan pengalaman pengguna.

Membuat URL yang Sempurna:

Cukup tambahkan parameter khusus ke URL Area Explorer untuk melakukan pra-penyiapan lokasi dan setelan lainnya. Contoh:

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

URL ini menyetel titik awal ke lintang dan bujur yang ditetapkan, akan langsung membawa Anda ke lokasi yang dipilih. Parameter yang Tersedia:

  • location.coordinates.lat: Lintang lokasi yang Anda pilih.
  • location.coordinates.lng: Bujur lokasi yang Anda pilih.
  • poi.types: Daftar yang dipisahkan koma untuk jenis POI yang akan ditampilkan.
  • poi.density: Jumlah maksimum POI yang dipilih.
  • poi.searchRadius: Radius untuk menelusuri POI di sekitar.
  • camera.speed: Kecepatan orbit kamera.
  • camera.orbitType: Jenis orbit kamera ("orbit tetap" atau "orbit dinamis").

Manfaat Penyesuaian URL:

  • Sederhanakan pengalaman pengguna dengan menentukan terlebih dahulu setelan yang Anda pilih.
  • Bagikan perjalanan yang ditargetkan dengan lokasi dan POI spesifik yang telah dimuat sebelumnya.
  • Sematkan pengalaman Area Explorer yang telah dikonfigurasi sebelumnya dengan lancar di dalam situs.

Dengan memanfaatkan penyesuaian URL, Anda dapat membuat pengalaman khusus dan undang orang lain untuk memulai petualangan pilihan.

Penyesuaian lebih lanjut

Bagian sebelumnya mempelajari penyesuaian yang dapat diakses melalui UI atau konfigurasi . Namun, ada juga beberapa parameter {i> built-in<i} lain yang dapat Anda memodifikasi untuk menyesuaikan aplikasi lebih lanjut.

Untuk melakukan penyesuaian lanjutan ini, Anda harus melihat kode dalam file src/utils/cesium.js yang terletak di direktori src. Hal berikut variabel dapat diubah untuk mengubah tampilan dan nuansa aplikasi

Tinggi kamera

Kontrol seberapa tinggi kamera memosisikan dirinya saat terbang menuju suatu titik dengan menyesuaikan nilai CAMERA_HEIGHT. Nilai yang lebih tinggi akan memberikan yang diperkecil, tampilan panorama, sedangkan nilai yang lebih rendah akan membawa Anda lebih dekat dengan detail area ini

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • Setelan: CAMERA_HEIGHT
  • Nilai Default: 100
  • Deskripsi: Menentukan tinggi kamera di atas lokasi target saat terbang ke suatu titik.
  • Contoh Nilai:
    • 50: Tampilan lebih dekat, menekankan detail.
    • 200: Perspektif yang lebih panorama.

Pitch kamera

Nilai awal kemiringan kamera ditentukan oleh BASE_PITCH. Gunakan nilai negatif untuk kemiringan ke bawah dan nilai positif untuk pandangan ke atas. Untuk menambahkan gerakan dinamis yang halus ke eksplorasi Anda, ubah 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;
  • Setelan: BASE_PITCH dan AUTO_ORBIT_PITCH_AMPLITUDE
  • Nilai Default:
    • BASE_PITCH: -30 (pitch 30 derajat ke bawah)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (mengubah pitch sebesar 10 derajat dari waktu ke waktu)

Deskripsi: Promosi kamera adalah kemiringan visual peta, yang diukur dalam derajat. Metode ini juga dikenal sebagai kemiringan. Setelan ini menentukan penyesuaian pitch dan pitch dinamis selama rotasi otomatis.

Contoh Nilai:

  • BASE_PITCH: 0 (kamera level)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (tidak ada variasi tinggi nada)

Rentang dan Zoom Kamera

Parameter ini menetapkan jumlah zoom yang diterapkan saat berfokus pada poin. Nilai yang lebih kecil berarti zoom yang lebih dekat.

// 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;

Setelan: RANGE_AMPLITUDE_RELATIVE dan ZOOM_FACTOR

Nilai Default:

  • RANGE_AMPLITUDE_RELATIVE: 0,55 (variasi jarak relatif)
  • ZOOM_FACTOR: 20 (faktor zoom kamera)

Deskripsi: Setelan ini menentukan variasi rentang selama penggunaan kamera gerakan dan tingkat zoom untuk melihat lebih dekat.

Contoh Nilai:

  • RANGE_AMPLITUDE_RELATIVE: 1 (variasi rentang penuh)
  • ZOOM_FACTOR: 10 (lebih sedikit zoom)
// 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.
};

Reset Kamera

Saat pengguna ingin mereset kamera ke posisi semula, Nilai CAMERA_OFFSET digunakan. Setelan ini mencakup arah (rotasi), kemiringan (tilt), dan rentang (jarak kamera dari pusat).

  • Setelan: CAMERA_OFFSET
  • Nilai Default:
    • heading: 0 (tanpa offset rotasi)
    • pitch: Cesium.Math.toRadians(-30) (pitching 30 derajat ke bawah)
    • range: 800 (800 meter dari pusat)
  • Deskripsi: Menentukan arah, kemiringan, dan rentang kamera untuk mereset tampilan.
  • Contoh Nilai:
    • heading: 45 (derajat, tampilan barat laut)
    • range: 1.500 meter (lebih jauh dari pusat)

Koordinat Awal:

START_COORDINATES menentukan bujur, lintang, dan tinggi awal untuk kamera. Di sinilah eksplorasi akan dimulai, jadi tetapkan ke area yang Anda inginkan dilihat oleh pengguna terlebih dahulu.

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

  • Nilai Default:

    • longitude: 0
    • latitude: 60
    • height: 15000000 (15.000 km di atas permukaan)

  • Contoh Nilai:

    • longitude: -122.4934, latitude: 37.7951 (Jembatan Gerbang Golden)
    • height: 2000 (posisi awal yang lebih dekat)

Memuat lokasi yang telah ditentukan

Objek location di config.json menetapkan pusat area. Itu adalah sudut pandang awal kamera dalam penampil Cesium.coordinates: Mendefinisikan lintang (lat) dan bujur (lng) untuk lokasi yang akan dituju kamera geser ke atas terlebih dahulu. Sesuaikan nilai ini untuk menyetel kamera ke lokasi tertentu di di seluruh dunia.

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

Konfigurasi ini memungkinkan Anda memulai aplikasi 3D Place Navigator memperbesar lokasi tertentu pilihan Anda. Anda dapat menggunakan alat Geocoding Google untuk mendapatkan lintang dan bujur koordinat alamat atau nama tempat dengan menentukannya di lokasi :

  1. Mengakses Geocoding alat.
  2. Buat Permintaan Geocoding Klik "Coba Sendiri" bagian dan masukkan lokasi yang Anda pilih di "Address" kolom tersebut. Anda dapat menentukan alamat, nama tempat, atau bahkan {i>landmark<i}.
  3. Generate Coordinates Klik "Run" untuk mengirimkan permintaan Anda. Tujuan akan mengembalikan respons yang berisi berbagai informasi tentang lokasi, termasuk koordinat lintang dan bujurnya yang ditampilkan di bawah geometry.location.
  4. Menggunakan geocode Menyalin nilai lintang dan bujur yang diambil dari respons dan tempelkan ke objek coordinates dalam konfigurasi Anda.

Catatan: Geocode yang digunakan dengan cara ini harus mengikuti persyaratan yang diuraikan di Google Maps Persyaratan Layanan Platform Layanan pasal 3.4 di mana mereka tidak boleh di-{i>cache<i} selama lebih dari 30 hari dan harus diperbarui setelah itu.

gambar

Konfigurasi ini akan menggunakan alat Geocoding untuk otomatis menentukan koordinat kantor pusat Google di Mountain View, California, dan meluncurkan aplikasi 3D Place Navigator Anda dengan kamera yang dipusatkan di lokasi tersebut.

Penyesuaian lanjutan

Anda dapat melakukan penyesuaian tambahan dengan lebih mendalami kode. Bagian berikut akan memandu Anda melalui beberapa opsi

Tambahkan jalur kamera baru

Secara otomatis, solusi ini menerapkan dua jalur kamera yang berbeda:

fixed-orbit" | "dynamic-orbit"

Tetapi jika Anda ingin membuat jalur kamera baru, Anda dapat menerapkannya menggunakan

/src/utils/cesium.js dalam fungsi calculateAutoOrbitFrame.

Untuk menggunakan penghitungan jalur baru ini di panel konfigurasi,lihat implementasi di demo/src/camera-settings.js.

Tambahkan jenis tempat lainnya

Daftar jenis tempat untuk konfigurasi dapat disesuaikan dalam file demo/src/place-settings.js. Mulai baris 4 adalah jenis tempat yang tersedia dalam demo.

Jika Anda ingin menggunakan jenis tempat tertentu tanpa mengubah sumber demo Anda dapat menambahkannya ke file config.json di bawah poi.types

Menyesuaikan gaya (css)

Untuk gaya, kita menggunakan variabel CSS. Mereka didukung di setiap {i>browser<i} dan memungkinkan untuk mengubah satu baris di satu tempat terpusat dan memperbarui properti CSS tertentu. Variabel CSS kita ditentukan di src/main.css.. Anda dapat menyesuaikan warna, pengaturan {i>font<i} dan {i>padding<i} atau margin untuk keseluruhan aplikasi.

Menempatkan data tambahan

Untuk menempatkan data tambahan, Anda perlu memperbarui file src/utils/cesium.js dan baca dokumentasi cesium tentang cara menambahkan GeoJSON atau referensi geografis lainnya datanya ke seluruh dunia.

Hapus bagian konfigurasi

Aplikasi JavaScript kita memiliki tiga bagian utama dalam file konfigurasi: demo/src/[config-panel.js](config-panel.js): location, poi, dan camera. Masing-masing bagian ini menyediakan opsi konfigurasi untuk berbagai aspek aplikasi. Developer dapat menyesuaikan bagian ini berdasarkan kebutuhan spesifik mereka.

1.Menghapus bagian tertentu dari konfigurasi

  • Bagian Lokasi

Untuk menghapus bagian location, temukan baris berikut dalam kode Anda dan komentari atau hapus:

const locationConfig = { ...config.location, ...customConfig.location };
  • Bagian POI

Untuk menghapus bagian poi, temukan baris berikut dalam kode Anda dan beri komentar atau hapus:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Bagian Kamera

Untuk menghapus bagian camera, temukan baris berikut dalam kode Anda dan beri komentar atau menghapusnya:

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

2. Memperbarui Konfigurasi Gabungan

Setelah menghapus suatu bagian, Anda harus memperbarui konfigurasi gabungan . Objek ini menggabungkan konfigurasi default dengan penyesuaian apa pun. Hapus properti yang sesuai dari objek 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. Menyesuaikan Elemen UI

Jika menghapus bagian juga berarti menghapus elemen UI terkait, perbarui kode sesuai dengan kode html. Misalnya, jika Anda ingin menghapus di panel Admin seperti kecepatan kamera, Anda harus memperbarui kode js dan html untuk string tersebut.

4. Hapus Bagian Setelan Kamera

Untuk menghapus bagian setelan kamera dari UI, temukan baris berikut dan komentari atau hapus:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Menghapus Ringkasan Bagian Lokasi

const locationSection = await getLocationSettingsSection(locationConfig);

Kesimpulan

Dalam dokumen ini, kita telah mempelajari berbagai opsi penyesuaian yang tersedia di Penjelajah Area untuk menyesuaikan pengalaman eksplorasi 3D Anda. Dengan memodifikasi perilaku kamera, menyesuaikan kemiringan visual, dan mengubah tingkat zoom, Anda dapat membuat pengalaman unik dan menarik yang menunjukkan setelan serta poin yang Anda pilih minat tertentu.

Ingatlah untuk bereksperimen dengan berbagai konfigurasi dan menyesuaikan parameter untuk memenuhi kebutuhan spesifik Anda. Dengan memanfaatkan kecanggihan kustomisasi, Anda dapat membuat perjalanan yang imersif dan dipersonalisasi yang memikat audiens dan menghidupkan visi Anda.