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

3D Alan Gezgini, dünyanın dört bir yanındaki toplulukları keşfetmenizi sağlayan büyüleyici 3D. Çözümün avantajları: Google'ın Fotogerçekçi 3D Karoları, Yer Arama, Yer Ayrıntıları, ve Otomatik Tamamlama API'lerini bulabilirsiniz.

Başlarken:

Etkinleştir

Deneyimi özelleştirin

3D Alan Gezgini çözümü son derece özelleştirilebilir olduğundan, ihtiyaçlarınız doğrultusunda en iyi uygulamaları paylaşacağız. Anahtar kelimeleri 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

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

Kamera Kontrolü

Kameranın yörünge türünü seçerek yolculuğunuzun kontrolünü elinize alın: klasik ilgi çekici bir sinüs dalgası gösterir.

Önemli Noktalar (ÖY):

  • Gitmek istediğiniz yerlerin türlerini belirleyerek keşfinizi özelleştirin keşfedin. types kullanarak müzeler, parklar, okullar ve daha fazlası arasından seçim yapın dizi config.json içinde bulunur.
  • density parametresinden yararlanın.
  • searchRadius (in meters) öğesini değiştirerek yakındaki gizli cevherleri veya odağı ekleyin belirli alanlarda.
  • 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 ile daha ayrıntılı bilgi edinin

3D Alan Gezgini, keşfinizi URL ile önceden tanımlamanızı sağlar birçok seçenek var. Bu yöntem, manuel yapılandırma ihtiyacını ortadan kaldırır ve en iyi uygulamaları paylaşacağız.

Mükemmel URL'yi Oluşturma:

Alan Gezgini URL'sine belirli parametreler ekleyerek konum ve diğer ayarlar. Ö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. anında seçtiğiniz konuma götürüyor. 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'lerin arama 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 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ştirmeden yararlanarak özelleştirilmiş deneyimler oluşturabilir ve başkalarını özel maceralara davet edebilirsiniz.

Diğer özelleştirmeler

Önceki bölümde, kullanıcı arayüzü veya yapılandırma üzerinden erişilebilen düzenlemeler inceleniyordu. dosyası olarak kaydedebilirsiniz. Ancak, daha fazla ve daha fazla yerleşik parametreye sahiptir. değiştirin.

Bu gelişmiş özelleştirmeleri yapmak için, Yardım Merkezimizdeki koda src dizininde bulunan src/utils/cesium.js dosyası. Aşağıdakiler değişkenleri, uygulamanın görünümünü ve tarzını değiştirecek şekilde değiştirilebilir

Kamera yüksekliği

Bir noktaya doğru uçarken kameranın kendisini ne kadar yukarıda konumlandıracağını kontrol edin CAMERA_HEIGHT değeri düzenleniyor. Yüksek değerler, uzaklaştırılmış, panoramik görünüm, düşük değerler ise sizi yakın bir konuma bölgenin ayrıntıları

// 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: Aşağıdaki durumlarda hedef konumun üzerinde kameranın yüksekliğini tanımlar bir noktaya uçuyorum.
  • Örnek Değerler:
    • 50: Ayrıntıları vurgulayan yakından görünüm.
    • 200: Daha panoramik perspektif.

Kamera ses tonu

İlk eğme BASE_PITCH tarafından tanımlanır. Aşağı doğru eğme için negatif değerler kullanın yukarıya doğru bir görünüm için pozitif değerlere. Ekran görüntüsüne hafif bir dinamik hareket eklemek için keşfinizi, Automotive_ORBIT_PITCH_AMPLITUDE olarak 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 10 derece değişiyor saat)

Açıklama: Kamera ses tonu, haritanın görsel açıdan yatırılmasıdır ve derece. Eğme olarak da bilinir. Bu ayarlar kameranın başlangıçtaki otomatik rotasyonlar sırasında ses perdesi ve dinamik perde ayarı özellikleri bulunur.

Ö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 bir nesneye odaklanıldığında uygulanan yakınlaştırma miktarını puan. 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 sırasında aralık değişimini tanımlar yakınlaştırma seviyesini belirleyin.

Ö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

Kullanıcı kamerayı orijinal konumuna sıfırlamak istediğinde CAMERA_OFFSET değerleri kullanılır. Bu ayar, başlığı (döndürme) perde (eğme) ve menzil (kameranın merkezden ne kadar uzakta olduğu).

  • 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: Sıfırlamak için kamera yönünü, perdesini ve aralığını tanımlar görünüm.
  • Örnek Değerler:
    • heading: 45 (derece, kuzeybatı görünümü)
    • range: 1500 metre (merkezden daha uzak)

Başlangıç Koordinatları:

START_COORDINATES, öğe için başlangıç boylamı, enlem ve bulun. Keşf burada başlar. Bu nedenle, keşfi istediğiniz alana ayarlayın. kullanıcılara gösterilmesi gerekir.

