3D Haritalar için en iyi uygulamalar

Bu kılavuzda, 3D Haritalar Web bileşenleri ve uygulamanıza entegrasyonla ilgili dikkat edilmesi gereken noktalar ayrıntılı olarak açıklanmaktadır.

Yer arama ve rota bulma örneği.

Performansla İlgili Dikkat Edilmesi Gerekenler

Etkileşim ve görsel öğeler için sorunsuz ve hızlı bir deneyim sağlamak istiyorsanız aşağıdaki yaklaşımları göz önünde bulundurun.

Haritayı yükleme

3D Haritalar'ın ilk yükleme ve oluşturma kurulumunda, optimum kullanıcı deneyimi için tarayıcı yapılandırma teknikleri ve kullanıcı arayüzüyle ilgili en iyi uygulamalar bir araya getirilir.

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

Arka plan tuvali > Küçültülmüş döşemeler > Arazi ağı > Yüzey ağı (ö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ğinin gerçekleşmesini bekleyin. Bir kullanıcı, ilk gmp-steadystate etkinliğinden önce haritayla etkileşime (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 poligonlar) göstermeyin ya da güncellemeyin. gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange, gmp-tiltchange etkinliklerini dinleyerek yer paylaşımı içeriğini (ör. işaretçiler veya poligonlar) göstermeyin ya da güncellemeyin.

• Sürekli güncellemeler için requestAnimationFrame() (rAF) kullanın ve yoğun hesaplamaları çizim ç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 60 FPS'de sorunsuz animasyon ve daha az güç tüketimi sağlar.
  • Yoğun Çizim İşlerinden Kaçının: Son güncelleme sırasında yoğun ve çizimle ilgili olmayan görevler yapmayın.
  • Ayrı Mantık: rAF döngüsündeki minimum web bileşeni güncelleme çağrılarından önce tüm yoğun mantık işlemlerini gerçekleştirin.

• İlk sahne ayarları: <gmp-map-3d> Eğme gibi kamera ayarları, yükleme hızını etkiler. Sahne ne kadar çok 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 bir kırsal alan).

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

• Ön yükleyici görseli: <gmp-map-3d> son derece hızlı yüklenirken düşük seviye 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 3D sahne yüklenirken resim, animasyon veya metin içeren bir ön yükleyici oluşturabilirsiniz. Aşağıda kullanılacak önemli etkinliği 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 de içeren alternatif bir 2D harita (UYDU) sunulabilir.

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

Not: Her 2D ve 3D harita yükü şu an için ayrı olarak faturalandırılmaktadır. Bu nedenle, ikinci haritayı yalnızca kullanıcılar etkileşim kurmak istediğinde oluşturun.

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

3D Haritalar, daha yüksek hacimli görsellerde bile optimum performans ve minimum oluşturma süresiyle işaretçiler, çoklu çizgiler ve 3D modeller gibi görsel öğeleri 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çinin yüklenmesi 150-300 ms sürüyor (modern dizüstü bilgisayar: macOS M3 Pro, Chrome)

• En İyi Özelleştirme Seçimi:
  • 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 yerleştirme gibi daha fazla özelleştirme için kullanın (base64 kodlaması gerekir). Yükleme sırasında rasterleştirilirler ve performans ek yükü oluştururlar. HTMLImageElement ve SVGElement, Marker3DElement'in varsayılan yuvasına atanmadan önce <template> öğesine sarmalanmalıdır.
  • Şu anda düz HTML veya CSS eklenemez.
• Çakışma davranışını yönetme: İşaretçinin collisionBehavior özelliğinden yararlanın. Her zaman görünür olması gereken önemli işaretçiler için davranışı buna göre ayarlayın. Daha az önemli işaretçilerin, özellikle yüksek yakınlaştırma seviyelerinde daha temiz ve daha az karmaşık bir harita deneyimi sunmak için gizlenmesine izin verin.
• Yalnızca Kritik ÖÖ'ler: drawsWhenOccluded özelliğini yalnızca binalar veya arazi üzerinden mutlaka görülmesi gereken işaretçiler için kullanın (ör. kurtarma hedefi, gömülü bir hizmet hattı veya kullanıcının avatarı).
• Test Kapatma: Harita 3D olduğundan işaretçiler, binalar veya arazi tarafından görsel olarak kapatılabilir (örtülebilir). Ö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 ayarlamak için mantık uygulayın.
• Yükseklikten yararlanma: 3D haritalarda işaretçiler, yükseklik değeri olan konumu kullanmalıdır. Arazi veya binalarla ilişkili işaretçiler için, harita eğildiğinde veya döndürüldüğünde işaretçinin doğru şekilde sabitlenmesini sağlamak üzere altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_TOPO' veya benzer ayarları kullanın.

