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

3D Area Explorer, toplulukları büyüleyici 3D olarak keşfetmenize olanak tanıyan bir çözümdür. Çözüm şu özelliklerden faydalanır: Google'ın Fotogerçekçi 3D Karolar, Yer Arama, Yer Ayrıntıları ve Otomatik Tamamlama API'leri.

Başlarken:

Etkinleştir

Deneyimi özelleştirme

3D Alan Gezgini çözümü, deneyimi müşterilerinizin yolculuklarına göre uyarlamanıza olanak tanıyan büyük ölçüde özelleştirilebilir. Kullanıcı arayüzündeki kontrol panelini veya config.json dosyasını kullanarak özelleştirme 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 nokta etrafında dönen dairesel bir yörüngedir.

    Google Sidney ofisini keşfederek sabit bir yörüngeyi çalışırken görün.

  • Dinamik yörünge:

    Kamera, belirli bir önemli nokta çevresinde sinüs dalgası yörüngesinde düzgün bir şekilde hareket eder. Bu benzersiz hareket, izleyicilerin önemli yerleri farklı yüksekliklerden ve açılardan gözlemleyebilmesini sağlayarak dinamik ve sürükleyici bir görsel deneyim sunuyor.

    Eyfel kulesini keşfederek dinamik bir yörüngeyi çalışırken görün.

Önemli Yerler (Ö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ı ayarlayın.
  • Yakındaki gizli cevherleri içerecek veya belirli alanlara odaklanacak şekilde searchRadius (in meters) değiştirin.
  • speed (in revolutions per minute) parametresiyle kameranızın hareketi için seçilen hızı ayarlayın.

Keşfinizi Önceden Yükleme: URL Özelleştirme Özelliğiyle Daha Ayrıntılı İnceleme

3D Alan Gezgini, URL özelleştirmeyle keşfinizi önceden tanımlamanıza olanak tanır. Bu da manuel yapılandırma ihtiyacını ortadan kaldırarak kullanıcı deneyimini kolaylaştırır.

Mükemmel URL'yi 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 ayarlayarak 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örüntülenecek ÖY türlerinin virgülle ayrılmış listesi.
  • poi.density: Seçilen maksimum ÖY sayısı.
  • poi.searchRadius: Yakındaki ÖY'leri aramak için kullanılan yarıçap.
  • camera.speed: Kamera yörünge hızı.
  • camera.orbitType: Kamera yörünge türü ("sabit yörünge" veya "dinamik yörünge").

URL Özelleştirmenin Yararları:

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

URL özelleştirme olanaklarından yararlanarak özel olarak hazırlanmış deneyimler oluşturabilir ve başkalarını özel olarak seçilmiş maceralara davet edebilirsiniz.

Diğer özelleştirmeler

Bir önceki bölümde, kullanıcı arayüzü veya yapılandırma dosyası üzerinden erişilebilen düzenlemeler ele alınmıştır. 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 kameranın ne kadar yüksekte kalacağını kontrol edin. Yüksek değerler daha yakınlaştırılmış, panoramik bir görünüm sağlarken, düşük değerler sizi bölgenin ayrıntılarına yaklaştırı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 giderken 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 perspektif.

Kamera satış konuşması

Kameranın ilk eğme değeri BASE_PITCH ile tanımlanır. Aşağı doğru eğmek için negatif değerler, yukarıya doğru eğmek için de pozitif değerler kullanın. Keşfinize hafif bir dinamik hareket eklemek için AUTO_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ğı iner)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zaman içinde perdeyi 10 derece değiştirme)

Açıklama: Kamera perdesi, bir haritanın derece cinsinden ölçülen görsel eğimidir. 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 (seviye kamerası)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (sızıntı 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öreli mesafe varyasyonu)
  • ZOOM_FACTOR: 20 (kamera yakınlaştırma faktörü)

Açıklama: Bu ayarlar, kamera hareketi sırasında aralık varyasyonunu ve daha yakından bakmak için yakınlaştırma düzeyini tanımlar.

Örnek Değerler:

  • RANGE_AMPLITUDE_RELATIVE: 1 (tam aralık varyasyonu)
  • 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

Kullanıcı kamerayı orijinal konumuna sıfırlamak istediğinde CAMERA_OFFSET değerleri kullanılır. Bu ayar, başlık (döndürme), ses perdesi (yatırma) ve mesafeyi (kameranın merkezden uzaklığı) içerir.

  • Ayar: CAMERA_OFFSET
  • Varsayılan Değerler:
    • heading: 0 (döndürme ofseti yok)
    • pitch: Sesium.Math.toRadians(-30) (30 derece aşağı doğru eğim)
    • 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 uzakta)

Koordinatları Başlat:

