3D Haritalar için en iyi uygulamalar

Bu kılavuzda, 3D Haritalar web bileşenleri ve uygulamanızla entegrasyon sırasında dikkat edilmesi gereken noktalar ayrıntılı bir şekilde ele alınmaktadır.

Yer arama ve rota bulma örneği.

Performansla İlgili Dikkat Edilmesi Gerekenler

Etkileşimlilik ve görsel öğeler için sorunsuz ve duyarlı bir deneyim sağlamak amacıyla aşağıdaki yaklaşımları göz önünde bulundurun.

Haritayı yükleme

3D Haritalar'ın ilk yükleme ve oluşturma kurulumu, en iyi kullanıcı deneyimi için tarayıcı yapılandırma tekniklerini ve kullanıcı arayüzüyle ilgili en iyi uygulamaları birleştirir.

• API yükleme: Sayfanın ilk yüklenmesi sırasında Maps JavaScript API'yi yüklemek için 3D Haritaların eş zamansız dinamik yükleme özelliğini kullanın.
• Kitaplıklar: Kitaplıkları, gerektiğinde programatik olarak yükleyin (ör. google.maps.importLibrary("maps3d")). Alternatif olarak, <gmp-map-3d> gibi web bileşenlerini doğrudan komut dosyası yükleme ile doğrudan HTML sayfanızda kullanırsanız kitaplıklar uygun zamanda otomatik olarak yüklenir.
• Temel harita özelliklerini yönetme: Temel harita ÖY'lerini filtrelemek (HYBRID modu) ve yoğunluklarını kontrol etmek için özel bir mapId kullanın. Bu, özellikle uygulamanın işaretçiler veya çoklu çizgiler gibi kendi özel öğeleri varsa kullanışlıdır. Bu sayede görsel karmaşa ve olası çakışmalar önlenir. Alternatif olarak, ÖY'ler, yol çoklu çizgileri, yol adları, sokak adları (UYDU modu) gibi temel harita vektör karoları özelliklerini devre dışı bırakabilirsiniz.
• Etkinlikler: İşaretçileri yükleme, kameraya animasyon ekleme gibi sonraki mantığınızı oluşturmak için gmp-steadystate veya gmp-error etkinliklerini dinleyin.

Arka plan tuvali > Sadeleştirilmiş parçalar > Arazi örgüsü > Yüzey örgüsü (ör. binalar) > Önemli yerler ve yol etiketleri, paralel olarak yüklenen özel öğeler (işaretçiler, 3D modeller vb.)

• Kullanıcı etkileşimi: Haritanın içeriğinde değişiklik yapmadan önce gmp-steadystate etkinliğini bekleyin. Kullanıcı, ilk gmp-steadystate etkinliğinden önce haritayla etkileşime girmeye (kaydırma, yakınlaştırma) başlarsa etkinlik yalnızca kullanıcı etkileşimi durdurduktan sonra tetiklenir. Kullanıcı haritayı kaydırırken veya yakınlaştırırken yer paylaşımı içeriğini (ör. işaretçiler veya çokgenler) görüntülemekten ya da güncellemekten kaçının. gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange, gmp-tiltchange etkinliklerini dinleyerek yer paylaşımı içeriğini (ör. işaretçiler veya çokgenler) görüntülemekten ya da güncellemekten kaçının.

• Sürekli güncellemeler için requestAnimationFrame() (rAF) kullanın ve yoğun hesaplamaları çekim çağrılarından kesinlikle ayırın.

  • rAF kullanın: Güncellemeleri tarayıcının görüntüleme hızıyla senkronize ederek akıcı, 60 FPS animasyon ve daha düşük güç tüketimi sağlar.
  • Yoğun çizim işlemlerinden kaçının: Son güncelleme sırasında çizim dışındaki ağır görevleri gerçekleştirmeyin.
  • Mantığı ayırın: rAF döngüsü içinde minimum web bileşeni güncelleme çağrılarından önce tüm yoğun mantığı gerçekleştirin.

• İlk sahne ayarları: <gmp-map-3d> Eğme gibi kamera ayarları yükleme hızını etkiler. Sahne ne kadar yakınlaştırılır veya eğilirse o kadar ayrıntılı poligonlar gösterilir ve yüklenmesi gerekir. Ayrıntı düzeyi, konuma da bağlıdır (ör. çok sayıda binanın bulunduğu bir şehir ile yalnızca doğal özelliklerin bulunduğu kırsal bir bölge).

  • Daha az yakınlaştırılmış (yüksek irtifa), düşük veya eğimli olmayan görünümleri tercih edin.
  • Kullanıcıların belirli bir alana odaklanması ve karoların tamamen yüklenebilmesi için haritaya sınırlar (örnek) ekleyin.

