Son derece özelleştirilebilir olan 3D Alan Gezgini çözümü, deneyimi müşteri yolculuklarınıza göre uyarlamanıza olanak tanır. Kullanıcı arayüzündeki kontrol panelini veya config.json dosyasını kullanarak özelleştirme yapabilirsiniz.
Kameranın yörünge türünü (klasik dairesel yol veya ilgi çekici sinüs dalgası) seçerek yolculuğunuzun kontrolünü elinize alın.
3D Alan Gezgini, URL özelleştirme ile keşfinizi önceden tanımlamanızı sağlar. Bu, manuel yapılandırma ihtiyacını ortadan kaldırarak kullanıcı deneyimini kolaylaştırır.
Konumu ve diğer ayarları önceden ayarlamak için Alan Gezgini URL'sine belirli parametreler eklemeniz yeterlidir. Örneğin:
Bu URL, başlangıç noktasını belirtilen enlem ve boylama ayarlar ve sizi anında seçilen konuma götürür. Kullanılabilir Parametreler:
URL özelleştirmeden yararlanarak özelleştirilmiş deneyimler oluşturabilir ve başkalarını özel maceralara katılmaya davet edebilirsiniz.
Not: Tamamen yüklenmiş bir özelleştirilmiş URL'yi deneyin:
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
Diğer özelleştirmeler
Önceki bölümde, kullanıcı arayüzü veya yapılandırma dosyası üzerinden erişilebilen düzenlemeler inceleniyordu. Bununla birlikte, uygulamayı daha fazla özelleştirmek için değiştirebileceğiniz başka yerleşik parametreler de vardır.
Bu gelişmiş özelleştirmeleri yapmak için src dizininde bulunan src/utils/cesium.js dosyasındaki koda bakmanız gerekir. Aşağıdaki değişkenler, uygulamanın görünümünü ve tarzını değiştirmek için değiştirilebilir
Kamera yüksekliği
CAMERA_HEIGHT değerini ayarlayarak kameranın bir noktaya doğru uçarken kendisinin ne kadar yukarıda konumlandırılacağını kontrol edin. Yüksek değerler daha yakınlaştırılmış
ve panoramik bir görüntü sağlar. Düşük değerler ise bölgenin ayrıntılarına yaklaşır
// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
Ayar: CAMERA_HEIGHT
Varsayılan Değer: 100
Açıklama: Bir noktaya uçarken kameranın hedef konumun üzerindeki yüksekliğini tanımlar.
Örnek Değerler:
50: Ayrıntıları vurgulayan yakından görünüm.
200: Daha panoramik perspektif.
Kamera ses tonu
Kameranın ilk yatırımı BASE_PITCH tarafından tanımlanır. Aşağı doğru eğme için negatif değerler, yukarı doğru görünüm için pozitif değerler kullanın. Keşfinize hafif bir dinamik hareket eklemek için Automotive_ORBIT_PITCH_AMPLITUDE değerini değiştirin.
// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
Ayar: BASE_PITCH ve AUTO_ORBIT_PITCH_AMPLITUDE
Varsayılan Değerler:
BASE_PITCH: -30 (30 derece aşağıya doğru)AUTO_ORBIT_PITCH_AMPLITUDE: 10 (ses perdesi zamanla 10 derece değişir)
Açıklama: Kamera perdesi, haritanın derece cinsinden ölçülen görsel yatırmasıdır. Eğme olarak da bilinir. Bu ayarlar, otomatik döndürmeler sırasında kameranın ilk perdesini ve
dinamik perde ayarlamasını tanımlar.
Örnek Değerler:
BASE_PITCH: 0 (düz kamera)AUTO_ORBIT_PITCH_AMPLITUDE: 0 (perde varyasyonu yok)
Kamera Menzili ve Yakınlaştırma
Bu parametreler, belirli noktalara odaklanırken uygulanan yakınlaştırma miktarını
ayarlar. Daha küçük değerler daha yakın yakınlaştırma anlamına gelir.
// 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;
Ayar: RANGE_AMPLITUDE_RELATIVE ve ZOOM_FACTOR
Varsayılan Değerler:
RANGE_AMPLITUDE_RELATIVE: 0,55 (göreceli mesafe varyasyonu)ZOOM_FACTOR: 20 (kamera yakınlaştırma faktörü)
Açıklama: Bu ayarlar, kamera hareketi sırasındaki aralık değişimini ve daha yakından bakmak için yakınlaştırma seviyesini tanımlar.
Örnek Değerler:
RANGE_AMPLITUDE_RELATIVE: 1 (tam aralıklı varyasyon)ZOOM_FACTOR: 10 (daha az yakınlaştırma)
// 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 Sıfırlama
Bir kullanıcı kamerayı orijinal konumuna sıfırlamak istediğinde
CAMERA_OFFSET değerleri kullanılır. Bu ayar yön (döndürme), perde (yatırma) ve menzili (kameranın merkezden ne kadar uzakta olduğu) içerir.
Ayar: CAMERA_OFFSET
Varsayılan Değerler:
heading: 0 (dönme ofseti yok)pitch: Sezyum.Math.toRadians(-30) (30 derece aşağıya doğru)range: 800 (merkezden 800 metre)
Açıklama: Görünümü sıfırlamak için kamera yönünü, perdesini ve aralığını tanımlar.
Örnek Değerler:
heading: 45 (derece, kuzeybatı görünümü)range: 1500 metre (merkezden daha uzak)
Başlangıç Koordinatları:
START_COORDINATES, kameranın ilk boylamı, enlemini ve yüksekliğini tanımlar. Burası keşfin başlayacağı yer. Bu nedenle, keşfi kullanıcıların ilk olarak görmesini istediğiniz alana ayarlayın.
// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
longitude: 0,
latitude: 60,
height: 15000000, // 15,000 km above the surface
};
Ayar: START_COORDINATES
Varsayılan Değerler:
longitude: 0latitude: 60height: 15000000 (yüzeyden 15.000 km yüksekte) Örnek Değerler:
longitude: -122.4934, latitude: 37.7951 (Altın Kapı Köprüsü)height: 2000 (daha yakın başlangıç konumu)
Önceden tanımlanmış bir konumu yükleyin
config.json içindeki location nesnesi, alanın merkezini belirler. Bu, Cezyum görüntüleyicideki kameranın ilk bakış noktası.coordinates: Kameranın ilk olarak yatay kaydırmasını istediğiniz konumun enlem (lat) ve boylamını (lng) tanımlar. Kamerayı yerküre üzerinde belirli bir konuma ayarlamak için bu değerleri ayarlayın.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Bu yapılandırma, 3D Place Navigator uygulamanızı seçtiğiniz belirli bir konuma
yakınlaştırarak başlatmanıza olanak tanır.
Bir adresin veya yer adının enlem ve boylam koordinatlarını konum nesnesinde belirterek almak için Google'ın Coğrafi Kodlama aracını kullanabilirsiniz:
Coğrafi Kodlama Aracı 'na erişin.Coğrafi Kodlama İsteği Oluşturun "Kendiniz Deneyin" bölümünü tıklayın ve "Adres" alanına seçtiğiniz konumu girin. Bir adres, yer adı ve hatta
önemli noktalar belirtebilirsiniz.Koordinatlar Oluştur İsteğinizi göndermek için "Çalıştır" düğmesini tıklayın. Araç, geometry.location bölümünde gösterilen enlem ve boylam koordinatları da dahil olmak üzere konumla ilgili çeşitli bilgileri içeren bir yanıt döndürür.Coğrafi kodlar kullanın Yanıttan alınan enlem ve boylam değerlerini kopyalayın ve yapılandırmanızdaki coordinates nesnesine yapıştırın.
Not : Bu şekilde kullanılan coğrafi kodlar, Google Haritalar Platformu Hizmet Şartları bölüm 3.4'te belirtilen şartlara uygun olmalıdır. Yani, 30 günden uzun bir süre boyunca önbelleğe alınmamalı ve bu süreden sonra yenilenmelidir.
Bu yapılandırmada, Google'ın Kaliforniya, Mountain View'daki merkezinin koordinatlarını otomatik olarak belirlemek için Coğrafi Kodlama aracı kullanılır ve 3D Place Navigator uygulamanızı kamera bu konuma ortalanmış şekilde başlatır.
Not: Bu yöntem, koordinatları bulma işlemini basitleştirir ve manuel tanımlama ihtiyacını azaltır. Yapılandırmanızda adresini veya adını kullanarak herhangi bir konumu sorunsuz şekilde keşfetmenize olanak tanır. Gelişmiş özelleştirmeler
Kodun daha derinlerine inerek ek özelleştirmeler yapabilirsiniz.
Aşağıdaki bölümde bazı seçenekler konusunda size yol gösterilmektedir
Yeni kamera yolu ekle
Kullanıma hazır çözüm, iki farklı kamera yolu uygular:
fixed-orbit" | "dynamic-orbit"
Ancak isterseniz yeni bir kamera yolu oluşturmak için
/src/utils/cesium.js yerine calculateAutoOrbitFrame işlevi bulunur.
Bu yeni yol hesaplamasını yapılandırma panelinde kullanmak için demo/src/camera-settings.js. bölümündeki uygulamaya bakın
Daha fazla yer türü ekle
Yapılandırmaya ilişkin yer türleri listesi, demo/src/place-settings.js dosyasında ayarlanabilir. 4. satırdan başlayarak demoda kullanılabilen yer türleridir.
Demo kaynağını değiştirmeden belirli yer türlerini kullanmak istiyorsanız bunları poi.types altındaki config.json dosyasına ekleyebilirsiniz.
Stili özelleştirme (css)
CSS değişkenleriyle çalıştığımız stiller için. Tüm önemli tarayıcılarda desteklenir ve merkezi bir yerde tek bir satırın değiştirilmesini ve belirli CSS özelliklerinin güncellenmesini sağlarlar. CSS değişkenlerimiz src/main.css. bölümünde tanımlanır. Burada uygulamanın tamamı için renkleri, yazı tipi ayarlarını, dolguları veya kenar boşluklarını ayarlayabilirsiniz.
Ek verileri bindirme
Ek verileri yerleştirmek için src/utils/cesium.js dosyasını güncellemeniz ve GeoJSON veya coğrafi referans verilen diğer verilerin yerküreye nasıl ekleneceğiyle ilgili cesium dokümanlarına göz atmanız gerekir.
Yapılandırma bölümlerini kaldırma
JavaScript uygulamamızın yapılandırma dosyasında üç ana bölümü vardır: demo/src/[config-panel.js](config-panel.js): location, poi ve camera. Bu bölümlerin her biri, uygulamanın farklı yönleri için
yapılandırma seçenekleri sunar. Geliştiriciler bu bölümleri özel ihtiyaçlarına
göre özelleştirebilir.
1.Belirli bir bölümü yapılandırmadan kaldırma
location bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulup yorum yapın veya silin:
const locationConfig = { ...config.location, ...customConfig.location };
poi bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulup yorum yapın veya silin:
const poiConfig = { ...config.poi, ...customConfig.poi };
camera bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulup yorum yapın veya silin:
const cameraConfig = { ...config.camera, ...customConfig.camera };
2. Birleşik Yapılandırmaları Güncelle
Bir bölümü kaldırdıktan sonra, birleştirilmiş yapılandırma nesnesinin güncellenmesi önemlidir. Bu nesne, varsayılan yapılandırmayı tüm özelleştirmelerle birleştirir.
İlgili özelliği combinedConfig nesnesinden kaldırın:
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. Kullanıcı Arayüzü Öğelerini Ayarla
Bir bölümün kaldırılması, ilgili kullanıcı arayüzü öğelerinin de kaldırılması anlamına geliyorsa kodu html kodunda buna göre güncelleyin. Örneğin, Yönetici panelinden kamera hızı gibi belirli bir bölümü kaldırmak isterseniz bunun için hem js hem de html kodunu güncellemeniz gerekir.
4. Kamera Ayarları Bölümünü Kaldır
Kamera ayarları bölümünü kullanıcı arayüzünden kaldırmak için aşağıdaki satırı bulup yorum yapın veya silin:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Konum Bölümü Özetini Kaldırma
const locationSection = await getLocationSettingsSection(locationConfig);
Sonuç
Bu dokümanda, 3D keşif deneyiminizi özelleştirmek için Alan Gezgini'nde bulunan çeşitli özelleştirme seçeneklerini inceledik. Kamera davranışını değiştirerek, görsel eğimi ayarlayarak ve yakınlaştırma seviyelerini değiştirerek, seçtiğiniz ayarları ve önemli yerleri gösteren benzersiz ve ilgi çekici deneyimler oluşturabilirsiniz.
Farklı yapılandırmalarla denemeler yapmayı ve parametrelerde belirli ihtiyaçlarınıza göre ince ayar yapmayı unutmayın. Özelleştirmenin gücünden yararlanarak, kitlenizi büyüleyen ve vizyonunuzu hayata geçiren etkileyici ve kişiselleştirilmiş yolculuklar oluşturabilirsiniz.