Poligonlar ve Çoklu Çizgiler

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

• Geometriyi Basitleştir: Oluşturmadan önce yol verilerinize basitleştirme algoritması uygulayın. Bu işlem, genel şekli korurken köşe sayısını azaltır. Böylece, özellikle karmaşık sınırlar veya rotalar için oluşturma hızı önemli ölçüde artar.
• Yakınlaştırma düzeyine göre azaltma: Çok büyük veri kümelerinde, kullanıcı yalnızca alana yakınlaştırdığında daha ayrıntılı geometri yüklemeyi düşünebilirsiniz. Düşük bir yakınlaştırma düzeyinde, çoklu çizginin veya poligonun yalnızca son derece basitleştirilmiş bir sürümü gerekir.
• Ekstrüde edilmiş poligonlar için önceden hesaplama: Poligonlarınız ekstrüde edilmişse (extruded: true) yol verileri bir 3D hacim (bir ağ) tanımlar. Karmaşık ve çok köşeli poligonların işlenmesi işlem yükü açısından pahalıdır. Poligonlarınızın kaynak verilerinin olabildiğince basit olduğundan emin olun.
• Çoklu Çizgi ve Poligon Performansını Test Etme: Çok sayıda veya karmaşık çoklu çizgi/poligon eklerken (özellikle 3D için ekstrüde edildiğinde) bunların kare hızında düşüşe neden olmadığından emin olun. Köşe sayısını sınırlayın veya gerekirse basitleştirme algoritmaları kullanın.
• Bir şekli güncellerken döngü oluşturup tek tek öğeleri değiştirmek yerine tüm yol dizisini tek bir işlemde değiştirin. Tek bir atama işlemi (ör. polyline.path = newPathArray;) birden fazla yinelemeli güncellemeden çok daha verimlidir.
• Ekstrüde edilmiş çoklu çizgilerden kaçının (mümkün olduğunda): Çoklu çizgiler, 3D alana yerleştirilmek için yükseklik değeri kullanabilse de çoklu çizgiyi ekstrüde etmek (ör. ona kontur genişliği ve büyük bir yükseklik aralığı vermek) grafik açısından yoğun olabilir. Mümkün olduğunda, daha iyi performans için zeminde 2D çoklu çizgiler (RELATIVE_TO_GROUND) veya minimum kontur genişliği kullanın.
• drawsOccludedSegments'ı yalnızca kritik yönlendirme öğ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 geometriyi göstermek 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 1.000 adet hafif 3D modelin (200 KB) gösterilmesi yaklaşık 2 saniye sürer. (modern dizüstü bilgisayar: macOS M3 Pro, Chrome)

• Sıkıştırma ile Dosya Boyutunu En Aza İndirme: Özellikle mobil ağlarda hızlı yükleme sağlamak için karmaşık .glb model dosyalarını 5 MB'ın altında tutun (ideal olarak daha az). Bunu sağlamanın temel yöntemi, .glb dosyalarınızdaki ağ verilerine Draco Compression uygulamaktır. Bu yöntem, dosya boyutunu önemli ölçüde (genellikle %50'den fazla) küçültebilir ve görsel kalitede minimum kayba neden olur.
• Modelin Başlangıç Noktasını Ortala: 3D modelleme yazılımının, modeli başlangıç noktası (0, 0, 0 noktası) modelin tabanında ortalanmış şekilde dışa aktardığından emin olun. Bu, haritada konumlandırma ve döndürme işlemlerini basitleştirerek modelin enlem ve boylam koordinatlarına doğru şekilde sabitlenmesini sağlar.
• CORS'u yönetme: Model dosyalarınız web uygulamanızdan farklı bir alan veya CDN'de barındırılıyorsa barındırma sunucusunu gerekli merkezler arası kaynak paylaşımı (CORS) başlıklarını (ör. Access-Control-Allow-Origin: *). Aksi takdirde harita modeli yükleyemez.