// 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ü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: Tanımladığı kameranın ulaşmasını istediğiniz konumun enlem (lat) ve boylam (lng) başa kaydırın. Kamerayı şuradaki belirli bir konuma ayarlamak için bu değerleri ayarlayın: yerkürede görebilirsiniz.

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

Bu yapılandırma, 3D Place Navigator uygulamanızı başlatmanıza olanak tanır. yakınlaştırdığınız belirli bir yeri yakınlaştırın. Enlem ve boylam değerlerini öğrenmek için Google'ın Coğrafi Kodlama aracını kullanabilirsiniz bir adresin veya yer adının koordinatlarını nesne:

  1. Coğrafi Kodlama aracını kullanın.
  2. Coğrafi Kodlama İsteği Oluşturun "Kendiniz deneyin" seçeneğini tıklayın ve "Adres" alanına seçtiğiniz konumu girin girin. Bir adres, ve hatta önemli noktaları görebilirsiniz.
  3. Koordinatlar Oluşturun "Çalıştır"ı tıklayın düğmesini tıklayın. İlgili içeriği oluşturmak için kullanılan araç, konumla ilgili çeşitli bilgiler içeren bir yanıt döndürür. alan adının altında görüntülenen enlem ve boylam koordinatları dahil geometry.locationbölümünü ziyaret edin.
  4. Coğrafi kodlar kullanın Google Cloud Platform'dan alınan enlem ve boylam değerlerini yanıtı ekleyin ve bunları yapılandırmanızdaki coordinates nesnesine yapıştırın.

Not: Bu şekilde kullanılan coğrafi kodlar, Google Haritalar'da belirtilen şartlara uygun olmalıdır. Platform Şartları Hizmetler bölüm 3.4'ü belirten başka bir deyişle, bu veriler 30 günden uzun bir süre boyunca yenilenebilir.

resim

Bu yapılandırmada, coğrafi kodlama aracından yararlanarak Google'ın Kaliforniya'daki Mountain View'daki genel merkezinin koordinatlarını almak ve kamera o konuma ortalanmış bir şekilde yerleştirin.

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. politikasında uygulama

Daha fazla yer türü ekle

Yapılandırmaya ilişkin yer türleri listesi dosyada ayarlanabilir demo/src/place-settings.js 4. satırdan başlayarak demoda mevcuttur.

Demo kaynağını değiştirmeden belirli yer türlerini kullanmak istiyorsanız bunları poi.types altındaki config.json dosyasına ekleyebilir

Stili özelleştirme (css)

CSS değişkenleriyle çalıştığımız stiller için. Her büyük sektörde desteklenmektedir tek bir satırı değiştirme ve güncelleme işlemlerini merkezi bir yerde, belirli CSS özellikleri. CSS değişkenlerimiz src/main.css. bölümünde tanımlanır. renkleri, yazı tipi ayarlarını ve dolguları veya kenar boşlukları kabul edersiniz.

Ek verileri bindirme

Ek verileri yerleştirmek için src/utils/cesium.js dosyasını güncellemeniz ve GeoJSON veya referans verilen diğer coğrafi bölgeleri nasıl ekleyeceğinizle ilgili cesium dokümanlarına bakın bir alan sunuyoruz.

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

JavaScript uygulamamızın üç ana bölümü vardır yapılandırma dosyası: demo/src/[config-panel.js](config-panel.js): location, poi ve camera. Bu bölümlerin her biri ve bunu da beraberinde getirir. Geliştiriciler bu bölümleri özelleştirebilir karar verebilir.

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ı bulun ve 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 ve yorumunuzda aşağıdaki satırı bulun veya silin:

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

camera bölümünü kaldırmak için kodunuzda ve yorumunuzda aşağıdaki satırı bulun 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ırmanın güncellenmesi gerekir. nesnesini tanımlayın. 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 güncelleyin. uygun şekilde değiştirmelisiniz. Örneğin, arama yapan kullanıcıların kamera hızı gibi seçimler yapıyorsunuz. Bu işlemi yaparken js ve html koduna sahip olursunuz.

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ı bulun ve yorum yapın veya silin:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Konum Bölümü Özetini Kaldırma

const locationSection = await getLocationSettingsSection(locationConfig);

Sonuç

Bu dokümanda, kullanabileceğiniz çeşitli özelleştirme seçeneklerini inceledik. üç boyutlu keşif deneyiminizi özelleştirmek için Alan Gezgini'ni ziyaret edin. Değiştirerek kamera davranışı, görsel eğimi ayarlama ve yakınlaştırma seviyelerini değiştirme gibi seçtiğiniz ayarları ve puanları gösteren benzersiz ve ilgi çekici deneyimler sağlayabilir.

Farklı yapılandırmalarla denemeler yapmayı ve özel gereksinimlerinize uyacak şekilde değiştirebilirsiniz. Projenin vizyonu ve kişiselleştirilmiş ve kullanıcı deneyiminin her biri için etkileyici ve kişiselleştirilmiş yolculuklar ve vizyonunuzu hayata geçireceksiniz.