• Ön yükleyici görseli: <gmp-map-3d> son derece hızlı yüklenir ancak düşük özellikli cihazlara (düşük GPU) veya bant genişliğine (yavaş 4G) sahip kullanıcılar için tam çözünürlükte görüntülenmesi biraz zaman alabilir. Bu durumda, arka planda yüklenen 3D sahneyle birlikte resim, animasyon veya metin içeren bir ön yükleyici oluşturabilirsiniz. Kullanılacak önemli etkinliği aşağıda görebilirsiniz:

Ön yükleyici örneği

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• 2D harita:
  • Bu kullanıcılara, işaretçiler gibi coğrafi verilerinizi içeren alternatif bir 2D harita (SATELLITE) sunulabilir.

• Alternatif olarak, kullanıcıların yükleme sırasında belirli bir yeri görselleştirmesi için UYDU modunda tamamlayıcı bir 2D statik harita gösterilebilir.

Not: Her 2D ve 3D harita yüklemesi şu anda ayrı olarak faturalandırılır. Bu nedenle, ikinci haritayı yalnızca kullanıcılar haritayla etkileşim kurmak istediğinde oluşturun.

Görsel Öğelerin Performansı ve Yönetimi

3D Haritalar; işaretçiler, çoklu çizgiler ve 3D modeller gibi görsel öğeleri optimum performansla ve minimum oluşturma süresiyle (daha yüksek hacimli görseller için bile) görüntülemenin çeşitli yollarını sunar.

İşaretçiler

Örnek senaryo: 41 farklı SVG işaretçi glifi içeren 300 işaretçiyi yüklemek için 150-300 ms (modern dizüstü bilgisayar: macOS M3 Pro, Chrome)

• En Uygun Özelleştirme Seçeneği:
  • PinElement: Temel işaretçi değişiklikleri (renk, ölçek, kenarlık, metin glifi) için <gmp-pin> öğesini veya PinElement sınıfını kullanın. Bu, en yüksek performanslı özelleştirme yöntemidir.
  • HTMLImageElement veya SVGElement işaretçilerini dikkatli kullanın: Şeffaflık ekleme veya SVGElement'e simge gibi bir resim ekleme gibi daha fazla özelleştirme için kullanın (base64 kodlaması gerekir). Yükleme sırasında rasterleştirilirler ve performans ek yüküne neden olurlar. HTMLImageElement ve SVGElement, Marker3DElement'in varsayılan alanına atanmadan önce <template> öğesine sarmalanmalıdır.
  • Düz HTML veya CSS ekleme özelliği şu anda kullanılamıyor.
• Çakışma davranışını yönetme: İşaretçinin collisionBehavior özelliğinden yararlanın. Her zaman görünür olması gereken kritik işaretçiler için davranışı buna göre ayarlayın. Daha az önemli işaretçilerin gizlenmesine izin vererek özellikle yüksek yakınlaştırma seviyelerinde daha temiz ve düzenli bir harita deneyimi sunun.
• Yalnızca kritik ÖY'ler: drawsWhenOccluded özelliğini yalnızca binalar veya arazi üzerinden görülmesi gereken işaretçiler (ör. kurtarma hedefi, gömülü bir elektrik hattı veya kullanıcının avatarı) için kullanın (veya özelliği programatik olarak ayarlayın).
• Örtüşmeyi test etme: Harita 3D olduğundan, işaretçiler binalar veya arazi tarafından görsel olarak engellenebilir (örtüşebilir). Önemli ÖY'lerin görünür kalmasını sağlamak için farklı kamera açılarını ve işaretçi yüksekliklerini test edin veya engellendiğinde görünürlüğü ve yüksekliği ayarlayacak bir mantık uygulayın.
• Altitude'dan yararlanın: 3D haritalarda işaretçiler, rakım değeri olan konumu kullanmalıdır. Arazi veya binalarla ilişkili işaretçiler için altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' veya benzer ayarları kullanarak harita eğildiğinde ya da döndürüldüğünde işaretçinin doğru şekilde sabitlendiğinden emin olun.

Poligonlar ve çoklu çizgiler

Örnek senaryo: 1.000 poligonu yüklemek için 100-150 ms (modern dizüstü bilgisayar: macOS M3 Pro, Chrome)

