3D Alan Gezgini: Özelleştirme kılavuzu

3D Alan Gezgini, toplulukları sürükleyici 3D görüntülerle keşfetmenize olanak tanıyan bir çözümdür. Çözümde şunlar kullanılır: Google'ın fotogerçekçi 3D karoları, Yerler Arama, Yer Ayrıntıları ve Otomatik Tamamlama API'leri.

Başlarken:

Etkinleştir

Deneyimi özelleştirme

3D Alan Gezgini çözümü son derece özelleştirilebilir olduğundan deneyimi müşteri yolculuklarınıza göre uyarlayabilirsiniz. Özelleştirmeyi kullanıcı arayüzündeki kontrol panelini veya config.json dosyasını kullanarak yapabilirsiniz.

Özelleştirmeye hazır mısınız? Bunun için uygulamanız gereken adımlar:

Konum

config.json dosyasında enlem ve boylamı ayarlayarak deneyiminizin başlangıç noktasını tanımlayın.

Kamera Kontrolü

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.

  • Sabit yörünge:

    Bu, sabit bir yükseklikte ve belirli bir önemli noktanın çevresinde dairesel bir yörüngedir.

    Google Sydney ofisini keşfederek sabit yörüngenin nasıl çalıştığını görebilirsiniz.

  • Dinamik yörünge:

    Kamera, belirlenen bir önemli yerin etrafında sinüs dalgası yörüngesinde yumuşak bir şekilde hareket eder. Bu benzersiz hareket, izleyicilerin önemli yeri çeşitli yüksekliklerden ve açılardan gözlemlemesini sağlayarak dinamik ve etkileyici bir görsel deneyim sunar.

    Eyfel Kulesi'ni keşfederek dinamik yörüngenin işleyiş şeklini görebilirsiniz.

Önemli Noktalar (ÖY):

  • Keşfetmek istediğiniz yer türlerini belirleyerek keşfinizi özelleştirin. config.json içindeki types dizisini kullanarak müzeler, parklar, okullar ve daha fazlası arasından seçim yapın.
  • density parametresini ayarlayarak, görüntülenen maksimum Önemli Yer sayısını belirleyin.
  • searchRadius (in meters) öğesini değiştirerek yakındaki gizli cevherleri ekleyin veya belirli alanlara odaklanın.
  • speed (in revolutions per minute) parametresini kullanarak kameranızın hareketi için seçilen hızı ayarlayın.

Keşfinizi önceden yükleme: URL özelleştirme ile daha ayrıntılı inceleme

3D Alan Gezgini, URL özelleştirme ile keşfinizi önceden tanımlamanızı sağlar. Bu da manuel yapılandırma ihtiyacını ortadan kaldırarak kullanıcı deneyimini kolaylaştırır.

Mükemmel URL oluşturma:

Konumu ve diğer ayarları önceden ayarlamak için Alan Gezgini URL'sine belirli parametreler eklemeniz yeterlidir. Örneğin:

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

Bu URL, başlangıç noktasını belirtilen enlem ve boylama ayarlar ve sizi anında seçilen konuma taşır. Kullanılabilir Parametreler:

  • location.coordinates.lat: Seçtiğiniz konumun enlemi.
  • location.coordinates.lng: Seçtiğiniz konumun boylamı.
  • poi.types: Gösterilecek ÖY türlerinin virgülle ayrılmış listesi.
  • poi.density: Seçilen maksimum ÖY sayısı.
  • poi.searchRadius: Yakındaki ÖY'leri arama yarıçapı.
  • camera.speed: Kamera yörünge hızı.
  • camera.orbitType: Kamera yörüngesi türü ("sabit yörünge" veya "dinamik yörünge").

URL özelleştirmenin avantajları:

  • Seçtiğiniz ayarları önceden tanımlayarak kullanıcı deneyimini kolaylaştırın.
  • Hedeflenen yolculukları, önceden yüklenmiş belirli konumlar ve ÖY'lerle paylaşın.
  • Önceden yapılandırılmış Alan Gezgini deneyimlerini web sitelerine sorunsuz bir şekilde yerleştirin.

URL özelleştirmesinden yararlanarak özel deneyimler oluşturabilir ve diğer kullanıcıları özel olarak seçilmiş maceralara davet edebilirsiniz.

Daha fazla özelleştirme

Önceki bölümde, kullanıcı arayüzü veya yapılandırma dosyası üzerinden erişilebilen düzenlemeler incelenmiştir. Bununla birlikte, uygulamayı daha da ö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 kendisini ne kadar yükseğe konumlandıracağını kontrol edin. Daha yüksek değerler, daha uzaklaştırılmış, panoramik bir görünüm sağlarken daha düşük değerler, bölgenin ayrıntılarına daha yakın bir görünüm sunar.

// 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 bir bakış açısı.

Kamera eğimi

Kameranın ilk eğikliği BASE_PITCH ile 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 ince bir dinamik hareket eklemek için AUTO_ORBIT_PITCH_AMPLITUDE değişkenini 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ğı eğim)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zaman içinde perde 10 derece değişir)

