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.
Sabit yörünge:
Bu, sabit bir yükseklikte ve belirli bir noktanın çevresinde dairesel bir yörüngedir ilgi alanı.
Google Sidney'i keşfederek sabit yörüngeyi iş başında görün bilgi edinin.
Dinamik yörünge:
Kamera, belirlenen bir nokta etrafında sinüs dalgası yörüngesinde sorunsuz şekilde hareket eder önemli bir nokta. Bu eşsiz hareket, izleyicilerin ana fikri gözlemlemesini sağlar farklı yükseklik ve açılardan ilgi çekici resimlere sahiptir. etkileyici bir görsel deneyim sunuyoruz.
Eyfel'i keşfederek dinamik yörüngeyi iş başında görün kulesi hakkında daha fazla bilgi edinin.
Ö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 diziconfig.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
veAUTO_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 değişimi)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
: 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
: 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:
- Coğrafi Kodlama aracını kullanın.
- 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.
- 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.location
bölümünü ziyaret edin. - 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.
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ı
bir uygulamadır.
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.