• Geometriyi basitleştirme: Oluşturmadan önce yol verilerinize bir basitleştirme algoritması uygulayın. Bu işlem, genel şekli korurken köşe sayısını azaltır ve özellikle karmaşık sınırlar veya rotalar için oluşturma hızını önemli ölçüde artırır.
• Yakınlaştırma seviyesine göre azaltma: Çok büyük veri kümeleri için daha ayrıntılı geometrileri yalnızca kullanıcı alana yakınlaştırdığında yüklemeyi tercih edebilirsiniz. Düşük bir yakınlaştırma seviyesinde, çoklu çizginin veya poligonun yalnızca son derece basitleştirilmiş bir sürümü gereklidir.
• Ekstrüzyon uygulanmış poligonlar için önceden hesaplama: Poligonlarınıza ekstrüzyon uygulanmışsa (extruded: true), yol verileri 3D hacim (mesh) tanımlar. Karmaşık ve çok sayıda tepe noktası olan çokgenleri işlemek, bilgi işlem açısından maliyetlidir. Çokgenleriniz için kaynak verilerin mümkün olduğunca basit olduğundan emin olun.
• Çoklu çizgi ve poligon performansını test edin: Çok sayıda veya karmaşık çoklu çizgi/poligon eklerken, özellikle de 3D için ekstrüzyon uygulandığında kare hızında düşüşe neden olmadıklarından emin olun. Gerekirse köşe sayısını sınırlayın veya basitleştirme algoritmaları kullanın.
• Bir şekli güncellerken, tek tek öğeleri döngüye alıp değiştirmek yerine tek bir işlemde tüm yol dizisini değiştirin. Tek bir atama işlemi (ör. polyline.path = newPathArray;), birden fazla yinelemeli güncellemeden çok daha verimlidir.
• Ekstrüzyon uygulanmış çoklu çizgilerden kaçının (mümkün olduğunda): Çoklu çizgiler, 3D alana yerleştirilecek bir yükseklik değeri kullanabilir ancak çoklu çizgiye ekstrüzyon uygulamak (ör. çizgi kalınlığı ve geniş bir yükseklik aralığı vermek) grafik açısından yoğun olabilir. Daha iyi performans için mümkün olduğunda zeminde 2D çoklu çizgiler (RELATIVE_TO_GROUND) veya minimum çizgi genişliği kullanın.
• drawsOccludedSegments özelliğini yalnızca kritik rota öğeleri için kullanın. Arka plan veya bağlamsal şekillerin, haritanın 3D geometrisi tarafından doğal olarak kapatılmasına izin verin. Kritik olmayan gizli geometrinin gösterilmesi, gereksiz oluşturma karmaşıklığına neden olur.

3D Modeller

3D model .glb oluşturma ve gmp-click etkinliği gibi etkileşimler <gmp-map-3d> içinde çok hızlıdır.

Örnek senaryo: Bir yol boyunca hareket eden hafif bir 3D modelin (200 KB) 1.000 örneğinin gösterilmesi yaklaşık 2 saniye sürer. (modern dizüstü bilgisayar: macOS M3 Pro, Chrome)

• Sıkıştırma ile dosya boyutunu küçültün: Özellikle mobil ağlarda hızlı yükleme sağlamak için karmaşık .glb model dosyalarını 5 MB'ın altında (ideal olarak daha az) tutun. Bunu yapmanın birincil yöntemi, .glb dosyalarınızdaki ağ verilerine Draco Sıkıştırma uygulamaktır. Bu yöntem, minimum görsel kalite kaybıyla dosya boyutunu önemli ölçüde (genellikle %50'den fazla) azaltabilir.
• Model orijinini ortalama: 3D modelleme yazılımının, modeli orijini (0, 0, 0 noktası) modelin tabanında ortalanmış olarak dışa aktardığından emin olun. Bu sayede, harita üzerinde konumlandırma ve döndürme işlemleri basitleşir ve modelin enlem, boylam koordinatlarına doğru şekilde sabitlenmesi sağlanır.
• CORS'u yönetme: Model dosyalarınız web uygulamanızdan farklı bir alan adında veya CDN'de barındırılıyorsa barındırma sunucusunu gerekli Çapraz Kaynaklı Kaynak Paylaşımı (CORS) başlıklarını (ör. Access-Control-Allow-Origin: *) içerecek şekilde yapılandırmanız gerekir. Aksi takdirde harita modeli yükleyemez.