Açıklama: Kamera perdesi, haritanın derece cinsinden ölçülen görsel yatırmasıdır. Eğim 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 (tonlama varyasyonu yok)

Kamera Menzili ve Yakınlaştırma

Bu parametreler, belirli noktalara odaklanırken uygulanan yakınlaştırma miktarını belirler. 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 bakış için yakınlaştırma seviyesini tanımlar.

Örnek değerler:

  • RANGE_AMPLITUDE_RELATIVE: 1 (tam aralık varyasyonu)
  • ZOOM_FACTOR: 10 (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öndürme ofseti yok)
    • pitch: Sezyum.Math.toRadians(-30) (30 derece aşağıya doğru)
    • range: 800 (merkeze 800 metre uzaklıkta)
  • Açıklama: Görünümü sıfırlamak için kamera yönünü, eğimi ve aralığı tanımlar.
  • Örnek değerler:
    • heading: 45 (derece, kuzeybatı görünümü)
    • range: 1.500 metre (merkezden daha uzak)

Başlangıç Koordinatları:

START_COORDINATES, kameranın başlangıç boylamını, enlem ve yüksekliğini tanımlar. Keşif buradan başlayacaktır. Bu nedenle, 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: 0
    • latitude: 60
    • height: 15000000 (yüzeyin 15.000 km yukarısında)

  • Ö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ükleme

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 yakınlaştırmasını istediğiniz konumun enlem (lat) ve boylamını (lng) tanımlar. Kamerayı dünyanın herhangi bir konumuna ayarlamak için bu değerleri düzenleyin.

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

Bu yapılandırma, 3D Yer Gezgini 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ı almak için Google'ın Coğrafi Kodlama aracını kullanabilirsiniz. Bunun için konum nesnesine adres veya yer adını belirtmeniz gerekir:

  1. Coğrafi Kodlama Aracı'na erişin.
  2. 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. Adres, yer adı veya önemli yerleri belirtebilirsiniz.
  3. Koordinat oluşturma İsteğinizi göndermek için "Çalıştır" düğmesini tıklayın. Araç, geometry.location bölümünün altında gösterilen enlem ve boylam koordinatları da dahil olmak üzere konumla ilgili çeşitli bilgiler içeren bir yanıt döndürür.
  4. Coğrafi kodları kullanma Yanıttan alınan enlem ve boylam değerlerini kopyalayıp yapılandırmanızdaki coordinates nesnesine yapıştırın.

Not: Bu şekilde kullanılan coğrafi kodlar, Google Haritalar Platformu Hizmet Şartları 3.4 numaralı bölümünde belirtilen şartlara uymalıdır. Yani 30 günden uzun süre boyunca önbelleğe alınmamalı ve bu sürenin ardından yenilenmelidir.

resim

Bu yapılandırma, Google'ın Kaliforniya, Mountain View'daki genel merkezinin koordinatlarını otomatik olarak belirlemek için Coğrafi Kodlama aracını kullanır ve 3D Yer Gezgini uygulamanızı kamerayı bu konuma odaklayacak şekilde başlatır.

Gelişmiş özelleştirmeler

Kodu daha ayrıntılı inceleyerek ek özelleştirmeler yapabilirsiniz. Aşağıdaki bölümde bazı seçenekler açıklanmaktadır.

Yeni kamera yolu ekleme

Kullanıma hazır çözüm, iki farklı kamera yolu uygular:

fixed-orbit" | "dynamic-orbit"

Ancak isterseniz yeni bir kamera yolu oluşturabilir ve

calculateAutoOrbitFrame işlevinde /src/utils/cesium.js.

Yapılandırma panelinde bu yeni yol hesaplamasını kullanmak için demo/src/camera-settings.js.

Daha fazla yer türü ekleme

Yapılandırmanın 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 eklemeniz yeterlidir.

Stili özelleştirme (css)

Stiller için CSS değişkenleriyle çalıştık. Tüm büyük 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 yerleştirme

Ek verileri yerleştirmek için src/utils/cesium.js dosyasını güncellemeniz ve GeoJSON veya coğrafi referanslı 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 kendi ihtiyaçlarına göre özelleştirebilir.

1.Belirli bir bölümü yapılandırmadan kaldırma

  • Konum Bölümü

location bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulup yorumlayın veya silin:

const locationConfig = { ...config.location, ...customConfig.location };
  • Önemli Yerler Bölümü

poi bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulup yorumlayın veya silin:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Kamera Bölümü

camera bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulup yorumunuza ekleyin veya silin:

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

2. Birleştirilmiş yapılandırmaları güncelleme

Bir bölümü kaldırdıktan sonra birleştirilmiş yapılandırma nesnesini güncellemeniz gerekir. 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ırma

Kamera ayarları bölümünü kullanıcı arayüzünden kaldırmak için aşağıdaki satırı bulup yorumlayın veya silin:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Konum Bölüm Özeti'ni kaldırma

const locationSection = await getLocationSettingsSection(locationConfig);

Sonuç

Bu dokümanda, 3D keşif deneyiminizi özelleştirmek için Alan Gezgini'ndeki ç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 sergileyen 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.