START_COORDINATES, kameranın başlangıç boylamını, enlemini ve yüksekliğini tanımlar. Keşif burada başlar. 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: 0
    • latitude: 60
    • height: 15000000 (yüzeyden 15.000 km yükseklik)

  • Örnek Değerler:

    • longitude: -122.4934, latitude: 37.7951 (Golden Gate Köprüsü)
    • height: 2000 (daha yakın başlangıç konumu)

Önceden tanımlanmış bir konum yükle

config.json içindeki location nesnesi, alanın merkezini ayarlar. Bu, kameranın Cesium görüntüleyicideki ilk görüş noktasıdır.coordinates: Kameranın ilk olarak kaydırmasını istediğiniz konum için enlemi (lat) ve boylamı (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, seçtiğiniz belirli bir konuma yakınlaştırılmış 3D Place Navigator uygulamanızı başlatmanızı sağlar. 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:

  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 seçtiğiniz konumu "Adres" alanına girin. Bir adres, yer adı ve hatta önemli noktalar belirtebilirsiniz.
  3. Koordinatlar Oluştur İsteğinizi göndermek için "Çalıştır" düğmesini tıklayın. Araç, konum hakkında geometry.locationbölümünün altında görüntülenen enlem ve boylam koordinatları da dahil olmak üzere çeşitli bilgileri içeren bir yanıt döndürür.
  4. Coğrafi kodlar kullanın Yanıttan alınan enlem ve boylam değerlerini kopyalayın ve yapılandırmanız içindeki 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. Bu şartlara göre, 30 günden uzun süre boyunca önbellekte tutulmamalı ve bu sürenin ardından yenilenmelidir.

resim

Bu yapılandırmada, Mountain View, Kaliforniya'da bulunan Google genel merkezinin koordinatlarını otomatik olarak belirlemek için Coğrafi Kodlama aracı kullanılır ve kamera bu konumda ortalanmış şekilde 3D Place Navigator uygulamanız başlatılır.

Gelişmiş özelleştirmeler

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

Yeni kamera yolu ekle

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

fixed-orbit" | "dynamic-orbit"

Ancak, yeni bir kamera yolu oluşturmak isterseniz bunu

/src/utils/cesium.js oluşturabilirsiniz.calculateAutoOrbitFrame işlevi.

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

Daha fazla yer türü ekleyin

Yapılandırmayla ilgili yer türlerinin listesi şu dosyada ayarlanabilir: demo/src/place-settings.js. Demoda bulunan yer türleri 4. satırdan başlar.

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)

Stiller için CSS değişkenleriyle çalıştık. Bunlar, başlıca tüm tarayıcılarda desteklenir ve merkezi bir yerde tek bir satırı değiştirmeyi ve belirli CSS özelliklerini güncellemeyi mümkün kılar. CSS değişkenlerimiz src/main.css. içinde tanımlanır. Burada, uygulamanın tamamı için renkleri, yazı tipi ayarlarını ve dolguları veya kenar boşluklarını ayarlayabilirsiniz.

Yer paylaşımlı ek veriler

Bindirme ek verisi için, src/utils/cesium.js dosyasını güncellemeniz ve GeoJSON ya da diğer coğrafi referanslı verilerin yerküreye nasıl ekleneceği hakkındaki sezyum dokümanlarına bakmanız gerekir.

Yapılandırma bölümlerini kaldır

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ı özellikleri için yapılandırma seçenekleri sunar. Geliştiriciler bu bölümleri özel ihtiyaçlarına göre özelleştirebilirler.

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

  • Konum Bölümü

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 };
  • ÖY Bölümü

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 };
  • Kamera Bölümü

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üncelleme

Bir bölümü kaldırdıktan sonra, birleştirilmiş yapılandırma nesnesini güncellemek 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 Ayarlayın

Bir bölümü kaldırmak, ilgili kullanıcı arayüzü öğelerini de kaldırmak anlamına geliyorsa kodu html koduna uygun şekilde güncelleyin. Örneğin, kamera hızı gibi belirli bir bölümü Yönetici panelinden kaldırmak istiyorsanız 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 belgede, 3D keşif deneyiminizi özelleştirmek için Alan Gezgini'nde sunulan çeşitli özelleştirme seçeneklerini inceledik. Kamera davranışını değiştirerek, görsel eğmeyi ayarlayarak ve yakınlaştırma seviyelerini değiştirerek, seçili ayarlarınızı 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 uyacak şekilde ince ayar yapmayı unutmayın. Özelleştirmenin gücünden yararlanarak, kitlenizi büyüleyen ve vizyonunuzu hayata geçiren etkileyici, kişiselleştirilmiş yolculuklar oluşturabilirsiniz.