3D Area Explorer adalah solusi yang memberdayakan Anda untuk menjelajahi komunitas dalam 3D yang menawan. Solusi ini memanfaatkan: Kartu 3D Fotorealistik Google, Penelusuran Places, Place Details, dan Autocomplete API.
Memulai:
Aktifkan
Menyesuaikan pengalaman
Solusi Penjelajah Area 3D sangat mudah disesuaikan, sehingga Anda dapat menyesuaikan
pengalaman dengan perjalanan pelanggan. Anda dapat menyesuaikannya
menggunakan panel kontrol di UI atau menggunakan file config.json
.
Siap untuk menyesuaikan? 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 dengan tinggi tetap dan mengitari tempat menarik tertentu.
Lihat cara kerja orbit tetap dengan menjelajahi kantor Google Sydney.
Orbit dinamis:
Kamera bergerak dengan lancar dalam lintasan gelombang sinus di sekitar lokasi menarik yang ditetapkan. Gerakan unik ini memungkinkan penonton mengamati lokasi menarik dari berbagai ketinggian dan sudut, sehingga menawarkan pengalaman visual yang dinamis dan imersif.
Lihat aksi orbit dinamis dengan menjelajahi menara Eiffel.
Lokasi Menarik (POI):
- Sesuaikan eksplorasi Anda dengan menentukan jenis tempat yang ingin Anda temukan. Pilih dari museum, taman, sekolah, dan lainnya menggunakan array
types
diconfig.json
. - Tetapkan jumlah maksimum Lokasi Menarik yang ditampilkan dengan menyesuaikan
parameter
density
. - Ubah
searchRadius (in meters)
untuk menyertakan gem tersembunyi di sekitar atau berfokus pada area tertentu. - Setel kecepatan yang dipilih untuk gerakan kamera Anda dengan parameter
speed (in revolutions per minute)
.
Melakukan Pramuat eksplorasi: Pelajari Lebih Dalam dengan Penyesuaian URL
Penjelajah Area 3D memungkinkan Anda menentukan terlebih dahulu eksplorasi dengan penyesuaian URL. Hal ini meniadakan kebutuhan konfigurasi manual, sehingga menyederhanakan pengalaman pengguna.
Membuat URL yang Sempurna:
Cukup tambahkan parameter tertentu ke URL Penjelajah Area untuk menetapkan lokasi dan setelan lainnya terlebih dahulu. Contoh:
https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439
URL ini menetapkan titik awal pada lintang dan bujur yang telah ditentukan, yang 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:
- Menyederhanakan pengalaman pengguna dengan menentukan setelan yang Anda pilih terlebih dahulu.
- Bagikan perjalanan yang ditargetkan dengan lokasi dan POI spesifik yang dimuat sebelumnya.
- Sematkan pengalaman Area Explorer yang telah dikonfigurasi sebelumnya dengan lancar di dalam situs.
Dengan memanfaatkan penyesuaian URL, Anda dapat membuat pengalaman yang dibuat khusus dan mengundang orang lain untuk memulai petualangan pilihan.
Penyesuaian lebih lanjut
Bagian sebelumnya mempelajari penyesuaian yang dapat diakses melalui UI atau file konfigurasi. Namun, ada juga beberapa parameter bawaan lainnya yang dapat Anda ubah 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. Variabel berikut dapat diubah untuk mengubah tampilan dan nuansa aplikasi
Tinggi kamera
Kontrol seberapa tinggi posisi kamera saat terbang ke suatu titik dengan
menyesuaikan nilai CAMERA_HEIGHT
. Nilai yang lebih tinggi akan memberikan tampilan panorama yang lebih besar, sedangkan nilai yang lebih rendah akan membuat Anda semakin dekat dengan detail area
// 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.
Presentasi kamera
Kemiringan awal kamera ditentukan oleh BASE_PITCH. Gunakan nilai negatif untuk kemiringan ke bawah dan nilai positif untuk tampilan ke atas. Untuk menambahkan gerakan dinamis yang halus ke eksplorasi, 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
danAUTO_ORBIT_PITCH_AMPLITUDE
- Nilai Default:
BASE_PITCH
: -30 (melempar 30 derajat ke bawah)AUTO_ORBIT_PITCH_AMPLITUDE
: 10 (mengubah pitch sebesar 10 derajat seiring waktu)
Deskripsi: Pitch kamera adalah kemiringan visual pada peta, yang diukur dalam derajat. Gerakan ini juga dikenal sebagai kemiringan. Setelan ini menentukan pitch awal dan penyesuaian pitch dinamis kamera selama rotasi otomatis.
Contoh Nilai:
BASE_PITCH
: 0 (kamera level)AUTO_ORBIT_PITCH_AMPLITUDE
: 0 (tidak ada variasi pitch)
Rentang dan Zoom Kamera
Parameter ini menetapkan jumlah zoom yang diterapkan saat berfokus pada titik tertentu. 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 gerakan kamera dan tingkat zoom untuk tampilan lebih dekat.
Contoh Nilai:
RANGE_AMPLITUDE_RELATIVE
: 1 (variasi rentang penuh)ZOOM_FACTOR
: 10 (zoom lebih sedikit)
// 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.
};
Kamera Direset
Saat pengguna ingin mereset kamera ke posisi semula, nilai CAMERA_OFFSET akan digunakan. Setelan ini mencakup arah (rotasi), pitch (kemiringan), dan rentang (seberapa jauh kamera dari tengah).
- Setelan:
CAMERA_OFFSET
- Nilai Default:
heading
: 0 (tanpa offset rotasi)pitch
: Cesium.Math.toRadians(-30) (melempar 30 derajat ke bawah)range
: 800 (800 meter dari tengah)
- Deskripsi: Menentukan judul, pitch, dan rentang kamera untuk mereset tampilan.
- Contoh Nilai:
heading
: 45 (derajat, tampilan barat laut)range
: 1.500 meter (lebih jauh dari tengah)
Mulai Koordinat:
START_COORDINATES menentukan bujur, lintang, dan tinggi awal untuk kamera. Di sinilah eksplorasi akan dimulai, jadi tetapkan ke area yang Anda inginkan dilihat 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
.0latitude
: 60height
: 15000000 (15.000 km di atas permukaan)
Contoh Nilai:
longitude
: -122.4934,latitude
: 37.7951 (Jembatan Golden Gate)height
: 2000 (posisi awal lebih dekat)
Memuat lokasi yang telah ditentukan
Objek location
di config.json
menetapkan pusat area. Ini adalah
sudut pandang awal kamera di penampil Cesium.coordinates
: Menentukan lintang (lat
) dan bujur (lng
) untuk lokasi yang Anda inginkan untuk digeser terlebih dahulu oleh kamera. Sesuaikan nilai ini untuk menyetel kamera ke lokasi tertentu di
bola dunia.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Dengan konfigurasi ini, Anda dapat memulai aplikasi 3D Place Navigator yang diperbesar di lokasi tertentu pilihan Anda. Anda dapat menggunakan alat Geocoding Google untuk mendapatkan koordinat lintang dan bujur alamat atau nama tempat dengan menentukannya di objek lokasi:
- Akses Alat Geocoding.
- Membuat Permintaan Geocoding Klik bagian "Coba Sendiri" dan masukkan lokasi yang Anda pilih di kolom "Alamat". Anda dapat menentukan alamat, nama tempat, atau bahkan {i>landmark<i}.
- Buat Koordinat Klik tombol "Jalankan" untuk mengirimkan permintaan Anda. Alat ini akan menampilkan respons yang berisi berbagai informasi tentang lokasi, termasuk koordinat lintang dan bujurnya yang ditampilkan di bagian
geometry.location
. - Gunakan geocode Salin 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 dalam Persyaratan Layanan Google Maps Platform bagian 3.4, yaitu tidak boleh disimpan dalam cache selama lebih dari 30 hari dan harus diperbarui setelahnya.
Konfigurasi ini akan menggunakan alat Geocoding untuk secara otomatis menentukan koordinat kantor pusat Google di Mountain View, California, dan meluncurkan aplikasi 3D Place Navigator dengan kamera yang berpusat pada lokasi tersebut.
Penyesuaian lanjutan
Anda dapat melakukan penyesuaian tambahan dengan mempelajari kode lebih dalam. Bagian berikut akan memandu Anda melalui beberapa opsi
Menambahkan jalur kamera baru
Solusi ini sendiri mengimplementasikan dua jalur kamera yang berbeda:
fixed-orbit" | "dynamic-orbit"
Tetapi jika ingin, Anda dapat 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.
Menambahkan jenis tempat lainnya
Daftar jenis tempat untuk konfigurasi dapat disesuaikan di file
demo/src/place-settings.js
. Mulai baris 4 adalah jenis tempat yang
tersedia dalam demo.
Jika ingin menggunakan jenis tempat tertentu tanpa mengubah sumber demo, Anda dapat menambahkannya ke file config.json
di bagian poi.types
Menyesuaikan gaya (css)
Untuk gaya yang kita gunakan dengan variabel CSS. Fungsi ini didukung di setiap browser utama dan memungkinkan Anda mengubah satu baris di satu tempat dan memperbarui properti CSS tertentu. Variabel CSS ditentukan di src/main.css.
. Di sana,
Anda dapat menyesuaikan warna, setelan font, serta padding atau margin untuk seluruh
aplikasi.
Membuat overlay data tambahan
Untuk menempatkan data tambahan, Anda perlu memperbarui file src/utils/cesium.js dan membaca dokumentasi sesium tentang cara menambahkan GeoJSON atau data yang direferensikan secara geografis lainnya ke globe.
Hapus bagian konfigurasi
Aplikasi JavaScript memiliki tiga bagian utama dalam
file konfigurasi: demo/src/[config-panel.js](config-panel.js): location
,
poi
, dan camera
. Setiap bagian ini menyediakan opsi konfigurasi untuk
berbagai aspek aplikasi. Developer dapat menyesuaikan bagian ini
berdasarkan kebutuhan spesifik mereka.
1.Hapus bagian tertentu dari konfigurasi
- Bagian Lokasi
Untuk menghapus bagian location
, temukan baris berikut dalam kode Anda dan
beri komentar 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 hapus:
const cameraConfig = { ...config.camera, ...customConfig.camera };
2. Memperbarui Konfigurasi Gabungan
Setelah menghapus suatu bagian, penting untuk mengupdate objek 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 suatu bagian juga berarti menghapus elemen UI terkait, perbarui kode sesuai dengan kode html. Misalnya, jika ingin menghapus bagian tertentu dari panel Admin seperti kecepatan kamera, Anda harus memperbarui kode js dan html untuk tindakan 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 Area Explorer untuk menyesuaikan pengalaman eksplorasi 3D Anda. Dengan memodifikasi perilaku kamera, menyesuaikan kemiringan visual, dan mengubah tingkat zoom, Anda dapat menciptakan pengalaman unik dan menarik yang menampilkan setelan dan lokasi menarik yang Anda pilih.
Ingatlah untuk bereksperimen dengan berbagai konfigurasi dan menyesuaikan parameter agar sesuai dengan kebutuhan spesifik Anda. Dengan memanfaatkan kecanggihan penyesuaian, Anda dapat menciptakan perjalanan yang imersif dan dipersonalisasi, yang menarik audiens serta mewujudkan visi Anda.